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

{% block page_content %}
<script>
  var job_user_id = {{ job.user_id|tojson|safe }}
  socket.emit('inspect_user', job_user_id);
</script>
<script>
  var JOB_ID = {{ job.id|tojson|safe }}
  var foreignJobFlag;
  {% if current_user.id == job.user_id %}
    foreignJobFlag = false;
  {% else %}
    foreignJobFlag = true;
  {% endif %}

  class InformationUpdater {
    constructor(jobId) {
      this.jobId = jobId;
      if (foreignJobFlag) {
        foreignJobsSubscribers.push(this);
      } else {
        jobsSubscribers.push(this);
      }
    }

    _init() {
      var creationDateElement, descriptionElement, endDateElement,
          memMbElement, nCoresElement, serviceElement, serviceArgsElement,
          serviceVersionElement, statusColor, statusElement, titleElement;

      if (foreignJobFlag) {
        this.job = foreignJobs[this.jobId];
      } else {
        this.job = jobs[this.jobId];
      }
      creationDateElement = document.getElementById("creation-date");
      creationDateElement.value = (new Date(this.job.creation_date * 1000)).toLocaleString();
      descriptionElement = document.getElementById("description");
      descriptionElement.innerHTML = this.job.description;
      endDateElement = document.getElementById("end-date");
      endDateElement.value = this.job.end_date ? (new Date(this.job.end_date * 1000)).toLocaleString() : "Not available";
      memMbElement = document.getElementById("mem-mb");
      memMbElement.value = this.job.mem_mb;
      nCoresElement = document.getElementById("n-cores");
      nCoresElement.value = this.job.n_cores;
      serviceElement = document.getElementById("service");
      serviceElement.value = this.job.service;
      serviceArgsElement = document.getElementById("service-args");
      serviceArgsElement.value = this.job.service_args;
      serviceVersionElement = document.getElementById("service-version");
      serviceVersionElement.value = this.job.service_version;
      statusColor = JobList.STATUS_COLORS[this.job.status] || JobList.STATUS_COLORS['default'];
      statusElement = document.getElementById("status");
      statusElement.classList.add(statusColor);
      statusElement.innerHTML = this.job.status;
      titleElement = document.getElementById("title");
      titleElement.innerHTML = this.job.title;

      var downloadIconElement, fileElement, filesElement, input, inputDownloadElement, inputElement, result, resultDownloadElement, resultsElement;

      filesElement = document.getElementById("files");
      downloadIconElement = document.createElement("i");
      downloadIconElement.classList.add("material-icons", "left");
      downloadIconElement.innerText = "file_download";
      for (input of this.job.inputs) {
        fileElement = document.createElement("tr");
        inputDownloadElement = document.createElement("a");
        inputDownloadElement.classList.add("waves-effect", "waves-light", "btn-small");
        inputDownloadElement.href = `/jobs/${this.job.id}/download?file=${input.filename}`;
        inputDownloadElement.innerText = input.filename;
        inputDownloadElement.appendChild(downloadIconElement.cloneNode(true));
        inputElement = document.createElement("td");
        inputElement.id = `input-${input.id}`;
        inputElement.appendChild(inputDownloadElement);
        resultsElement = document.createElement("td");
        resultsElement.id = `results-${input.id}`;
        // add_results(input);
        for (result of input.results) {
          resultDownloadElement = document.createElement("a");
          resultDownloadElement.classList.add("waves-effect", "waves-light", "btn-small");
          resultDownloadElement.href = `/jobs/${this.job.id}/download?file=output/${input.filename}/${result.filename}`;
          resultDownloadElement.innerText = result.filename.split(".").slice(-1)[0];
          resultDownloadElement.appendChild(downloadIconElement.cloneNode(true));
          resultsElement.appendChild(resultDownloadElement);
        }
        fileElement.appendChild(inputElement);
        fileElement.appendChild(resultsElement);
        filesElement.appendChild(fileElement);
      }

      M.updateTextFields();
    }

    _update(patch) {
      var newStatusColor, operation, pathArray, status, statusColor,
          updatedElement;

      for (operation of patch) {
        /* "/jobId/valueName" -> ["jobId", "valueName"] */
        pathArray = operation.path.split("/").slice(1);
        console.log(operation);
        console.log(pathArray);
        if (pathArray[0] != this.jobId) {continue;}
        switch(operation.op) {
          case "add":
            switch(pathArray[1]) {
              case "input":

                break;
            }
            break;
          case "delete":
            location.reload();
            break;
          case "replace":
            switch(pathArray[1]) {
              case "description":
                updatedElement = document.getElementById("description");
                updatedElement.innerHTML = operation.value;
                break;
              case "end_date":
                updatedElement = document.getElementById("end-date");
                updatedElement.value = (new Date(operation.value * 1000)).toLocaleString();
                M.updateTextFields();
                break;
              case "status":
                if (operation.value == "complete") {
                  location.reload();
                }
                updatedElement = document.getElementById("status");
                status = updatedElement.innerHTML;
                statusColor = JobList.STATUS_COLORS[status]
                            || JobList.STATUS_COLORS['default'];
                newStatusColor = JobList.STATUS_COLORS[operation.value]
                               || JobList.STATUS_COLORS['default'];
                updatedElement.classList.remove(statusColor);
                updatedElement.classList.add(newStatusColor);
                updatedElement.innerHTML = operation.value;
                Animations.pulse(updatedElement, 3000);
                break;
              case "title":
                updatedElement = document.getElementById("title");
                updatedElement.innerHTML = operation.value;
                break;
              default:
                break;
            }
            break;
          default:
            break;
        }
      }
    }
  }
  var informationUpdater = new InformationUpdater(JOB_ID);
