{% extends 'base/layout.html' %}
{% load helpers %}
{% load form_helpers %}
{% load log_levels %}
{% load static %}

{% block head %}
<script src="{% static 'jobs.js' %}?v{{ settings.VERSION }}"
        onerror="window.location='{% url 'media_failure' %}?filename=jobs.js'"></script>
{% endblock %}

{% block title %}{{ script }}{% endblock %}

{% block subtitle %}
  {{ script.Meta.description|render_markdown }}
  <span id="pending-result-label">{% include 'extras/inc/job_label.html' with result=result %}</span>
{% endblock %}

{% block header %}
  <div class="row noprint">
      <div class="col col-md-12">
          <nav class="breadcrumb-container px-3" aria-label="breadcrumb">
              <ol class="breadcrumb">
                  <li class="breadcrumb-item"><a href="{% url 'extras:script_list' %}">Scripts</a></li>
                  <li class="breadcrumb-item"><a href="{% url 'extras:script_list' %}#module.{{ script.module }}">{{ script.module|bettertitle }}</a></li>
                  <li class="breadcrumb-item"><a href="{% url 'extras:script' module=script.module name=class_name %}">{{ script }}</a></li>
                  <li class="breadcrumb-item">{{ result.created|annotated_date }}</li>
              </ol>
          </nav>
      </div>
  </div>
  {{ block.super }}
{% endblock header %}

{% block content-wrapper %}
  <ul class="nav nav-tabs px-3" role="tablist">
      <li class="nav-item" role="presentation">
          <a href="#log" role="tab" data-bs-toggle="tab" class="nav-link active">Log</a>
      </li>
      <li class="nav-item" role="presentation">
          <a href="#output" role="tab" data-bs-toggle="tab" class="nav-link">Output</a>
      </li>
      <li class="nav-item" role="presentation">
          <a href="#source" role="tab" data-bs-toggle="tab" class="nav-link">Source</a>
      </li>
  </ul>
  <div class="tab-content mb-3">
      <p>
          Run: <strong>{{ result.created|annotated_date }}</strong>
          {% if result.completed %}
              Duration: <strong>{{ result.duration }}</strong>
          {% else %}
              <div class="spinner-border" role="status">
                  <span class="visually-hidden">Loading...</span>
              </div>
          {% endif %}
      </p>
      <div role="tabpanel" class="tab-pane active" id="log">
          {% if result.completed %}
              <div class="row">
                  <div class="col col-md-12">
                      <div class="card">
                          <h5 class="card-header">
                              Script Log
                          </h5>
                          <div class="card-body">
                              <table class="table table-hover panel-body">
                                  <tr>
                                      <th>Line</th>
                                      <th>Level</th>
                                      <th>Message</th>
                                  </tr>
                                  {% for log in result.data.log %}
                                      <tr>
                                          <td>{{ forloop.counter }}</td>
                                          <td>{% log_level log.status %}</td>
                                          <td class="rendered-markdown">{{ log.message|render_markdown }}</td>
                                      </tr>
                                  {% empty %}
                                      <tr>
                                          <td colspan="3" class="text-center text-muted">
                                              No log output
                                          </td>
                                      </tr>
                                  {% endfor %}
                              </table>
                          </div>
                          {% if execution_time %}
                              <div class="card-footer text-end text-muted">
                                  <small>Exec Time: {{ execution_time|floatformat:3 }}s</small>
                              </div>
                          {% endif %}
                      </div>
                  </div>
              </div>
          {% else %}
              <div class="row">
                  <div class="col col-md-12">
                      <div class="well">Pending Results</div>
                  </div>
              </div>
          {% endif %}
      </div>
      <div role="tabpanel" class="tab-pane" id="output">
          <pre class="block">{{ result.data.output }}</pre>
      </div>
      <div role="tabpanel" class="tab-pane" id="source">
          <p><code>{{ script.filename }}</code></p>
          <pre class="block">{{ script.source }}</pre>
      </div>
  </div>
{% endblock content-wrapper %}

{% block data %}
<span data-job-url="{% url 'extras-api:jobresult-detail' pk=result.pk %}"></span>
<span data-job-complete="{{ result.completed }}"></span>
{% endblock %}