Make example on send look more like a spreadsheet

Now that the example on the breaking changes page looks more like a spreadsheet,
we should do the same thing for the downloadable example on the send page.

app/main/views/send.py

@@ -1,5 +1,7 @@
 import json
 import itertools
+from string import ascii_uppercase
+
 from contextlib import suppress
 from zipfile import BadZipFile
 from xlrd.biffh import XLRDError
@@ -127,8 +129,11 @@ def send_messages(service_id, template_id):
     return render_template(
         'views/send.html',
         template=template,
-        recipient_column=first_column_heading[template.template_type],
-        example=[get_example_csv_rows(template)],
+        column_headings=list(ascii_uppercase[:len(template.placeholders) + 1]),
+        example=[
+            [first_column_heading[template.template_type]] + list(template.placeholders),
+            get_example_csv_rows(template)
+        ],
         form=form
     )
 

app/main/views/templates.py

@@ -1,4 +1,4 @@
-import string
+from string import ascii_uppercase
 
 from flask import request, render_template, redirect, url_for, flash, abort, session
 from flask_login import login_required
@@ -127,7 +127,7 @@ def edit_service_template(service_id, template_id):
                 'views/templates/breaking-change.html',
                 template_change=template_change,
                 new_template=new_template,
-                column_headings=list(string.ascii_uppercase[:len(new_template.placeholders) + 1]),
+                column_headings=list(ascii_uppercase[:len(new_template.placeholders) + 1]),
                 example_rows=[
                     [first_column_heading[new_template.template_type]] + list(new_template.placeholders),
                     get_example_csv_rows(new_template),

app/templates/views/send.html

@@ -63,20 +63,19 @@
       <h2 class="heading-small">
         Example file
       </h2>
-
-      {% call(item, row_number) list_table(
-        example,
-        caption="Example",
-        caption_visible=False,
-        field_headings=['1'] + [
-          '<span class="placeholder">{}</span>'.format(recipient_column)|safe
-        ] + template.placeholders_as_markup|list
-      ) %}
-        {{ index_field(row_number) }}
-        {% for column in item %}
-          {{ text_field(column) }}
-        {% endfor %}
-      {% endcall %}
+      <div class="spreadsheet">
+        {% call(item, row_number) list_table(
+          example,
+          caption="Example",
+          caption_visible=False,
+          field_headings=[''] + column_headings
+        ) %}
+          {{ index_field(row_number - 1) }}
+          {% for column in item %}
+            {{ text_field(column) }}
+          {% endfor %}
+        {% endcall %}
+      </div>
       <p class="table-show-more-link">
         <a href="{{ url_for('.get_example_csv', service_id=current_service.id, template_id=template.id) }}">Download this example</a>
       </p>