Show one field at a time on send yourself a test

The send yourself a test feature is useful for two things:
- constructing an email/text message/letter without uploading a CSV file
- seeing what the thing your going to send will look like (either by
  getting it in your inbox or downloading the PDF)
- learning the concept of placeholders, ie understanding they’re thing
  that gets populated with _stuff_

The problem we’re seeing is that the current UI breaks when a template
has a lot of placeholders. This is especially apparent with letter
templates, which have a minimum of 7 placeholders by virtue of the
address.

The idea behind having the form fields side-by-side was to help people
understand the relationship between their spreadsheet columns and the
placeholders. But this means that the page was doing a lot of work,
trying to teach:
- replacement of placeholders
- link between placeholders and spreadsheet columns

The latter is better explained by the example spreadsheet shown on the
upload page. So it can safely be removed from the send yourself a test
page – in other words the fields don’t need to be shown side by side.

Showing them one-at-a-time works well because:
- it’s really obvious, even on first use, what the page is asking you to
  do
- as your step through each placeholder, you see the message build up
  with the data you’ve entered – you’re learning how replacement of
  placeholders works by repetition

This also means adding a matching endpoint for viewing each step of
making the test letter as a PDF/PNG because we can’t reuse the view of
the template without any placeholders filled any more.

app/templates/views/send-test.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/file-upload.html" import file_upload %}
+{% from "components/textbox.html" import textbox %}
 {% from "components/table.html" import list_table, field, text_field, index_field, index_field_heading %}
 
 {% block service_page_title %}
@@ -28,26 +29,11 @@
   {{ template|string }}
 
   <form method="post">
-    {% call(item, row_number) list_table(
-      example,
-      caption="Fill in the {}".format('field' if (recipient_columns + template.placeholders|list)|length == 2 else 'fields'),
-      field_headings=recipient_columns + template.placeholders|list
-    ) %}
-      {% for column in item %}
-        {% call field() %}
-          {% if loop.index > 1 or template.template_type == 'letter' %}
-            <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("Preview", back_link=(
-      url_for('.send_messages', service_id=current_service.id, template_id=template.id)) if not help else None
+    {{ textbox(
+      form.placeholder_value,
+      hint='Optional' if optional_placeholder else None
     ) }}
+    {{ page_footer('Next', back_link=back_link) }}
   </form>
 
 {% endblock %}