{% extends "withnav_template.html" %}
{% from "components/table.html" import list_table, field, hidden_field_heading %}
{% from "components/banner.html" import banner_wrapper %}

{% block service_page_title %}
  API integration
{% endblock %}

{% block maincolumn_content %}

  <h1 class="heading-medium bottom-gutter-3-2">
    API integration
  </h1>

  <nav class="grid-row">
    <div class="grid-col-4">
      <a class="usa-link pill-separate-item"  href="{{ url_for('.api_keys', service_id=current_service.id) }}">API keys</a>
    </div>
    <div class="grid-col-4">
      <a class="usa-link pill-separate-item" href="{{ url_for('.guest_list', service_id=current_service.id) }}">Guest list</a>
    </div>
    <div class="grid-col-4">
      <a class="usa-link pill-separate-item" href="{{ url_for(callbacks_link, service_id=current_service.id) }}">Callbacks</a>
    </div>
  </nav>

  <div class="grid-row">
    <div class="grid-col-6">
      <h2 class="heading-small">
        Message log
      </h2>
    </div>
    <div class="grid-col-6 align-with-heading-copy-right">
      <a class="usa-link" href="{{ url_for('.api_integration', service_id=current_service.id) }}">Refresh</a>
    </div>
  </div>
  <div class="api-notifications">
    {% if not api_notifications.notifications %}
      <div class="api-notifications-item">
        <p class="api-notifications-item__meta">
          When you send messages via the API they’ll appear here.
        </p>
        <p class="api-notifications-item__meta">
          Notify deletes messages after 7 days.
        </p>
      </div>
    {% endif %}
    {% for notification in api_notifications.notifications %}
      <details class="api-notifications-item govuk-details" data-module="govuk-details">
        <summary class="govuk-details__summary govuk-clearfix api-notifications-item__heading">
          <h3>
            <span class="govuk-details__summary-text">
            {{ notification.to }}
            </span>
            <span class="grid-row api-notifications-item__meta">
              <span class="grid-col-6 api-notifications-item__meta-key">
                {{notification.key_name}}
              </span>
              <span class="grid-col-6 api-notifications-item__meta-time">
                <time class="timeago" datetime="{{ notification.created_at }}">
                  {{ notification.created_at|format_delta }}
                </time>
              </span>
            </span>
          </h3>
        </summary>
        <div class="govuk-details__text api-notifications-item__data">
          <dl id="notification-{{ notification.id }}">
            {% for key in [
              'id', 'client_reference', 'notification_type', 'created_at', 'updated_at', 'sent_at', 'status'
            ] %}
              {% if notification[key] %}
                <dt class="api-notifications-item__data-name">{{ key }}:</dt>
                <dd class="api-notifications-item__data-value">{{ notification[key] }}</dd>
              {% endif %}
            {% endfor %}
            <a class="usa-link" href="{{ url_for('.view_notification', service_id=current_service.id, notification_id=notification.id) }}">View {{ 1|message_count_label(notification.template.template_type, suffix='') }}</a>
          </dl>
        </div>
      </details>
    {% endfor %}
    {% if api_notifications.notifications %}
      <div class="api-notifications-item">
        {% if api_notifications.notifications|length == 50 %}
          <p class="api-notifications-item__meta">
            Only showing the first 50 messages.
          </p>
        {% endif %}
        <p class="api-notifications-item__meta">
          Notify deletes messages after 7 days.
        </p>
      </div>
    {% endif %}
  </div>

{% endblock %}