Reorganise templates for API keys page

This adds another layer of folder structure to the templates to match
the new URLs, which have another layer of hierarchy.

app/templates/views/api/keys.html

@@ -0,0 +1,76 @@
+{% 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 integration – GOV.UK Notify
+{% endblock %}
+
+{% block maincolumn_content %}
+
+  <div class="grid-row bottom-gutter-1-2">
+    <div class="column-two-thirds">
+      <h1 class="heading-large">
+        API integration
+      </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',
+      hidden_field_heading('Action')
+    ],
+  ) %}
+    {% 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' %}
+            Only sends to team members
+          {% elif item.key_type == 'test' %}
+            Simulates sending messages
+          {% endif %}
+        </span>
+      </div>
+    {% endcall %}
+    {% if item.expiry_date %}
+      {% call field(align='right') %}
+        Revoked {{ item.expiry_date|format_datetime_short }}
+      {% 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 class="bottom-gutter-2">
+    {{ api_key(current_service.id, "Service ID", thing="service ID") }}
+  </div>
+
+  <h2 class="heading-medium">API clients</h2>
+  <ul class="list list-bullet">
+    {% for name, url in [
+      ('Java', 'https://github.com/alphagov/notifications-java-client'),
+      ('Node JS', 'https://github.com/alphagov/notifications-node-client'),
+      ('PHP', 'https://github.com/alphagov/notifications-php-client'),
+      ('Python', 'https://github.com/alphagov/notifications-python-client'),
+      ('Ruby', 'https://github.com/alphagov/notifications-ruby-client')
+    ] %}
+    <li>
+      <a href="{{ url }}">{{ name }}</a>
+    </li>
+    {% endfor %}
+  </ul>
+
+{% endblock %}