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

{% block service_page_title %}
  API keys
{% endblock %}

{% block maincolumn_content %}

  {{ page_header(
    'API keys',
    back_link=url_for('main.api_integration', service_id=current_service.id)
  ) }}

  <div class="body-copy-table">
    {% call(item, row_number) list_table(
      current_service.api_keys,
      empty_message="You have not 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 }}
          <div class="hint">
            {% if item.key_type == 'normal' %}
              Live – sends to anyone
            {% elif item.key_type == 'team' %}
              Team and whitelist – limits who you can send to
            {% elif item.key_type == 'test' %}
              Test – pretends to send messages
            {% endif %}
          </div>
        </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 %}
  </div>

  <div class="js-stick-at-bottom-when-scrolling">
    <a href="{{ url_for('.create_api_key', service_id=current_service.id) }}" class="button-secondary">Create an API key</a>
  </div>

{% endblock %}