{% extends 'dj_audit/base.html' %}

{% block title %}
Request Status
{% endblock %}

{% block additional_styles %}
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css">
{% endblock %}

{% block page_content %}
<div class="card-group">
  <div class="card  text-white bg-primary mb-3">
    <div class="card-body">
      <h5 class="card-title">{{ total_success }} Successful </h5>
      <!--      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>-->
    </div>
  </div>
  <div class="card  text-white bg-dark mb-3">
    <div class="card-body">
      <h5 class="card-title">{{ total_warning }} Warning </h5>
      <!--      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>-->
    </div>
  </div>
  <div class="card text-white bg-danger mb-3">
    <div class="card-body">
      <h5 class="card-title">{{ total_failed }} Failed </h5>
      <!--      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>-->
    </div>
  </div>
</div>
<div class="page_table mt-5 mb-5">
  <table id="request_status_table" class="table table-bordered">
    <!-- table-striped -->
    <thead>
      <tr>
        <th>S/N</th>
        <th>Api Endpoint</th>
        <th>Successful Requests</th>
        <th>Requests with warnings</th>
        <th>Failed Requests</th>
      </tr>
    </thead>
    <tbody>
      {% for api in api_break_down %}
      <tr>
        <td>{{ forloop.counter }}</td>
        <td>{{ api.path_info }}</td>
        <td>{{ api.no_success }}</td>
        <td>{{ api.no_warning }}</td>
        <td>{{ api.no_failed }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<!-- Pagination begins here -->
{% if api_break_down.has_other_pages %}
<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    {% if api_break_down.has_previous %}
      <li class="page-item">
        <a class="page-link" href="?page={{ api_break_down.previous_page_number }}" tabindex="-1">Previous</a>
      </li>
    {% else %}
      <li class="page-item disabled">
        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
      </li>
    {% endif %}
    <li class="page-item"><a class="page-link">Page {{ api_break_down.number }} of {{ api_break_down.paginator.num_pages }}</a></li>
    {% if api_break_down.has_next %}
      <li class="page-item">
        <a class="page-link" href="?page={{ api_break_down.next_page_number }}">Next</a>
      </li>
    {% else %}
      <li class="page-item disabled">
        <a class="page-link" href="#" aria-disabled="true">Next</a>
      </li>
    {% endif %}
  </ul>
</nav>
{% endif %}
<!-- End of pagination -->

{% endblock %}

{% block additional_scripts %}
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap4.min.js"></script>
<script>
  $(document).ready(function () {
    $('#request_status_table').DataTable({
      "pageLength": 100,
      "lengthChange": false
    });
  });
</script>
{% endblock %}
