{% extends "base.html.j2" %}

{% block main_attributes %} class="service-color lighten" data-service="{{ job.service }}"{% endblock main_attributes %}

{% block page_content %}
<div class="container">
  <div class="row">
    <div class="col s12 job-display" data-job-id="{{ job.hashid }}" data-user-id="{{ job.user.hashid }}">
      <div class="row">
        <div class="col s8 m9 l10">
          <h1 id="title"><i style="font-size: inherit;" class="nopaque-icons service-icons" data-service="{{ job.service }}"></i> <span class="job-title"></span></h1>
        </div>
        <div class="col s4 m3 l2 right-align">
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <span class="chip job-status job-status-text job-status-color white-text"></span>
        </div>
      </div>

      <div class="card service-color-border border-darken" data-service="{{ job.service }}" style="border-top: 10px solid">
        <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="action-button btn disabled waves-effect waves-light modal-trigger" data-action="get-log-request" id="job-log-button" href="#job-log-modal"><i class="material-icons left">text_snippet</i>Log</a>
          {% endif %}
          <a class="btn disabled waves-effect waves-light modal-trigger" href="#restart-job-modal"><i class="material-icons left">repeat</i>Restart</a>
          <a class="btn red waves-effect waves-light modal-trigger" href="#delete-job-modal"><i class="material-icons left">delete</i>Delete</a>
        </div>
      </div>
    </div>

    <div class="col s12">
      <div class="card">
        <div class="card-content">
          <div class="row">
            <span class="card-title"><i class="left material-icons" style="font-size: inherit;">input</i>Inputs</span>
            <div class="job-input-list" data-user-id="{{ job.user.hashid }}" data-job-id="{{ job.hashid }}"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="col s12">
      <div class="card">
        <div class="card-content">
          <div class="row">
            <span class="card-title"><i class="left material-icons" style="font-size: inherit;">done</i>Results</span>
            <div class="job-result-list" data-user-id="{{ job.user.hashid }}" data-job-id="{{ job.hashid }}"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock page_content %}

{% block modals %}
{{ super() }}
<div class="modal" id="delete-job-modal">
  <div class="modal-content">
    <h4>Confirm Job deletion</h4>
    <p>Do you really want to delete the Job <b>{{job.title}}</b>? All files will be permanently deleted!</p>
  </div>
  <div class="modal-footer">
    <a class="btn modal-close waves-effect waves-light">Cancel</a>
    <a class="btn modal-close red waves-effect waves-light" id="delete-job-request">Delete</a>
  </div>
</div>

<div class="modal" id="job-log-modal">
  <div class="modal-content">
    <h4>Job logs</h4>
    <pre><code></code></pre>
  </div>
  <div class="modal-footer">
    <a class="btn modal-close waves-effect waves-light">Close</a>
  </div>
</div>

<div class="modal" id="restart-job-modal">
  <div class="modal-content">
    <h4>Confirm Job restart</h4>
    <p>Do you really want to restart the Job <b>{{ job.title }}</b>? All Job Results will be permanently deleted.</p>
  </div>
  <div class="modal-footer">
    <a class="btn modal-close waves-effect waves-light">Cancel</a>
    <a class="btn modal-close red waves-effect waves-light" id="restart-job-request">Restart</a>
  </div>
</div>
{% endblock modals %}


{% block scripts %}
{{ super() }}
<script>
  let deleteJobRequestElement = document.querySelector('#delete-job-request');
  let restartJobRequestElement = document.querySelector('#restart-job-request');
  deleteJobRequestElement.addEventListener('click', (event) => {
       nopaque.requests.jobs.entity.delete({{ job.hashid|tojson }});
    });
  restartJobRequestElement.addEventListener('click', (event) => {
      nopaque.requests.jobs.entity.restart({{ job.hashid|tojson }});
  });

  if ({{ current_user.is_administrator|tojson }}) {
    let jobLogButtonElement = document.querySelector('#job-log-button');
    jobLogButtonElement.addEventListener('click', (event) => {
      nopaque.requests.jobs.entity.log({{ job.hashid|tojson }})
      .then(
        (response) => {
          response.json()
            .then((json) => {
              let jobLogModalElement = document.querySelector('#job-log-modal');
              jobLogModalElement.querySelector('pre code').textContent = json.jobLog;
            });
        });
    });
  }
</script>
{% endblock scripts %}