{% extends 'layouts/base.html' %}

{% set active_menu = 'jobqueue' %}
{% set page_title = 'Job: ' + job_title %}

{% block body_header %}
<h1 class="title mb-4">{{job_title}}</h1>
{% endblock %}

{% block js_pre %}
<script src="{{ url_for('static', filename='js/term2html.js') }}"></script>
{% endblock %}

{% block body %}
<div class="columns is-multiline is-mobile">
    <div class="column is-12">

    <b>ID:</b> {{job.uuid}}<br/>
    <br/>
    <b>Created:</b> {{humanized_timediff(job.time_created)}}<br/>
    <b>Assigned:</b> {{humanized_timediff(job.time_assigned)}}<br/>
    {% if job.time_finished %}<b>Finished:</b> {{humanized_timediff(job.time_finished)}}<br/>{% endif %}
    {% if worker %}
    <b>Worker:</b> <a href="{{ url_for('jobs.workers') }}">{{worker.name}}</a><br/>
    {% endif %}

    <b class="mt-2 mb-2">Status:</b>
    {% if job.status == JobStatus.WAITING %}
    <span style="font-size: 20px; line-height: 1.5em;">
        <i class="fa fa-hourglass-start" aria-hidden="true"></i>
    </span> Waiting
    {% elif job.status == JobStatus.DEPWAIT %}
    <span style="font-size: 20px; line-height: 1.5em;">
        <i class="fa fa-puzzle-piece" aria-hidden="true"></i>
    </span> Waiting for dependency
    {% elif job.status == JobStatus.SCHEDULED %}
    <span style="font-size: 20px; line-height: 1.5em;">
        <i class="fa fa-circle-notch fa-spin" aria-hidden="true"></i>
    </span> Scheduled
    {% elif job.status == JobStatus.RUNNING %}
    <span style="font-size: 20px; line-height: 1.5em;">
        <i class="fa fa-cog fa-spin" aria-hidden="true"></i>
    </span> Running
    {% elif job.status == JobStatus.DONE %}
    <span style="font-size: 20px; line-height: 1.5em;">
        <i class="fa fa-check" aria-hidden="true"></i>
    </span> Done
    {% elif job.status == JobStatus.STARVING %}
    <span style="font-size: 20px; line-height: 1.5em;">
        <i class="fa fa-clock-o" aria-hidden="true"></i>
    </span> Starving
    {% elif job.status == JobStatus.TERMINATED %}
    <span style="font-size: 20px; line-height: 1.5em;">
        <i class="fa fa-skull" aria-hidden="true"></i>
    </span> Terminated
    {% endif %}

    {% if job.result != JobResult.UNKNOWN %}
    <h4 class="subtitle is-4" style="margin-bottom: 0.5rem;margin-top: 1.5rem;">Result</h4>
    <p>
    {% if job.result == JobResult.SUCCESS_PENDING %}
    <span style="font-size: 20px; line-height: 1.5em;">
        <font class="fa fa-check-circle" aria-hidden="true" color="green"></font>
        <i class="fa fa-clock" aria-hidden="true"></i>
    </span> Successful (pending)
    {% elif job.result == JobResult.FAILURE_PENDING %}
    <span style="font-size: 20px; line-height: 1.5em;">
        <font class="fa fa-times-circle" aria-hidden="true" color="red"></font>
        <i class="fa fa-clock" aria-hidden="true"></i>
    </span> Failed (pending)
    {% elif job.result == JobResult.SUCCESS %}
    <span style="font-size: 20px; line-height: 1.5em;">
        <font class="fa fa-check-circle" aria-hidden="true" color="green"></font>
    </span> Success
    {% elif job.result == JobResult.FAILURE %}
    <span style="font-size: 20px; line-height: 1.5em;">
        <font class="fa fa-times-circle" aria-hidden="true" color="red"></font>
    </span> Failed
    {% elif job.result == JobResult.FAILURE_DEPENDENCY %}
    <span style="font-size: 20px; line-height: 1.5em;">
        <font class="fa fa-diagram-project" aria-hidden="true" color="purple"></font>
    </span> Dependency issue
    {% endif %}
    </p>
    {% endif %}


    {% block job_details %}{% endblock %}

    {% if log_url %}
    <br/>
    <p>
      <a class="button is-primary" href="{{ url_for('jobs.view_log', uuid=job.uuid)}}"><i class="fa-solid fa-eye"></i>&nbsp;View Full Log</a>
      <a class="button is-link is-light" href="{{log_url}}"><i class="fa-solid fa-download"></i>&nbsp;Download Log</a>
      {% if firehose_url %}
      <a class="button is-info is-light" href="{{firehose_url}}"><i class="fa-solid fa-code-commit"></i>&nbsp;Download Firehose XML</a>
      {% endif %}
    </p>
    {% else %}
    <h4 class="subtitle is-4" style="margin-bottom: 0.5rem;margin-top: 1.5rem;">Log Excerpt</h4>
    <div class="box">
      <pre style="padding: 0; background-color: initial;" id="logDisplay"></pre>
    </div>

    <script>
      const logDisplay = document.getElementById('logDisplay');
      logDisplay.innerHTML = term2html({{job.latest_log_excerpt|tojson if job.latest_log_excerpt else "'...'"}});
    </script>
    {% endif %}

    </div>
</div>
{% endblock %}