{% extends "base.html" %}
{% block body %}
{% include "partials/playbook_card.html" %}
{% load datetime_formatting %}

<div class="pf-c-card" style="margin: 1em 0;">
    <div class="pf-c-card__body">
        <details id="records">
            <summary>Records</summary>
            {% if records %}
            <ul class="pf-c-list">
                {% for record in records %}
                <li><a href="../records/{{ record.id }}.html">{{ record.key }}</a></li>
                {% endfor %}
            </ul>
            {% else %}
            No records have been saved with <a href="https://ara.readthedocs.io/en/latest/ara-record.html" target="_blank">ara_record</a> for this playbook.
            {% endif %}
        </details>
        <details id="files">
            <summary>Files</summary>
            <ul class="pf-c-list">
                {% for file in files %}
                <li><a href="../files/{{ file.id }}.html">{{ file.path }}</a></li>
                {% endfor %}
            </ul>
        </details>
        <details id="hosts" {% if not request.GET %}open="true"{% endif %}>
            <summary><i class="fas fa-server"></i> Hosts</summary>
            <table class="pf-c-table pf-m-grid-md pf-m-compact" role="grid" id="host-table">
                <thead>
                    <tr role="row">
                        <th role="columnheader" scope="col" class="pf-m-fit-content">Facts</th>
                        <th role="columnheader" scope="col" class="pf-m-fit-content">Host</th>
                        <th role="columnheader" scope="col" class="pf-m-fit-content">
                            <div class="pf-c-alert pf-m-warning pf-m-inline pf-m-fit-content">
                                <div class="pf-c-alert__icon" title="Tasks completed with changes">
                                    <i class="fas fa-sync-alt" aria-hidden="true"></i>
                                    <p>&nbsp;CHANGED</p>
                                </div>
                            </div>
                        </th>
                        <th role="columnheader" scope="col" class="pf-m-fit-content">
                            <div class="pf-c-alert pf-m-danger pf-m-inline pf-m-fit-content">
                                <div class="pf-c-alert__icon" title="Tasks completed with errors">
                                    <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
                                    <p>&nbsp;FAILED</p>
                                </div>
                            </div>
                        </th>
                        <th role="columnheader" scope="col" class="pf-m-fit-content">
                            <div class="pf-c-alert pf-m-success pf-m-inline pf-m-fit-content">
                                <div class="pf-c-alert__icon" title="Tasks completed successfully">
                                    <i class="fas fa-check-circle" aria-hidden="true"></i>
                                    <p>&nbsp;OK</p>
                                </div>
                            </div>
                        </th>
                        <th role="columnheader" scope="col" class="pf-m-fit-content">
                            <div class="pf-c-alert pf-m-inline pf-m-fit-content">
                                <div class="pf-c-alert__icon" title="Tasks was skipped">
                                    <i class="fas fa-forward" aria-hidden="true"></i>
                                    <p>&nbsp;SKIPPED</p>
                                </div>
                            </div>
                        </th>
                        <th role="columnheader" scope="col" class="pf-m-fit-content">
                            <div class="pf-c-alert pf-m-danger pf-m-inline pf-m-fit-content">
                                <div class="pf-c-alert__icon" title="Tasks completed with errors">
                                    <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
                                    <p>&nbsp;UNREACHABLE</p>
                                </div>
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {% for host in hosts %}
                    <tr>
                        <td role="cell" data-label="Host Facts" class="pf-m-fit-content">
                            <a href="../hosts/{{ host.id }}.html" title="Host facts for {{ host.name }}">
                                <i class="fas fa-external-link-alt"></i>
                            </a>
                        </td>
                        <td role="cell" data-label="Hostname" class="pf-m-fit-content">
                            {% if static_generation %}
                            {{ host.name }}
                            {% else %}
                            <a href="{% url 'ui:playbook' playbook.id %}?host={{ host.id }}#results" title="Search results for {{ host.name }}">
                                {{ host.name }}
                            </a>
                            {% endif %}
                        </td>
                        <td role="cell" data-label="Changed" class="pf-m-fit-content">
                            {% if static_generation or host.changed == 0 %}
                            {{ host.changed }}
                            {% else %}
                            <a href="{% url 'ui:playbook' playbook.id %}?host={{ host.id }}&changed=True#results" title="Search changed results for {{ host.name }}">
                                <strong>{{ host.changed }}</strong>
                            </a>
                            {% endif %}
                        </td>
                        <td role="cell" data-label="Failed" class="pf-m-fit-content">
                            {% if static_generation or host.failed == 0 %}
                            {{ host.failed }}
                            {% else %}
                            <a href="{% url 'ui:playbook' playbook.id %}?host={{ host.id }}&status=failed#results" title="Search failed results for {{ host.name }}">
                                <strong>{{ host.failed }}</strong>
                            </a>
                            {% endif %}
                        </td>
                        <td role="cell" data-label="Ok" class="pf-m-fit-content">
                            {% if static_generation or host.ok == 0 %}
                            {{ host.ok }}
                            {% else %}
                            <a href="{% url 'ui:playbook' playbook.id %}?host={{ host.id }}&status=ok#results" title="Search ok results for {{ host.name }}">
                                <strong>{{ host.ok }}</strong>
                            </a>
                            {% endif %}
                        </td>
                        <td role="cell" data-label="Skipped" class="pf-m-fit-content">
                            {% if static_generation or host.skipped == 0 %}
                            {{ host.skipped }}
                            {% else %}
                            <a href="{% url 'ui:playbook' playbook.id %}?host={{ host.id }}&status=skipped#results" title="Search skipped results for {{ host.name }}">
                                <strong>{{ host.skipped }}</strong>
                            </a>
                            {% endif %}
                        </td>
                        <td role="cell" data-label="Unreachable" class="pf-m-fit-content">
                            {% if static_generation or host.unreachable == 0 %}
                            {{ host.unreachable }}
                            {% else %}
                            <a href="{% url 'ui:playbook' playbook.id %}?host={{ host.id }}&status=unreachable#results" title="Search unreachable results for {{ host.name }}">
                                <strong>{{ host.unreachable }}</strong>
                            </a>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </details>
        <details id="results" open="true">
            <summary>Task results</summary>
            {% if not static_generation %}
            <form method="get" action="{% url 'ui:playbook' playbook.id %}#results" class="pf-c-form">
            <div class="pf-l-flex">
                <div class="pf-l-flex">
                    <div class="pf-c-form__group pf-m-inline">
                        <div class="pf-l-flex__item pf-m-flex-1" for="{{ search_form.host.id_for_label }}">
                            <label class="pf-c-form__label" for="{{ search_form.host.id_for_label }}">
                                <span class="pf-c-form__label-text">Host id</span>
                            </label>
                            <div class="pf-c-form__horizontal-group">
                                <input class="pf-c-form-control" type="text" id="host" name="host" value="{{ search_form.host.value | default_if_none:'' }}" />
                            </div>
                        </div>
                        <div class="pf-l-flex__item pf-m-flex-1" for="{{ search_form.task.id_for_label }}">
                            <label class="pf-c-form__label" for="{{ search_form.task.id_for_label }}">
                                <span class="pf-c-form__label-text">Task id</span>
                            </label>
                            <div class="pf-c-form__horizontal-group">
                                <input class="pf-c-form-control" type="text" id="task" name="task" value="{{ search_form.task.value | default_if_none:'' }}" />
                            </div>
                        </div>
                        <div class="pf-l-flex__item">
                            <div class="pf-c-form__group">
                                <label class="pf-c-form__label" for="status">
                                    <span class="pf-c-form__label-text">Status</span>
                                </label>
                                <div class="pf-c-form__group pf-m-inline">
                                    <fieldset class="pf-c-form__fieldset" aria-labelledby="select-checkbox-expanded-label">
                                    {% for value, text in search_form.status.field.choices %}
                                    {% if value != "unknown" %}
                                        <label class="pf-c-check pf-c-select__menu-item" for="{{ value }}">
                                            {% if value in search_form.status.data %}
                                            <input class="pf-c-check__input" type="checkbox" id="{{ value }}" name="status" value="{{ value }}" checked />
                                            {% else %}
                                            <input class="pf-c-check__input" type="checkbox" id="{{ value }}" name="status" value="{{ value }}" />
                                            {% endif %}
                                            <span class="pf-c-check__label">{{ value }}</span>
                                        </label>
                                    {% endif %}
                                    {% endfor %}
                                    </fieldset>
                                </div>
                            </div>
                        </div>
                        <div class="pf-l-flex__item">
                            <div class="pf-c-form__group">
                               <label class="pf-c-form__label" for="changed">
                                    <span class="pf-c-form__label-text">changed</span>
                                </label>
                                <div class="pf-c-form__group pf-m-inline">
                                    <fieldset class="pf-c-form__fieldset" aria-labelledby="select-checkbox-expanded-label">
                                    <label class="pf-c-check pf-c-select__menu-item" for="changed">
                                        <input class="pf-c-check__input" type="checkbox" id="changed" name="changed" value=True {% if search_form.changed.value %}checked{% endif %} />
                                        <span class="pf-c-check__label">True</span>
                                    </label>
                                    </fieldset>
                                </div>
                            </div>
                        </div>
                        <div class="pf-l-flex__item">
                            <div class="pf-c-form__actions">
                                <button class="pf-c-button pf-m-primary" type="submit"><i class="fas fa-search"></i> Search</button>
                            </div>
                        </div>
                        {% if request.GET %}
                        <div class="pf-l-flex__item">
                            <div class="pf-c-form__actions">
                                <a href="{% url 'ui:playbook' playbook.id %}#results">
                                    <button class="pf-c-button pf-m-plain pf-m-link" type="button" aria-label="Remove">
                                        <i class="fas fa-times" aria-hidden="true"></i> Clear filters
                                    </button>
                                </a>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% include "partials/pagination.html" with data=results %}
            {% endif %}
            {% if results.count %}
            <table class="pf-c-table pf-m-grid-md pf-m-compact" role="grid" id="result-table">
                <thead>
                    <tr role="row">
                        <th role="columnheader" scope="col" class="pf-m-fit-content">Status</th>
                        <th role="columnheader" scope="col">Host</th>
                        <th role="columnheader" scope="col">Task</th>
                        <th role="columnheader" scope="col">Action</th>
                        <th role="columnheader" scope="col" class="pf-m-fit-content pf-c-table__sort">
                            {% include "partials/sort_by_duration.html" %}
                        </th>
                        <th role="columnheader" scope="col" class="pf-m-fit-content pf-c-table__sort">
                            {% include "partials/sort_by_date.html" %}
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {% for result in results.results %}
                    <tr role="row">
                        <td role="cell" data-label="Status" class="pf-c-table__icon pf-m-fit-content">
                            {% include "partials/result_status_icon.html" with status=result.status %}
                        </td>
                        <td role="cell" data-label="Host" class="pf-m-fit-content">
                            {{ result.host.name }}
                        </td>
                        <td role="cell" data-label="Name" class="pf-m-fit-content">
                            <a href="../results/{{ result.id }}.html">{{ result.task.name }}</a>
                        </td>
                        <td role="cell" data-label="Action" class="pf-m-fit-content">
                            <a href="../files/{{ result.task.file }}.html#line-{{ result.task.lineno }}">{{ result.task.action }}</a>
                        </td>
                        <td role="cell" data-label="Duration" class="pf-m-fit-content">
                            {{ result.duration | format_duration }}
                        </td>
                        <td role="cell" data-label="Date" class="pf-m-fit-content">
                            {{ result.started | format_date }}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
                {% if request.GET %}
                    No task results have been found for this query: <a href="{% url 'ui:playbook' playbook.id %}#results">clear filters</a>
                {% else %}
                    No task results have been recorded for this playbook yet. It may be in progress or has been interrupted.
                {% endif %}
            {% endif %}
            {% if not static_generation %}
            </form>
            {% endif %}
        </details>
    </div>
</div>
{% endblock %}
