{% extends 'extras/report.html' %}
{% load helpers %}
{% load static %}

{% block title %}{{ report.name }} <span id="pending-result-label">{% include 'extras/inc/job_label.html' with result=result %}</span>{% endblock %}

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

{% block content %}
<div class="row">
    <div class="col col-md-12">
        <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>
        {% if result.completed %}
            <div class="card">
                <h5 class="card-header">
                    Report Methods
                </h5>
                <div class="card-body">
                    <table class="table table-hover">
                        {% for method, data in result.data.items %}
                            <tr>
                                <td><code><a href="#{{ method }}">{{ method }}</a></code></td>
                                <td class="text-end report-stats">
                                    <span class="badge bg-success">{{ data.success }}</span>
                                    <span class="badge bg-info">{{ data.info }}</span>
                                    <span class="badge bg-warning">{{ data.warning }}</span>
                                    <span class="badge bg-danger">{{ data.failure }}</span>
                                </td>
                            </tr>
                        {% endfor %}
                    </table>
                </div>
            </div>
            <div class="card">
                <h5 class="card-header">
                    Report Results
                </h5>
                <div class="card-body">
                    <table class="table table-hover report">
                        <thead>
                            <tr class="table-headings">
                                <th>Time</th>
                                <th>Level</th>
                                <th>Object</th>
                                <th>Message</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for method, data in result.data.items %}
                                <tr>
                                    <th colspan="4" style="font-family: monospace">
                                        <a name="{{ method }}"></a>{{ method }}
                                    </th>
                                </tr>
                                {% for time, level, obj, url, message in data.log %}
                                    <tr class="{% if level == 'failure' %}danger{% elif level %}{{ level }}{% endif %}">
                                        <td>{{ time }}</td>
                                        <td>
                                            <label class="badge bg-{% if level == 'failure' %}danger{% else %}{{ level }}{% endif %}">{{ level|title }}</label>
                                        </td>
                                        <td>
                                            {% if obj and url %}
                                                <a href="{{ url }}">{{ obj }}</a>
                                            {% elif obj %}
                                                {{ obj }}
                                            {% else %}
                                                <span class="muted">&mdash;</span>
                                            {% endif %}
                                        </td>
                                        <td class="rendered-markdown">{{ message|render_markdown }}</td>
                                    </tr>
                                {% endfor %}
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        {% else %}
            <div class="well">Pending results</div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block data %}
<span data-job-id="{{ result.pk }}"></span>
<span data-job-complete="{{ result.completed }}"></span>
{% endblock %}