{% extends "base.html" %}
{% load datetime_formatting %}
{% load truncatepath %}
{% block body %}
{% if not static_generation %}
<div class="pf-l-flex">
    <div class="pf-l-flex">
        <form novalidate action="/" method="get" class="pf-c-form">
        <div class="pf-c-form__group pf-m-inline">
            <div class="pf-l-flex__item pf-m-flex-1">
                <label class="pf-c-form__label" for="controller">
                    <span class="pf-c-form__label-text">Controller</span>
                </label>
                <div class="pf-c-form__horizontal-group">
                    <input class="pf-c-form-control" type="text" id="controller" name="controller" value="{% if search_form.controller.value is not null %}{{ search_form.controller.value }}{% endif %}" />
                </div>
            </div>
            <div class="pf-l-flex__item pf-m-flex-1">
                <label class="pf-c-form__label" for="name">
                    <span class="pf-c-form__label-text">Name</span>
                </label>
                <div class="pf-c-form__horizontal-group">
                    <input class="pf-c-form-control" type="text" id="name" name="name" value="{% if search_form.name.value is not null %}{{ search_form.name.value }}{% endif %}" />
                </div>
            </div>
            <div class="pf-l-flex__item pf-m-flex-1">
                <label class="pf-c-form__label" for="path">
                    <span class="pf-c-form__label-text">Path</span>
                </label>
                <div class="pf-c-form__horizontal-group">
                    <input class="pf-c-form-control" type="text" id="path" name="path" value="{% if search_form.path.value is not null %}{{ search_form.path.value }}{% endif %}" />
                </div>
            </div>
            <div class="pf-l-flex__item pf-m-flex-1">
                <div class="pf-c-form__group">
                    <label class="pf-c-form__label" for="label">
                        <span class="pf-c-form__label-text">Label</span>
                    </label>
                    <div class="pf-c-form__horizontal-group">
                        <input class="pf-c-form-control" type="text" id="label" name="label" value="{% if search_form.label.value is not null %}{{ search_form.label.value }}{% endif %}" />
                    </div>
                </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__actions">
                    <button class="pf-c-button pf-m-primary" type="submit"><i class="fas fa-search"></i> Search</button>
                </div>
            </div>
            {% if search_query %}
            <div class="pf-l-flex__item">
                <div class="pf-c-form__actions">
                    <a href="/">
                        <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>
        </form>
    </div>
    <div class="pf-l-flex pf-m-align-right">
        <div class="pf-l-flex__item">
            <h1 class="pf-c-title pf-m-2xl"><i class="fas fa-clock"></i> Filter by date</h1>
            <ul class="pf-c-list pf-m-inline">
                <li><a href="?started_after={% past_timestamp with minutes=60 %}">Last 60 minutes</a></li>
                <li><a href="?started_after={% past_timestamp with hours=24 %}">Last 24 hours</a></li>
                <li><a href="?started_after={% past_timestamp with days=7 %}">Last 7 days</a></li>
                <li><a href="?started_after={% past_timestamp with days=30 %}">Last 30 days</a></li>
            </ul>
        </div>
    </div>
</div>
{% include "partials/pagination.html" %}
{% endif %}

