{% load datetime_formatting %}
{% load truncatepath %}
{% load static_url %}
{% if playbook.status == "completed" %}
  <div class="card border-success">
{% elif playbook.status == "failed" %}
  <div class="card border-danger">
{% elif playbook.status == "running" %}
  <div class="card border-info">
{% else %}
  <div class="card border-warning">
{% endif %}
<div class="card-header text-center">
  <h4>Playbook: {% if playbook.name is not None %}{{ playbook.name }}: {{ playbook.path }}{% else %}{{ playbook.path }}{% endif %}</h4>
</div>
<div class="card-body text-info" style="max-height:100px;">
  <div class="table-responsive">
    <table class="table table-sm" id="playbook_summary">
      <thead>
      <tr>
        <th class="text-center" title="Status of the playbook run">Status</th>
        <th class="text-center" title="Link to the playbook report">Report</th>
        <th title="Date at which the playbook started">Date</th>
        <th class="text-nowrap" title="Duration of the playbook (HH:MM:SS.ms)">Duration</th>
        <th class="text-center" title="Number of hosts involved in the playbook">Hosts</th>
        <th class="text-center" title="Number of plays involved in the playbook">Plays</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 class="text-center" title="Number of files recorded from the playbook">Files</th>
        <th class="text-center" title="Number of ara_record keys recorded in the playbook">Records</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 class="text-center" title="CLI arguments given to the ansible command">CLI</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td class="text-center">
          {% include "partials/playbook_status_icon.html" with status=playbook.status %}
        </td>
        <td class="text-center">
          {% url 'ui:playbook' playbook.id as playbook_url %}
          <a role="button" class="btn btn-outline-primary btn-link btn-sm" href="{% static_url playbook_url %}{% if playbook.status == 'failed' %}?status=failed&status=unreachable#results{% endif %}">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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>
              <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"></path>
            </svg>
          </a>
        </td>
        <td class="text-nowrap">{{ playbook.started | format_date }}</td>
        <td class="text-nowrap">{{ playbook.duration | format_duration }}</td>
        <td class="text-center">{{ playbook.items.hosts }}</td>
        <td class="text-center">{{ playbook.items.plays }}</td>
        <td class="text-center">{{ playbook.items.tasks }}</td>
        <td class="text-center">{{ playbook.items.results }}</td>
        <td class="text-center">{{ playbook.items.files }}</td>
        <td class="text-center">{{ playbook.items.records }}</td>
        <td class="text-center">{{ playbook.ansible_version }}</td>
        <td class="text-center">{{ playbook.controller }}</td>
        <td class="text-center">
          <button type="button" class="btn btn-outline-secondary btn-link btn-sm" data-toggle="modal" data-target="#cli_{{ playbook.id }}">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-terminal-fill" viewBox="0 0 16 16">
              <path d="M0 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3zm9.5 5.5h-3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zm-6.354-.354a.5.5 0 1 0 .708.708l2-2a.5.5 0 0 0 0-.708l-2-2a.5.5 0 1 0-.708.708L4.793 6.5 3.146 8.146z"/>
            </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-lg">
              <div class="modal-content">
                <div class="modal-header">
                  <h3 class="modal-title">CLI arguments</h3>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <div>
                    <div class="row">
                      <div class="col-md-12">
                        {% if playbook.name is not None %}
                          <h5>{{ playbook.name }} @ {{ playbook.started | format_date }}</h5>
                        {% else %}
                          <h5>{{ playbook.path | truncatepath:50 }} @ {{ playbook.started | format_date }}</h5>
                        {% endif %}
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-12">
                        {% include "partials/cli_arguments.html" with arguments=playbook.arguments %}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</div>
{% if playbook.labels %}
  <div class="card-footer text-center" title="Playbook labels">
    {% for label in playbook.labels %}
      <span class="btn btn-outline-success ara-label" style="cursor:default; user-select: text;">{{ label.name }}</span>
    {% endfor %}
  </div>
{% endif %}
</div>
