{% 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/page-footer.html" import page_footer %}

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

{% block maincolumn_content %}

  <div class="grid-row">
    <div class="column-two-thirds">
      <h1 class="heading-large">
        API keys
      </h1>
    </div>
    <div class="column-one-third">
      <a href="{{ url_for('.create_api_key', service_id=current_service.id) }}" class="button align-with-heading">Create an API key</a>
    </div>
  </div>
  {% call(item, row_number) list_table(
    keys,
    empty_message="You haven’t created any API keys yet",
    caption="API keys",
    caption_visible=false,
    field_headings=[
      'API keys',
      'Action'
    ],
    field_headings_visible=False
  ) %}
    {% call field() %}
      <div class="file-list">
        {{ item.name }}
        <span class="file-list-hint">
          {% if item.key_type == 'normal' %}
            <span class="visually-hidden">Normal</span>
          {% elif item.key_type == 'team' %}
            Sends to anyone on your whitelist
          {% elif item.key_type == 'test' %}
            Pretends to send messages
          {% endif %}
        </span>
      </div>
    {% endcall %}
    {% if item.expiry_date %}
      {% call field(align='right') %}
        <span class='hint'>Revoked {{ item.expiry_date|format_datetime_short }}</span>
      {% endcall %}
    {% else %}
      {% call field(align='right', status='error') %}
        <a href='{{ url_for('.revoke_api_key', service_id=current_service.id, key_id=item.id) }}'>Revoke</a>
      {% endcall %}
    {% endif %}
  {% endcall %}

  {{ page_footer(
    secondary_link=url_for('.api_integration', service_id=current_service.id),
    secondary_link_text='Back to API integration'
  ) }}

{% endblock %}