{% 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 %}
          </div>

          {# Controls #}
          <div class="d-print-none">
            {% block controls %}
              <div class="btn-list">
                {% block control-buttons %}{% endblock %}
              </div>
            {% endblock controls %}
          </div>

        </div>
      </div>
    {% endblock %}

    {# 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="edit-form" aria-selected="true">
              Results {% badge table.page.paginator.count %}
            </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>
            <th colspan="2">Service</th>
            <th>Status</th>
            <th class="align-right">Time Taken</th>
          </thead>
          <tbody>
            {% for plugin in plugins %}
              <tr>
                <td class="icons">
                  <span aria-hidden="true">
                    {% if plugin.status %}
                      &#9989;
                    {% else %}
                      &#10060;
                    {% endif %}
                  </span>
                </td>
                <td>{{ plugin.identifier }}</td>
                <td>{{ plugin.pretty_status | linebreaks }}</td>
                <td class="align-right">{{ plugin.time_taken|floatformat:4 }} seconds</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>

      </div>
    </div>

    </div>
  </div>

{% endblock content %}