{% extends "base/layout.html" %}
{% block head %}
{% endblock head %}
{% block header %}
  <div class="page-header m-0">
    {{ block.super }}
    {% block page-header %}
      <div class="container-fluid mt-2 d-print-none">
        <div class="d-flex justify-content-between">
          {# Title #}
          <div>
            <h2 class="page-title my-1">Health Checks</h2>
            {% block subtitle %}
            {% endblock subtitle %}
          </div>
          {# Controls #}
          <div class="d-print-none">
            {% block controls %}
              <div class="btn-list">
                {% block control-buttons %}
                {% endblock control-buttons %}
              </div>
            {% endblock controls %}
          </div>
        </div>
      </div>
    {% endblock page-header %}
    {# Tabs #}
    <div class="page-tabs mt-3">
      <div class="container-fluid">
        <ul class="nav nav-tabs px-3">
          <li class="nav-item" role="presentation">
            <button class="nav-link active"
                    id="object-list-tab"
                    data-bs-toggle="tab"
                    data-bs-target="#object-list"
                    type="button"
                    role="tab"
                    aria-controls="object-list"
                    aria-selected="true">Results {% badge results|length %}</button>
          </li>
        </ul>
      </div>
    </div>
  </div>
{% endblock header %}
{% block content %}
  <div class="tab-content">
    {# Object list #}
    <div class="tab-pane show active"
         id="object-list"
         role="tabpanel"
         aria-labelledby="object-list-tab">
      <div class="col col-md-12">
        <div class="card">
          <h5 class="card-header">NetBox HealthCheck Plugin</h5>
          <table class="table table-striped">
            <thead>
              <tr>
                <th colspan="2">Service</th>
                <th>Status</th>
                <th class="align-right">Time Taken</th>
              </tr>
            </thead>
            <tbody>
              {% for result in results %}
                <tr>
                  <td class="icons">
                    <span aria-hidden="true">
                      {% if result.error %}
                        &#10060;
                      {% else %}
                        &#9989;
                      {% endif %}
                    </span>
                  </td>
                  <td>{{ result.check }}</td>
                  <td>
                    {% if result.error %}
                      {{ result.error|linebreaks }}
                    {% else %}
                      {{ result.check.pretty_status }}
                    {% endif %}
                  </td>
                  <td class="align-right">{{ result.time_taken|floatformat:4 }} seconds</td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
{% endblock content %}