Warn users a template change will break things

When a user adds or removes placeholders in their template we should consider
this a ‘breaking change’ and warn them accordingly.

Implementing this mostly relies on using
https://github.com/alphagov/notifications-utils/pull/37

Temporarily storing the new template until the user confirms that they want to
make the changes in done using hidden fields. This is a bit hacky, but the
complexity of making sessions interact with WTForms was just too much to handle.

This commit also changes the example spreadsheet that we show on this page to
look more like a spreadsheet.

app/templates/views/templates/breaking-change.html

@@ -0,0 +1,72 @@
+{% extends "withnav_template.html" %}
+{% from "components/banner.html" import banner_wrapper %}
+{% from "components/page-footer.html" import page_footer %}
+{% from "components/table.html" import list_table, text_field, index_field, index_field_heading %}
+
+{% macro list_of_placeholders(placeholders, oxford_comma=False) %}
+  {% for placeholder in placeholders %}
+    {% if loop.last and loop.length > 1 %}{% if oxford_comma %},{% endif %} and {% endif %}
+    <span class="placeholder">(({{ placeholder }}))</span>{% if not loop.last and loop.length != 2 %},{% endif %}
+  {% endfor %}
+{% endmacro %}
+
+{% block page_title %}
+  GOV.UK Notify
+{% endblock %}
+
+{% block maincolumn_content %}
+
+  <h1 class="heading-large">Confirm changes</h1>
+
+  <div class="bottom-gutter">
+    {% if template_change.placeholders_removed %}
+      <p>
+        You removed
+        {{ list_of_placeholders(template_change.placeholders_removed) }}
+      </p>
+    {% endif %}
+    {% if template_change.placeholders_added %}
+      <p>
+        You added {{ list_of_placeholders(template_change.placeholders_added) }}
+      </p>
+    {% endif %}
+  </div>
+
+  <p>
+    When you send messages using this template you’ll need
+    {{ new_template.placeholders|length + 1 }} columns of data:
+  </p>
+
+  <div class="spreadsheet">
+    {% call(item, row_number) list_table(
+      example_rows,
+      caption="Example",
+      caption_visible=False,
+      field_headings=[''] + column_headings
+    ) %}
+      {% if 1 == row_number %}
+        {{ index_field('') }}
+      {% else %}
+        {{ index_field(row_number - 1) }}
+      {% endif %}
+      {% for column in item %}
+        {{ text_field(column) }}
+      {% endfor %}
+    {% endcall %}
+  </div>
+
+  <p>Developers, you’ll need to update your API calls</p>
+
+  <form method="post">
+    <input type="hidden" name="name" value="{{ new_template.name }}" />
+    <input type="hidden" name="subject" value="{{ new_template.subject or '' }}" />
+    <input type="hidden" name="template_content" value="{{ new_template.content }}" />
+    <input type="hidden" name="confirm" value="true" />
+    {{ page_footer(
+      'Save changes to template',
+      back_link=url_for(".edit_service_template", service_id=current_service.id, template_id=new_template.id),
+      back_link_text="Back"
+    ) }}
+  </form>
+
+{% endblock %}