{% extends "credentials/base_cred.html" %}

{% block title %}Canonical Certification{% endblock %}

{% block meta_description %}
  The Canonical Ubuntu Essentials exams certify knowledge and verify skills in general Linux,
  Ubuntu Desktop, and Ubuntu Server topics.
{% endblock meta_description %}

{% block content %}
  <section class="u-fixed-width">
    <table class="p-table--mobile-card" aria-label="Table of Webhook Responses">
      <thead>
        <tr>
          <th>Created At</th>
          <th>ID</th>
          <th>Sent At</th>
          <th>Ability Screen ID</th>
          <th>Response Status</th>
          <th>Transition</th>
        </tr>
      </thead>

      <tbody>
        {% for data in webhook_responses["webhook_responses"] %}
          <tr>
            <th>{{ data.webhook.created_at }}</th>
            <td>{{ data.id }}</td>
            <td>{{ data.sent_at }}</td>
            <td>{{ data.webhook.ability_screen_id }}</td>
            <td>{{ data.response_status }}</td>
            <td>{{ data.webhook.on_transition_to }}</td>
          </tr>
        {% endfor %}

      </tbody>
    </table>

    <nav class="p-pagination" aria-label="Pagination">
      <ol class="p-pagination__items">
        <li class="p-pagination__item">
          <a class="p-pagination__link--previous {% if webhook_responses['meta']['prev_page'] == None %}is-disabled{% endif %}"
             href=" {% if webhook_responses['meta']['prev_page'] %} /credentials/shop/webhook_responses?page={{ webhook_responses['meta']['prev_page'] }} {% else %} # {% endif %} "
             title="Previous page">
            <i class="p-icon--chevron-down"></i>
            <span>Previous page</span>
          </a>
        </li>
        <li class="p-pagination__item">
          <a class="p-pagination__link--next {% if webhook_responses['meta']['next_page'] == None %}is-disabled{% endif %}"
             href=" {% if webhook_responses['meta']['next_page'] %} /credentials/shop/webhook_responses?page={{ webhook_responses['meta']['next_page'] }} {% else %} # {% endif %} "
             title="Next page">
            <span>Next page</span>
            <i class="p-icon--chevron-down"></i>
          </a>
        </li>
      </ol>
    </nav>
  </section>
{% endblock %}