<div class="pf-l-flex">
    <table class="pf-c-table pf-m-grid-md pf-m-compact" role="grid" aria-label="Playbook runs" id="playbooks">
        <thead>
            <tr role="row">
                <th role="columnheader" scope="col" class="pf-m-fit-content">Status</th>
                <th role="columnheader" scope="col" class="pf-m-fit-content pf-c-table__sort">
                    {% include "partials/sort_by_date.html" %}
                </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">Ansible version</th>
                <th role="columnheader" scope="col">Controller</th>
                <th role="columnheader" scope="col">Name (or path)</th>
                <th role="columnheader" scope="col">Labels</th>
                <th role="columnheader" scope="col" class="pf-m-fit-content">Hosts</th>
                <th role="columnheader" scope="col" class="pf-m-fit-content">Plays</th>
                <th role="columnheader" scope="col" class="pf-m-fit-content">Tasks</th>
                <th role="columnheader" scope="col" class="pf-m-fit-content">Results</th>
                <th role="columnheader" scope="col" class="pf-m-fit-content">Files</th>
                <th role="columnheader" scope="col" class="pf-m-fit-content">Records</th>
                <th></th>
            </tr>
        </thead>
        <tbody role="rowgroup">
            {% for playbook in data.results %}
            <tr role="row" class="pf-m-success">
                <td role="cell" data-label="Status" class="pf-c-table__icon pf-m-fit-content">
                    {% if playbook.status == "completed" %}
                    <div class="pf-c-alert pf-m-success pf-m-inline">
                    {% elif playbook.status == "failed" %}
                    <div class="pf-c-alert pf-m-danger pf-m-inline">
                    {% elif playbook.status == "running" %}
                    <div class="pf-c-alert pf-m-info pf-m-inline">
                    {% else %}
                    <div class="pf-c-alert pf-m-warning pf-m-inline">
                    {% endif %}
                        {% include "partials/playbook_status_icon.html" with status=playbook.status %}
                    </div>
                </td>
                <td role="cell" data-label="Date" class="pf-m-fit-content">
                    <span title="Date at which the playbook started">
                        {{ playbook.started | format_date }}
                    </span>
                </td>
                <td role="cell" data-label="Duration" class="pf-m-fit-content">
                    <span title="Duration of the playbook (HH:MM:SS.ms)">
                        {{ playbook.duration | format_duration }}
                    </span>
                </td>
                <td role="cell" data-label="Ansible version" class="pf-m-fit-content">
                    {{ playbook.ansible_version }}
                </td>
                <td role="cell" data-label="Controller" class="pf-m-fit-content">
                    {{ playbook.controller }}
                </td>
                <td role="cell" data-label="Name (or path)" class="pf-m-fit-content">
                    {% if static_generation %}
                        <a href="{% if page != "index" %}../{% endif %}playbooks/{{ playbook.id }}.html" title="{{ playbook.path }}">
                    {% else %}
                        {% if playbook.status == "failed" %}
                            <a href="{% url 'ui:playbook' playbook.id %}?status=failed&status=unreachable#results">
                        {% else %}
                            <a href="{% url 'ui:playbook' playbook.id %}?changed=True#results">
                        {% endif %}
                    {% endif %}
                    {% if playbook.name is not None %}{{ playbook.name }}{% else %}{{ playbook.path | truncatepath:50 }}{% endif %}
                    </a>
                </td>
                <td role="cell" data-label="Labels" class="pf-m-wrap">
                    <div class="pf-l-flex">
                    {% for label in playbook.labels %}
                    {% if not static_generation %}
                    <a class="pf-c-button pf-m-secondary pf-c-label pf-m-compact" title="Search for this label" href="{% if page != 'index' %}../{% endif %}?label={{ label.name }}">
                        {{ label.name }}
                    </a>
                    {% else %}
                    <span class="pf-c-badge pf-m-unread">{{ label.name }}</span>
                    {% endif %}
                    {% endfor %}
                    </div>
                </td>
                <td role="cell" data-label="Hosts" class="pf-m-fit-content">
                    <a href="{% if page != "index" %}../{% endif %}playbooks/{{ playbook.id }}.html#hosts">{{ playbook.items.hosts }}</a>
                </td>
                <td role="cell" data-label="Plays" class="pf-m-fit-content">
                    <a href="{% if page != "index" %}../{% endif %}playbooks/{{ playbook.id }}.html#plays">{{ playbook.items.plays }}</a>
                </td>
                <td role="cell" data-label="Tasks" class="pf-m-fit-content">
                    <a href="{% if page != "index" %}../{% endif %}playbooks/{{ playbook.id }}.html#results">{{ playbook.items.tasks }}</a>
                </td>
                <td role="cell" data-label="Results" class="pf-m-fit-content">
                    <a href="{% if page != "index" %}../{% endif %}playbooks/{{ playbook.id }}.html#results">{{ playbook.items.results }}</a>
                </td>
                <td role="cell" data-label="Files" class="pf-m-fit-content">
                    <a href="{% if page != "index" %}../{% endif %}playbooks/{{ playbook.id }}.html#files">{{ playbook.items.files }}</a>
                </td>
                <td role="cell" data-label="Records" class="pf-m-fit-content">
                    <a href="{% if page != "index" %}../{% endif %}playbooks/{{ playbook.id }}.html#records">{{ playbook.items.records }}</a>
                </td>
                <td role="cell" data-label="CLI arguments">
                    <details id="cli-arguments-details">
                        <summary><a>CLI arguments</a></summary>
                        <table class="pf-c-table pf-m-compact pf-m-grid-md" role="grid" aria-label="cli-arguments" id="cli-arguments">
                            <thead>
                                <tr role="row">
                                    <th role="columnheader" scope="col">Argument</th>
                                    <th role="columnheader" scope="col">Value</th>
                                </tr>
                            </thead>
                            <tbody role="rowgroup">
                                {% for arg, value in playbook.arguments.items %}
                                <tr role="row">
                                    <td role="cell" data-label="Argument" class="pf-m-fit-content" style="white-space: nowrap;">{{ arg }}</td>
                                    <td role="cell" data-label="Value" class="pf-m-fit-content">{{ value }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </details>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% if not static_generation %}
{% include "partials/pagination.html" %}
{% endif %}
{% endblock %}