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

{% block page_title %}
  API keys – 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 new API key</a>
    </div>
  </div>

  <p>
    To connect to the API you need to create an API Key.
  </p>
  <p>
    Each service can have multiple API Keys. This allows you to integrate a
    number of systems, each with its own key. You can also have separate
    keys for your development and test environments.
  </p>

  <p>
    API usage is described in
    <a href="{{ url_for('.documentation', service_id=current_service.id) }}">the
    developer documentation</a>.
  </p>

  {% 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=['Key name', hidden_field_heading('Action')]
  ) %}
    {% call field() %}
      {{ item.name }}
    {% endcall %}
    {% if item.expiry_date %}
      {% call field(align='right', status='default') %}
        Revoked {{ item.expiry_date|format_datetime }}
      {% 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 %}

  {{ api_key(current_service.id, "Service ID", thing="service ID") }}

{% endblock %}