<!-- Search result table for /api/v1/playbooks -->
{% load datetime_formatting %}
{% load truncatepath %}
{% load static_url %}

<div class="table-responsive">
  <table class="table table-sm table-hover" id="playbooks">
    <thead>
      <tr style="height:50px;">
        <th class="report-column" title="Link to the playbook report">Report</th>
        <th class="short-status-column" title="Status of the playbook run">Status</th>
        <th class="cli-column" title="CLI arguments given to the ansible command">CLI</th>
        <th class="date-column" title="Date at which the playbook started">
          <form action="{% url 'ui:index' %}" method="get">{% include "partials/sort_by_date.html" with arg="started" %}</form>
        </th>
        <th class="duration-column" title="Duration of the playbook (HH:MM:SS.ms)">
          <form action="{% url 'ui:index' %}" method="get">{% include "partials/sort_by_duration.html" %}</form>
        </th>
        <th title="Name (provided by ara_playbook_name) or path to the playbook file">Name (or path)</th>
        <th class="text-center" title="Version of Ansible that ran the playbook">Ansible</th>
        <th class="text-center" title="Host that ran the playbook">Controller</th>
        <th title="User that ran the playbook">User</th>
        <th class="text-center" title="Number of hosts involved in the playbook">Hosts</th>
        <th class="text-center" title="Number of tasks run in the playbook">Tasks</th>
        <th class="text-center" title="Number of results recorded from the playbook">Results</th>
        <th title="Labels applied to the playbook (provided by ara_playbook_labels)">Labels</th>
      </tr>
    </thead>
    <tbody>
    {% for playbook in playbooks %}
      <tr>
        <td class="report-column">
          {% url 'ui:playbook' playbook.id as playbook_url %}
          <a role="button" class="btn btn-outline-primary btn-link btn-sm d-inline-flex justify-content-center align-items-center" href="{% static_url playbook_url %}{% if playbook.status == 'failed' %}?status=failed&status=unreachable#results{% endif %}">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
            <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
          </svg>
          </a>
        </td>

        <td class="short-status-column">
          {% include "partials/playbook_status_icon.html" with status=playbook.status %}
        </td>

        <td class="cli-column">
          <button type="button" class="btn btn-outline-secondary btn-link btn-sm d-inline-flex justify-content-center align-items-center" data-bs-toggle="modal" data-bs-target="#cli_{{ playbook.id }}">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-terminal" viewBox="0 0 16 16">
              <path d="M6 9a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3A.5.5 0 0 1 6 9zM3.854 4.146a.5.5 0 1 0-.708.708L4.793 6.5 3.146 8.146a.5.5 0 1 0 .708.708l2-2a.5.5 0 0 0 0-.708l-2-2z"/>
              <path d="M2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2zm12 1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h12z"/>
            </svg>
          </button>
          <div class="modal fade" id="cli_{{ playbook.id }}" tabindex="-1" aria-labelledby="cli_{{ playbook.id }}" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                  <h1 class="modal-title fs-5" id="aboutModalLabel">Playbook <a href="{% static_url playbook_url %}">#{{ playbook.id }}</a>: CLI Arguments</h1>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" style="text-align:left;">
                  <ul class="list-group list-group-flush">
                    <li class="list-group-item d-flex justify-content-between align-items-start">
                        <div class="ms-2 me-auto">
                          <div class="fw-bold">Date</div>
                          {{ playbook.started | format_date }}
                        </div>
                      </li>
                      <li class="list-group-item d-flex justify-content-between align-items-start">
                        <div class="ms-2 me-auto">
                          <div class="fw-bold">Path</div>
                          {{ playbook.path | truncatepath:250 }}
                        </div>
                      </li>
                  </ul>
                  {% include "partials/cli_arguments.html" with arguments=playbook.arguments %}
                </div>
              </div>
            </div>
          </div>
        </td>

        <td class="date-column">{{ playbook.started | format_date }}</td>
        <td class="duration-column">{{ playbook.duration | format_duration }}</td>

        <td title="{{ playbook.path }}">
          {% if not static_generation %}
            {% if playbook.name is not None %}
              <a href="{% url 'ui:index' %}?name={{ playbook.name }}">{{ playbook.name | truncatechars:50 }}</a>
            {% else %}
              <a href="{% url 'ui:index' %}?path={{ playbook.path }}">{{ playbook.path | truncatepath:50 }}</a>
            {% endif %}
          {% else %}
            {% if playbook.name is not None %}
              {{ playbook.name | truncatechars:50 }}
            {% else %}
              {{ playbook.path | truncatepath:50 }}
            {% endif %}
          {% endif %}
        </td>

        <td class="text-center">
          {% if not static_generation %}
            <a href="{% url 'ui:index' %}?ansible_version={{ playbook.ansible_version }}" title="Search for version {{ playbook.ansible_version }}">{{ playbook.ansible_version }}</a>
          {% else %}
            {{ playbook.ansible_version }}
          {% endif %}
        </td>

        <td class="text-center">
          {% if not static_generation %}
            <a href="{% url 'ui:index' %}?controller={{ playbook.controller }}" title="Search for controller {{ playbook.controller }}">{{ playbook.controller | default_if_none:'' | truncatechars:50 }}</a>
          {% else %}
            {{ playbook.controller | default_if_none:'' | truncatechars:50 }}
          {% endif %}
        </td>

        <td>
        {% if not static_generation %}
          <a href="{% url 'ui:index' %}?user={{ playbook.user }}" title="Search for user {{ playbook.user }}">{{ playbook.user | default_if_none:'' }}</a>
        {% else %}
          {{ playbook.user | default_if_none:'' }}
        {% endif %}
        </td>

        <td class="text-center">
          {% if not static_generation %}
            <a href="{% url 'ui:host_index' %}?playbook={{ playbook.id }}" title="Search for hosts in this playbook">{{ playbook.items.hosts }}</a>
          {% else %}
            {{ playbook.items.hosts }}
          {% endif %}
        </td>

        <td class="text-center">
          {% if not static_generation %}
            <a href="{% url 'ui:task_index' %}?playbook={{ playbook.id }}" title="Search for tasks in this playbook">{{ playbook.items.tasks }}</a>
          {% else %}
            {{ playbook.items.tasks }}
          {% endif %}
        </td>

        <td class="text-center">{{ playbook.items.results }}</td>

        <td class="col-md-2">
          {% for label in playbook.labels %}
            {% if not static_generation %}
              <a href="{% url 'ui:index' %}?label={{ label.name }}" class="btn btn-outline-success ara-label">{{ label.name }}</a>
            {% else %}
              <span class="btn btn-outline-success ara-label">{{ label.name }}</span>
            {% endif %}
          {% endfor %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
