Make send a test teach you how placeholders work

This commit does two main things:

- adds textboxes to the send yourself a test page, so you can replace
  ((name)) with ‘Chris’, or whatever your name is
- rejigs the send page a bit to make it clearer what the CSV upload is
  for and how to use it

The idea being that, since most users go into ‘send yourself a test’
first, it teaches them about how placeholders work by making them do the
replacing themselves.

app/templates/views/send-test.html

@@ -0,0 +1,59 @@
+{% extends "withnav_template.html" %}
+{% from "components/sms-message.html" import sms_message %}
+{% from "components/email-message.html" import email_message %}
+{% from "components/page-footer.html" import page_footer %}
+{% from "components/file-upload.html" import file_upload %}
+{% from "components/table.html" import list_table, field, text_field, index_field, index_field_heading %}
+
+{% block page_title %}
+  Send text messages – GOV.UK Notify
+{% endblock %}
+
+{% block maincolumn_content %}
+
+
+  <h1 class="heading-large">Send a test</h1>
+
+  {% if 'sms' == template.template_type %}
+    <div class="grid-row">
+      <div class="column-two-thirds">
+        {{ sms_message(
+          template.formatted_as_markup,
+          recipient='',
+          show_placeholder_for_recipient=True
+        ) }}
+      </div>
+    </div>
+  {% elif 'email' == template.template_type %}
+    {{ email_message(
+      template.formatted_subject_as_markup,
+      template.formatted_as_markup,
+      recipient='',
+      show_placeholder_for_recipient=True
+    ) }}
+  {% endif %}
+
+  <form method="post">
+    {% call(item, row_number) list_table(
+      example,
+      caption="Fill in your {}".format('field' if template.placeholders|length == 1 else 'fields'),
+      field_headings=[
+        '<span class="placeholder">{}</span>'.format(recipient_column)|safe
+      ] + template.placeholders_as_markup|list
+    ) %}
+      {% for column in item %}
+        {% call field() %}
+          {% if loop.index > 1 %}
+            <label class="visuallyhidden" for="placeholder-field-{{ loop.index }}">{{ column }}</label>
+            <input class="form-control form-control-1-1 " data-module="" name="{{ column }}" rows="8" type="text" value="" id="placeholder-field-{{ loop.index }}">
+          {% else %}
+            {{ column }}
+          {% endif %}
+        {% endcall %}
+      {% endfor %}
+    {% endcall %}
+
+    {{ page_footer("Check and confirm", back_link=url_for('.send_messages', service_id=current_service.id, template_id=template.id)) }}
+  </form>
+
+{% endblock %}