Make the flow of using templates better

For users who:
- want to send messages from a template
- want to edit templates

For developers:
- who need to get the ID of a template

This commit mainly cleans up the choose template page so there are less
options, and the options that are there are less wordy.

This means:
- moving ‘send yourself a test’ onto the send messages page, and making
  it button
- stripping a lot of stuff out of the ‘send from API’ page, so it’s more
  obvious what the template ID is

app/templates/views/send-from-api.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/email-message.html" import email_message %}
 {% from "components/sms-message.html" import sms_message %}
+{% from "components/api-key.html" import api_key %}
 
 {% block page_title %}
   API integration – GOV.UK Notify
@@ -9,50 +10,32 @@
 {% block maincolumn_content %}
 
   <h1 class="heading-large">
-      API integration
+      API info
   </h1>
 
-  <div class="grid-row">
-    <div class="column-three-quarters">
-
-      {% if 'email' == template.template_type %}
-        {{ email_message(
-          template.subject,
-          template.formatted_as_markup,
-        ) }}
-      {% elif 'sms' == template.template_type %}
+  {% if 'email' == template.template_type %}
+    {{ email_message(
+      template.formatted_subject_as_markup,
+      template.formatted_as_markup,
+    ) }}
+  {% elif 'sms' == template.template_type %}
+    <div class="grid-row">
+      <div class="column-two-thirds">
         {{ sms_message(
           template.formatted_as_markup,
         ) }}
-      {% endif %}
-
-      <p>
-        You can send this message from your existing apps or systems by
-        connecting them to GOV.UK Notify.
-      </p>
-      <p>
-        You’ll need to work with a developer to do this.
-      </p>
-
+      </div>
     </div>
+  {% endif %}
+
+  <div class="bottom-gutter">
+    {{ api_key(template.id, name="Template ID", thing='template ID') }}
   </div>
 
-  <h3 class="heading-small">
-    Example payload for this template
-  </h3>
-  {{payload|syntax_highlight_json}}
-
-  <h3 class="heading-small">
-    Endpoint
-  </h3>
-
-  <div class="highlight" style="background: #f8f8f8">
-    <pre style="line-height: 125%">
-      {{- 'POST https://api.notifications.service.gov.uk/notifications/{}'.format(
-        template.template_type
-      ) -}}
-    </pre>
-  </div>
+  {% if personalisation %}
+    <h2 class="heading-small">Personalisation (all fields are required)</h2>
+    {{ personalisation|syntax_highlight_json }}
+  {% endif %}
 
   <p>
     <br />See the <a href="{{ url_for(".documentation") }}">developer documentation</a> for full details.