{% extends "layout.html" %}
{% block content %}
<div class="row text-center">
    <div class="col-md-12">
        <h2>Playbook run for playbook: <span style="font-style: italic;">"{{ playbook }}"</span></h2>
    </div>
</div>
<br>
<div class="row" style="display: flex; align-items: center;">
    <div class="col-md-1 text-center">
        <h2>Stats</h2>
    </div>
    <div class="col-md-11">
        <table class="table table-striped table-hover table-condensed table-bordered" style="margin: 0 auto !important; float;">
            <thead>
                <tr>
                    <th class="text-center">Host</th>
                    <th class="text-center"><label class="label OK">OK</label></th>
                    <th class="text-center"><label class="label CHANGED">CHANGED</label></th>
                    <th class="text-center"><label class="label SKIPPED">SKIPPED</label></th>
                    <th class="text-center"><label class="label FAILED">FAILED</label></th>
                </tr>
            </thead>
            <tbody>
                {% for row in stats_data %}
                <tr>
                    <td class="text-center">{{ row.host }}</td>
                    <td class="text-center">{{ row.ok }}</td>
                    <td class="text-center">{{ row.changed }}</td>
                    <td class="text-center">{{ row.skipped }}</td>
                    <td class="text-center">{{ row.failures }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<div class="row">
    <h2 class="text-center">Run information</h2>
    <table class="table table-striped table-hover table-condensed table-bordered" style="margin: 0 auto !important; float;">
        <thead>
            <tr>
                <th>Timestamp</th>
                <th class="text-center">Status</th>
                <th>Host</th>
                <th>Play > Task > Module</th>
            </tr>
        </thead>
        <tbody>
            {% for row in task_data %}
            <tr class="task">
                <td id="{{ row.end |datetime }}" style="white-space: nowrap;">
                    <a href="#{{ row.end |datetime }}">{{ row.end |datetime }}</a>
                </td>
                <td class="text-center">
                    <label class="label {{ row |pick_status }}">{{ row |pick_status }}</label><br>
                    {% if row.failed and row.ignore_errors %}
                    <label class="label SKIPPED">IGNORED</label><br>
                    {% endif %}
                    {{ row.duration |truncate(5) }}s
                </td>
                <td><a href="/host/{{ row.host }}">{{ row.host }}</a></td>
                <td style="white-space: nowrap;">
                    <ul>
                        {% if row.play %}
                        <li><strong>Play:</strong> <a href="/play/{{ row.play }}">{{ row.play }}</a></li>
                        {% else %}
                        <li><strong>Play:</strong> <span style="font-style: italic">No name provided</span></li>
                        {% endif %}
                        <ul>
                            {% if row.task %}
                            <li><strong>Task:</strong> <a href="/task/{{ row.task }}">{{ row.task }}</a></li>
                            {% else %}
                            <li><strong>Task:</strong> <span style="font-style: italic">No name provided</span></li>
                            {% endif %}
                            <ul>
                                <li><strong>Module:</strong> {{ row.module }}</li>
                            </ul>
                        </ul>
                    </ul>
                </td>
            </tr>
            <tr class="results" style="display: none;">
                <td colspan="4">{{ row.result |to_nice_json }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}