@section customHeader {
    <script type='text/javascript' src='@Url.Content("~/Content/job.model.js")'></script>
    <script type='text/javascript' src='@Url.Content("~/Content/job.view.js")'></script>
    <script type='text/javascript' src='@Url.Content("~/Content/job.controller.js")'></script>
    <script type='text/javascript' src='@Url.Content("~/Content/moment.min.js")'></script>
}

@{
    ViewBag.Title = "Jobs";
}

<script type="text/template" id="loadingTemplate">
    <span><%= text %> <img src="@Url.Content("~/Content/ajax-loader.gif")" alt="Loading animation" class="hugeLoading" /> </span>
</script>

<script type="text/template" id="jobRowTemplate">
<tr data-jobId="<%= Id%>">
  <td><%= Id%></td>
  <td>
    <%= moment(DateCreated).format('YYYY-MM-DD HH:mm:ss') %>
  </td>
  <td><%= Name%></td>
  <td><%= Resource%></td>  
  <td>
  <% if (Loading) { %>
    <img src="@Url.Content("~/Content/ajax-loader.gif")" alt="Loading animation" class="loader" />
  <% }%>
  <% if (State == 0) { %>    
  <span>Waiting...</span>
  <% } else if (State == 1) { %>
  <span>Calculating...</span>
  <% } else if (State == 2) { %>
  <img src="@Url.Content("~/Content/warning-2.png")" alt="Loading animation" class="loader" />
  <span>Aborted</span>
  <% } else if (State == 3) { %>
  <img src="@Url.Content("~/Content/warning-2.png")" alt="Loading animation" class="loader" />
  <span>Failed</span>
  <% } else { %>
  <img src="@Url.Content("~/Content/ok-2.png")" alt="Loading animation" class="loader" />
  <span>Finished</span>
  <% } %>  
  </td>
  <td><button type="button" data-id="<%= Id %>" data-name="DeleteButton" >Delete</Button></td>
</tr>
</script>

<script type="text/template" id="jobHeaderTemplate">
<thead>
<tr>
  <th>Id</th>
  <th>Created</th>
  <th>Name</th>
  <th>Resource</th>
  <th>State</th>
  <td>Delete</td>
</tr>
</thead>
</script>

<script type="text/template" id="runTemplate">
  <div class="accordion">
    <h3>Results</h3>
    <div>
    <table>
        <thead>
        <tr>
            <td>Key</td>
            <td>Value</td>
        </tr>
        </thead>
        <tbody class="results">
        </tbody>
    </table>
    </div>
    <h3>Inputs</h3>
    <div>
    <table>
        <thead>
        <tr>
            <td>Key</td>
            <td>Value</td>
        </tr>
        </thead>
        <tbody class="inputs">
        </tbody>
    </table>
    </div>
</div>
</script>

<script type="text/template" id="runcollection_template">
<div>
  <span>Plot: 
    <select class="plotType">  
      <option>Boxplot</option>
      <option>Bubblechart</option>
      <option>Datatable</option>
    </select>
  </span>
  <span class="choice">
    <span>X: <select class="x"></select></span>
    <span>Y: <select class="y"></select></span>
  </span>
  
  <span class="bubble">
    Bubble Size: <select class="bubbleSize"><option>Constant</option></select> <div class="bubbleSlider"></div>
  </span>

  <span class="datatable">
    DataTable: <select class="datatableOptions"></select>
    DataRow: <select class="datatableRow"></select>    
  </span>
  <div class="resizer" style="width: 600px">
    <div class="plot" id="tmp">          
    </div>  
  </div>
</div>
</script>


<script type='text/javascript'>
$(document).ready(function () {
    var ctrl = new OAAS_CONTROLLER.JobPageController();
    ctrl.create();
  });

</script>
<noscript>
<p>
  Please activate JavaScript to view this page correctly!
</p>
</noscript>

<h1>Job overview</h1>
<div id='jobOverview' style='overflow: auto; height: 450px' class='bigImage'>
    <p>Loading jobs... Please be patient...</p>
    <img src="@Url.Content("~/Content/ajax-loader.gif")" alt="Loading animation" class="hugeLoading" />
</div>


<h1>Job results</h1>
<div id='jobDetails'></div>
<div id='tmp'>
</div>