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

{% block page_title %}
  API integration – GOV.UK Notify
{% endblock %}

{% block maincolumn_content %}

  <h1 class="heading-large bottom-gutter">
    API integration
  </h1>

  <nav class="grid-row bottom-gutter-1-2">
    <div class="column-one-third">
      <a class="pill-separate-item" href="{{ url_for('.api_keys', service_id=current_service.id) }}">API keys</a>
    </div>
    <div class="column-one-third">
      <a class="pill-separate-item" href="{{ url_for('.whitelist', service_id=current_service.id) }}">Whitelist</a>
    </div>
    <div class="column-one-third">
      <a class="pill-separate-item" href="{{ url_for('.api_documentation', service_id=current_service.id) }}">Documentation</a>
    </div>
  </nav>

  <div class="grid-row">
    <div class="column-half">
      <h2 class="heading-medium">
        Message log
      </h2>
    </div>
    <div class="column-half align-with-heading-copy-right">
      <a 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">
        <summary class="api-notifications-item-title">
          <h3 class="api-notifications-item-recipient">
            {{ notification.to }}
          </h3>
          <span class="grid-row api-notifications-item-meta">
            <span class="column-half api-notifications-item-key">
              {{notification.key_name}}
            </span>
            <span class="column-half api-notifications-item-time">
              <time class="timeago" datetime="{{ notification.created_at }}">
                {{ notification.created_at|format_delta }}
              </time>
            </span>
          </span>
        </summary>
        <div>
          <dl id="notification-{{ notification.id }}" class="api-notifications-item-data bottom-gutter-1-2">
            {% for key in [
              'id', 'notification_type', 'created_at', 'updated_at', 'sent_at', 'status'
            ] %}
              <dt>{{ key }}:</dt>
              <dd class="api-notifications-item-data-item">{{ notification[key] }}</dd>
            {% endfor %}
          </dl>
        </div>
      </details>
    {% endfor %}
    {% if api_notifications.notifications %}
      <div class="api-notifications-item">
        {% if api_notifications.links %}
          <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 %}