{% 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="font-heading-lg margin-bottom-3">
    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="font-heading-md">
        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 %}
      <div class="usa-accordion api-notifications-item">
        <h3 class="usa-accordion__heading">
          <button
            type="button"
            class="usa-accordion__button api-notifications-item__heading"
            aria-expanded="false"
            aria-controls="notification-accordion-{{ notification.id }}"
          >
            <span>
              {{ 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 datetime="{{ notification.created_at }}">
                  {{ notification.created_at|format_delta }}
                </time>
              </span>
            </span>
          </button>
        </h3>
        <div id="notification-accordion-{{ notification.id }}" class="usa-accordion__content api-notifications-item__data" hidden>
          <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>
      </div>
    {% 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 %}