</script>

<div class="col s12 m4">
  <h3 id="title"></h3>
  <p id="description"></p>
  <a class="waves-effect waves-light btn" id="status"></a>
  <h2>Actions:</h2>
  <!-- Confirm deletion of job with modal dialogue
  Modal Trigger-->
  <a href="#modal-confirm-delete" class="waves-effect waves-light btn red modal-trigger"><i class="material-icons left">delete</i>Delete Job</a>
  <a href="#" class="waves-effect waves-light btn"><i class="material-icons left">settings</i>Export Parameters</a>
  <!-- Modal Strucutre -->
  <div id="modal-confirm-delete" class="modal">
    <div class="modal-content">
      <h4>Confirm deletion</h4>
        <p>Do you really want to delete the job {{job.title}}?
        All iput and output files will be permanently deleted.</p>
    </div>
    <div class="modal-footer">
      <a href="{{ url_for('main.delete_job', job_id=job.id) }}" class="modal-close waves-effect waves-green btn red"><i class="material-icons left">delete</i>Delete Job</a>
      <a href="#!" class="modal-close waves-effect waves-green btn cancel">Cancel</a>
    </div>
  </div>
</div>


<div class="col s12 m8">
  <div class="card">
    <div class="card-content">
      <span class="card-title">Chronometrics</span>
      <div class="row">
        <div class="col s12 m6">
          <div class="input-field">
            <input disabled value="" id="creation-date" type="text" class="validate">
            <label for="creation-date">Creation date</label>
          </div>
        </div>
        <div class="col s12 m6">
          <div class="input-field">
            <input disabled value="" id="end-date" type="text" class="validate">
            <label for="end-date">End date</label>
          </div>
        </div>
      </div>

      <span class="card-title">Ressource allocations</span>
      <div class="row">
        <div class="col s12 m6">
          <div class="input-field">
            <input disabled value="" id="mem-mb" type="text" class="validate">
            <label for="mem-mb">Memory</label>
          </div>
        </div>
        <div class="col s12 m6">
          <div class="input-field">
            <input disabled value="" id="n-cores" type="text" class="validate">
            <label for="n-cores">CPU cores</label>
          </div>
        </div>
      </div>

      <span class="card-title">Service informations</span>
      <div class="row">
        <div class="col s12 m4">
          <div class="input-field">
            <input disabled value="" id="service" type="text" class="validate">
            <label for="service">Service</label>
          </div>
        </div>
        <div class="col s12 m4">
          <div class="input-field">
            <input disabled value="" id="service-args" type="text" class="validate">
            <label for="service-args">Service arguments</label>
          </div>
        </div>
        <div class="col s12 m4">
          <div class="input-field">
            <input disabled value="" id="service-version" type="text" class="validate">
            <label for="service-version">Service version</label>
          </div>
        </div>
      </div>

      <span class="card-title">Files</span>
      <div style="overflow-x:auto;">
      <table class="highlight">
        <thead>
          <tr>
              <th style="width: 25%;">Inputs</th>
              <th style="width: 25%;"></th>
              <th style="width: 25%;">Results</th>
              <th style="width: 25%;"></th>
          </tr>
        </thead>
        <tbody id="files"></tbody>
      </table>

      <span class="card-title">Files old</span>
      <table>
        <thead>
          <tr>
              <th style="width: 50%;">Inputs</th>
              <th style="width: 50%;">Results</th>
          </tr>
        </thead>
        <tbody>
          {% for file in files %}
          <tr>
            <td rowspan="4">
              {{ file }}
            </td>
            <td rowspan="4">
              <a href="{{ url_for('main.job_download', job_id=job.id, file=files[file]['path']) }}" class="waves-effect waves-light btn-small"><i class="material-icons left">file_download</i>Download</a>
            </td>
          </tr>
          {% if files[file]['results'] %}
          {% for result in files[file]['results'] %}
          <tr>
            <td>
              {{ result }}
            </td>
            <td>
              {% if job.status == 'complete' %}
              <a href="{{ url_for('main.job_download', job_id=job.id, file=files[file]['results'][result]['path']) }}" class="waves-effect waves-light btn-small"><i class="material-icons left">file_download</i>Download</a>
              {% endif %}
            </td>
          </tr>
          {% if result == 'vrt' %}
          <tr>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
          </tr>
          {% endif %}
          {% endfor %}
          {% else %}
          {% for step in range(1, 4) %}
          <tr>
            <td>processing...</td>
            <td></td>
          </tr>
          {% endfor %}
          {% endif %}
          {% endfor %}
        </tbody>
      </table>
      </div>
    </div>
  </div>
</div>

{% endblock %}