{% extends "nopaque.html.j2" %}
{% from '_colors.html.j2' import colors %}

{% if job.service == 'file-setup' %}
  {% set scheme_primary_color = colors.file_setup_darken %}
  {% set scheme_secondary_color = colors.file_setup_lighten %}
{% elif job.service == 'nlp' %}
  {% set scheme_primary_color = colors.nlp_darken %}
  {% set scheme_secondary_color = colors.nlp_lighten %}
{% elif job.service == 'ocr' %}
  {% set scheme_primary_color = colors.ocr_darken %}
  {% set scheme_secondary_color = colors.ocr_lighten %}
{% endif %}
{% block main_attribs %} style="background-color: {{ scheme_secondary_color }};"{% endblock main_attribs %}

{% block nav_content %}
{% include 'jobs/_breadcrumbs.html.j2' %}
{% endblock nav_content %}

{% block page_content %}
<div class="container">
  <div class="row">
    <div class="col s12" data-job-id="{{ job.id }}" data-user-id="{{ job.creator.id }}" id="job-display">
      <div class="row">
        <div class="col s8 m9 l10">
          <h1 id="title">[<span class="job-service"></span>] <span class="job-title"></span></h1>
        </div>
        <div class="col s4 m3 l2 right-align">
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <span class="chip status white-text"></span>
          <div class="active preloader-wrapper small status-spinner">
            <div class="spinner-layer spinner-blue-only">
              <div class="circle-clipper left">
                <div class="circle"></div>
              </div>
              <div class="gap-patch">
                <div class="circle"></div>
              </div>
              <div class="circle-clipper right">
                <div class="circle"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="card" style="border-top: 10px solid {{ scheme_primary_color }}">
        <div class="card-content">
          <div class="row">
            <div class="col s12">
              <div class="input-field">
                <input class="job-description" disabled id="job-description" type="text">
                <label for="job-description">Description</label>
              </div>
            </div>

            <div class="col s12 m6">
              <div class="input-field">
                <input class="job-creation-date" disabled id="job-creation-date" type="text">
                <label for="job-creation-date">Creation date</label>
              </div>
            </div>

            <div class="col s12 m6">
              <div class="input-field">
                <input class="job-end-date" disabled id="job-end-date" type="text">
                <label for="job-end-date">End date</label>
              </div>
            </div>

            <div class="col s12 m4">
              <div class="input-field">
                <input class="job-service" disabled id="job-service" type="text">
                <label for="job-service">Service</label>
              </div>
            </div>

            <div class="col s12 m4">
              <div class="input-field">
                <input class="job-service-args" disabled id="job-service-args" type="text">
                <label for="job-service-args">Service arguments</label>
              </div>
            </div>

            <div class="col s12 m4">
              <div class="input-field">
                <input class="job-service-version" disabled id="job-service-version" type="text">
                <label for="job-service-version">Service version</label>
              </div>
            </div>
          </div>
        </div>
        <div class="card-action right-align">
          {% if current_user.is_administrator()  %}
          <a class="btn hide modal-trigger restart-job-trigger waves-effect waves-light" data-target="restart-job-modal"><i class="material-icons left">repeat</i>Restart</a>
          {% endif %}
          <!-- <a href="#" class="btn disabled waves-effect waves-light"><i class="material-icons left">settings</i>Export Parameters</a> -->
          <a class="btn modal-trigger red waves-effect waves-light" data-target="delete-job-modal"><i class="material-icons left">delete</i>Delete</a>
        </div>
      </div>

      <div id="delete-job-modal" class="modal">
        <div class="modal-content">
          <h4>Confirm deletion</h4>
          <p>Do you really want to delete the job <span class="job-title"></span>? All associated files will be permanently deleted.</p>
        </div>
        <div class="modal-footer">
          <a href="#!" class="btn modal-close waves-effect waves-light">Cancel</a>
          <a class="btn modal-close red waves-effect waves-light" href="{{ url_for('jobs.delete_job', job_id=job.id) }}"><i class="material-icons left">delete</i>Delete</a>
        </div>
      </div>

      {% if current_user.is_administrator() %}
      <div id="restart-job-modal" class="modal">
        <div class="modal-content">
          <h4>Confirm restart</h4>
          <p>Do you really want to restart the job <span class="job-title"></span>? All log and result files will be permanently deleted.</p>
        </div>
        <div class="modal-footer">
          <a href="#!" class="btn modal-close waves-effect waves-light">Cancel</a>
          <a class="btn modal-close red waves-effect waves-light" href="{{ url_for('jobs.restart', job_id=job.id) }}"><i class="material-icons left">restart</i>Restart</a>
        </div>
      </div>
      {% endif %}
    </div>

    <div class="col s12" id="job-inputs" data-job-id="{{ job.id }}" data-user-id="{{ job.creator.id }}">
      <div class="card">
        <div class="card-content">
          <div class="row">
            <div class="col s12 m2">
              <span class="card-title"><i class="left material-icons" style="font-size: inherit;">input</i>Inputs</span>
              <p>Original input files.</p>
            </div>
            <div class="col s12 m10">
              <table class="highlight responsive-table">
                <thead>
                  <tr>
                    <th class="sort" data-sort="filename">Filename</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody class="list"></tbody>
              </table>
              <ul class="pagination"></ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col s12" id="job-results" data-job-id="{{ job.id }}" data-user-id="{{ job.creator.id }}">
      <div class="card">
        <div class="card-content">
          <div class="row">
            <div class="col s12 m2">
              <span class="card-title"><i class="left material-icons" style="font-size: inherit;">done</i>Results</span>
              <p>Processed result files.</p>
            </div>
            <div class="col s12 m10">
              <table class="highlight responsive-table">
                <thead>
                  <tr>
                    <th>Description</th>
                    <th>Filename</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody class="list"></tbody>
              </table>
              <ul class="pagination"></ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock page_content %}

{% block scripts %}
{{ super() }}
<script>
  nopaque.appClient.loadUser({{ job.creator.id }});
  let jobDisplay = new JobDisplay(document.querySelector('#job-display'));
  let jobInputList = new JobInputList(document.querySelector('#job-inputs'));
  let jobResultList = new JobResultList(document.querySelector('#job-results'));
</script>
{% endblock scripts %}