From 6d3fbb1f51b3ffbed776e3db62536f9fec247adb Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 31 May 2016 14:18:35 +0100
Subject: [PATCH] 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        |  9 +++++++--
 app/main/views/templates.py   |  4 ++--
 app/templates/views/send.html | 27 +++++++++++++--------------
 3 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/app/main/views/send.py b/app/main/views/send.py
index 0bf0f9270..7fba4f432 100644
--- a/app/main/views/send.py
+++ b/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
     )
 
diff --git a/app/main/views/templates.py b/app/main/views/templates.py
index fceec018a..b79a5dc03 100644
--- a/app/main/views/templates.py
+++ b/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),
diff --git a/app/templates/views/send.html b/app/templates/views/send.html
index 1a58de28b..9e1409d56 100644
--- a/app/templates/views/send.html
+++ b/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>