<% /* bootstrap data onto page */ %>
<script>
PATH_TO_PACK = <%- (typeof pathToPack !== 'undefined') ? JSON.stringify(pathToPack) : '"???"' %>;
PACK_IDENTITY = <%- (typeof packIdentity !== 'undefined') ? JSON.stringify(packIdentity) : '"???"' %>;
MACHINE_DEFS = <%- (typeof machineDefs !== 'undefined') ?  JSON.stringify(machineDefs) : '[]' %>;
</script>


<div class="scribe default-page" ng-app="homepage" ng-controller="afterRender">

    <!-- HEADER -->
    <%- partial('partials/header.ejs') %>

    <div class="main-container sidebar-hidden">

      <!-- SIDE NAVIGATION -->
      <div class="nav-sidebar main-dashboard-nav">
        <h3><!-- <span class="nav-icon"><i class="fa fa-code"></i></span> --><i class="fa fa-code"></i> Automated Tests (4)</h3>
        <ul class="nav">
          <li class="nav-item"><span class="text">Test Name</span></li>
          <li class="nav-item"><span class="text">Other Test</span></li>
        </ul>
      </div>

      <!-- MAIN SCRIBE CONTENT -->
      <div class="scribe-content pack-preview-widget-content" ng-cloak>
        <div class="show-inputs">
          <div ng-show="showingHelpText" class="help-text">
            <p>To configure a different pack, set <code>sails.config.machinepreview.pathToPack</code>. If relative, path will be resolved using test-scribe's top-level app path.</p>
            <p>For example:</p>
            <pre rainbow-block><code data-language="shell">sails_machinepreview__pathToPack=/code/machinepack-fs sails lift</code></pre>
            <p>Also note that the inputs below are only relatively intelligent -- they use the same parsing code as the machinepack command-line tool and therefore follow the same rules in regards to specifying booleans, numbers, or dictionaries/arrays (as JSON)</p>
            <button class="dismiss" ng-click="showingHelpText = false">OK, got it.</button>
          </div>




          <div role="pack-preview-widget">
            <div class="scribe-header">
              <p>{{currentMachine.description || 'Machine Preview'}}</p>
              <!-- Button to toggle reloading the pack from disk on run (picks up new code changes) -->
              <button class="reload-button"
              title="Note: This will NOT reload the pack's NPM dependencies.  To do that, you'll need to kill and restart the scribe server.  It will also NOT reload the machine definitions currently loaded on this web page.  To do that, refresh your browser."
              ng-class="{'busy': currentPack.isReloading, 'success': currentPack.willReloadOnRun && !currentPack.isReloading, 'failed': currentPack.hasReloadingFailed, 'warning': !currentPack.willReloadOnRun && !currentPack.isReloading}"
              ng-disabled="currentPack.isReloading"
              ng-show="currentPack.hasRunAnyMachineOnce"
              ng-click="setReloadOnRun({willReload: !currentPack.willReloadOnRun})">
                {{currentPack.hasReloadingFailed?'An error occurred while reloading pack- try running machine again to re-attempt':'Reload pack on next run?'}}
                <i class="fa" ng-class="{'fa-square': !currentPack.willReloadOnRun, 'fa-check-square': currentPack.willReloadOnRun, 'fa-exclamation-triangle': currentPack.hasReloadingFailed}"></i>
              </button>

            </div>

            <div class="scribe-inner">

              <!-- THIS IS JUST A PLACEHOLDER- IT IS REALLY HORRIBLE OMG PLZ REMOVE IT (-mike) -->
              <% if (_.isObject(error)) {%><div class="intro error"><h2><%= error.message %></h2><br/><p> Please check your pack and make sure it is in a valid state, then restart the Treeline command-line tool.  If you can't figure it out, please contact support or make an issue <a href="https://github.com/treelinehq/treeline">here</a>.</p><h3>Technical details:</h3><code><pre><%- error.details %></pre></code></div>
              <% } else { %><p class="intro" ng-hide="currentMachine.isDefined">Hi!  I'm the <span><strong>test scribe</strong></span>. It's nice to meet you. I help developers run machines interactively and <em>generate automated test scripts</em> based on the outcome. Please choose a machine from the dropdown to begin.</p><% } %>

              <!-- Choose action -->


              <!-- Configure inputs, then run machine, and potentially save test -->
              <div class="configure" ng-show="currentMachine.isDefined">

                <div class="{{ currentMachine.identity }} configure-section">
                  <form id="configuredInputsForm" ng-submit="runMachine({identity: currentMachine.identity })">


                    <div class="form-section preview-action-input-form-group-{{inputDef.id}} {{inputDef.required?'required':'optional'}}"
                      ng-repeat="inputDef in currentMachine.inputs">
                      <label for="preview-action-input-{{inputDef.id}}">{{inputDef.friendlyName || inputDef.id }}{{inputDef.required?'*':'   (optional)'}}
                      <!-- type: -->
                      <span class="type-icon"><i class="type-{{inputDef.typeSchema}}"></i> {{inputDef.typeSchema}}</span><br/>
                      <!-- description -->
                      <em><small>{{inputDef.description}}</small></em></label>
                      <input type="text" name="{{inputDef.id}}"
                      ng-enter="runMachine({identity: currentMachine.identity })"
                      class="form-control" id="preview-action-input-{{inputDef.id}}"
                      ng-model="inputDef.configuredVal"
                      placeholder="e.g. {{inputDef.displayExample}}"/>
                    </div>

                    <div class="empty-message" ng-show="!currentMachine.inputs.length">
                    This machine has no inputs to configure. Go ahead and click the button!
                    </div>
                    <div class="form-section submit-section">
                      <button
                        type="submit"
                        class="submit-button run-button"
                        ng-disabled="currentMachine.isRunning"
                        ng-class="{'failed': currentMachine.hasError, 'running': currentMachine.isRunning}"><span class="fa" ng-class="{'fa-play': !currentMachine.isRunning && !currentMachine.hasError}"></span>&nbsp;&nbsp;{{currentMachine.hasError?'An error occurred- try again?':currentMachine.hasRun?'Run again':currentMachine.isRunning?'Running machine...':'Run'}}</button>
                    </div>
                  </form>

                </div> <!-- /.configure-section -->
              </div> <!-- /.configure -->

            </div> <!-- /.scribe-inner -->
          </div> <!-- /.pack-preview-widget -->


          <!-- <hr/> -->
        </div> <!-- /.panel-body -->

        <!-- preview results -->
        <div class="preview-results" ng-show="currentMachine.hasRun" press-esc-to-close is-open="currentMachine.hasRun">
          <div class="scribe-header preview-results-header">
            <h2>Results</h2>
            <!-- Button to toggle reloading the pack from disk on run (picks up new code changes) -->
            <button class="reload-button"
            title="Note: This will NOT reload the pack's NPM dependencies.  To do that, you'll need to kill and restart the scribe server.  It will also NOT reload the machine definitions currently loaded on this web page.  To do that, refresh your browser."
            ng-class="{'busy': currentPack.isReloading, 'success': currentPack.willReloadOnRun && !currentPack.isReloading, 'failed': currentPack.hasReloadingFailed, 'warning': !currentPack.willReloadOnRun && !currentPack.isReloading}"
            ng-disabled="currentPack.isReloading"
            ng-show="currentPack.hasRunAnyMachineOnce"
            ng-click="setReloadOnRun({willReload: !currentPack.willReloadOnRun})">
              {{currentPack.hasReloadingFailed?'An error occurred while reloading pack- try running machine again to re-attempt':'Reload pack on next run?'}}
              <i class="fa" ng-class="{'fa-square': !currentPack.willReloadOnRun, 'fa-check-square': currentPack.willReloadOnRun, 'fa-exclamation-triangle': currentPack.hasReloadingFailed}"></i>
            </button>
          </div>
          <span class="dismiss-results" ng-click="currentMachine.hasRun = false"><i class="fa fa-caret-left"></i> Go Back</span>

          <div class="scribe-inner result-content">
            <!-- exit traversed: -->
            <h4 class="outcome">
              <strong>Outcome</strong>: <em class="exit">{{currentTest.outcome}}</em>
            </h4>

            <!-- type: -->
            <span class="type-icon" ng-if="currentTest.hasExitExample"><i class="type-{{currentTest.outputType}}"></i> {{currentTest.outputType}}</span>

            <!-- duration: -->
            <p class="duration" ng-if="currentTest.duration">
              <em>This run took <span>{{currentTest.duration}}</span> ms.</em>
            </p>


            <!-- output: -->
            <div ng-if="currentTest.hasOutput">
              <p ng-if="!currentTest.hasExitExample">Machine has no exit example, but received some output anyway:</p>
              <div class="returns" ng-if="currentTest.hasOutput">
                <pre rainbow-block><code data-language="javascript">{{currentTest.output}}</code></pre>
              </div>
              <!-- <strong>Output</strong>: &nbsp; &nbsp;  -->
            </div>


            <h5 class="test-label">Generate a test based on these results?</h5>
            <p ng-if="currentTest.hasOutput && !currentTest.hasExitExample">
              <em>(only the expected exit will be saved-- the output will not be tested)</em>
            </p>
            <button data-purpose="saveAsTest" class="submit-button save-test-btn"
              ng-class="{'busy': currentTest.isSaving, 'btn-success': currentTest.hasSaved, 'failed': currentTest.hasError, 'btn-primary': !currentTest.hasSaved, abs-right: currentTest.hasOutput && !currentTest.hasExitExample}"
              ng-disabled="currentTest.isSaving"
              ng-click="saveAsTest()">{{currentTest.hasError?'An error occurred- try again?':currentTest.isSaving?'Saving test...':currentTest.hasSaved?'Saved!':'Save test'}}</button>
          </div>
        </div>

    </div> <!-- /.main.container -->

    <!-- <footer class="scribe-footer" ng-show="scribeVisible" ng-init="scribeVisible = true">
      Hi!  I'm the <span><strong>test scribe</strong></span>. It's nice to meet you.
      I help developers run machines interactively and <em>generate automated test scripts</em> based on the outcome.
    </footer> -->

</div> <!-- /.default-page -->




<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/dependencies/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="/dependencies/bootstrap.min.js"></script>

</script>
