Add a prototype email template

If the templates page contains text messages and emails then there’s two ways it
could be structured:
- into two sections, all text messages first, then all emails
- emails and text messages interleaved, sorted by date

I think the second one is better. Imagine a situation where you mostly do emails
but have a few text messages. You’d have to scroll past the text messages to get
to your emails. Every time.

I reckon that the most commonly accessed templates will be the most recent ones.

app/templates/components/email-message.html

@@ -0,0 +1,19 @@
+{% macro email_message(subject, body, name=None, edit_link=None) %}
+  {% if name %}
+    <h3 class="email-message-name">
+      {% if edit_link %}
+        <a href="{{ edit_link }}">{{ name }}</a>
+      {% else %}
+        {{ name }}
+      {% endif %}
+    </h3>
+  {% endif %}
+  <div class="email-message">
+    <div class="email-message-subject">
+      {{ subject|placeholders }}
+    </div>
+    <div class="email-message-body">
+      {{ body|nl2br|placeholders }}
+    </div>
+  </div>
+{% endmacro %}

app/templates/components/sms-message.html

@@ -1,9 +1,10 @@
 {% macro sms_message(body, recipient=None, name=None, edit_link=None) %}
   {% if name %}
     <h3 class="sms-message-name">
-      {{ name }}
       {% if edit_link %}
-        <a href="{{ edit_link }}">Edit</a>
+        <a href="{{ edit_link }}">{{ name }}</a>
+      {% else %}
+        {{ name }}
       {% endif %}
     </h3>
   {% endif %}

app/templates/main_nav.html

@@ -6,7 +6,7 @@
     <li><a href="{{ url_for('.sendsms', service_id=123) }}">Send text messages</a></li>
     <li><a href="{{ url_for('.sendemail', service_id=123) }}">Send emails</a></li>
     <li><a href="{{ url_for('.showjobs', service_id=123) }}">Activity</a></li>
-    <li><a href="{{ url_for('.manage_templates', service_id=123) }}">Manage templates</a></li>
+    <li><a href="{{ url_for('.manage_templates', service_id=123) }}">Templates</a></li>
   </ul>
   <ul>
     <li><a href="{{ url_for('.apikeys', service_id=123) }}">API keys and documentation</a></li>

app/templates/views/edit-template.html

@@ -15,8 +15,8 @@ GOV.UK Notify | Edit template
 			{{ textbox(form.template_body, highlight_tags=True) }}
 			{{ page_footer(
 				'Save and continue',
-				back_link=url_for('.dashboard', service_id=service_id),
-				back_link_text='Back to manage templates'
+				back_link=url_for('.manage_templates', service_id=service_id),
+				back_link_text='Back to templates'
 			) }}
 		</form>
 

app/templates/views/manage-templates.html

@@ -1,5 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/sms-message.html" import sms_message %}
+{% from "components/email-message.html" import email_message %}
+{% from "components/browse-list.html" import browse_list %}
 
 {% block page_title %}
 GOV.UK Notify | Manage templates
@@ -7,28 +9,41 @@ GOV.UK Notify | Manage templates
 
 {% block maincolumn_content %}
 
-
-    <h1 class="heading-xlarge">Manage templates</h1>
-
-    <h2 class="heading-medium">SMS templates</h2>
-
     <div class="grid-row">
       <div class="column-two-thirds">
 
-        {% for template in sms_templates %}
-          {{ sms_message(
-            template.body,
-            name=template.name,
-            edit_link=url_for('.edit_template', service_id=service_id, template_id=1)
-          ) }}
+        <h1 class="heading-xlarge">Templates</h1>
+
+        {% for template in templates %}
+          {% if template.type == 'sms' %}
+            {{ sms_message(
+              template.body,
+              name=template.name,
+              edit_link=url_for('.edit_template', service_id=service_id, template_id=loop.index)
+            ) }}
+          {% elif template.type == 'email' %}
+            {{ email_message(
+              template.subject,
+              template.body,
+              name=template.name,
+              edit_link=url_for('.edit_template', service_id=service_id, template_id=loop.index)
+            ) }}
+          {% endif %}
         {% endfor %}
 
       </div>
+      <div class="column-one-third">
+        {{ browse_list([
+          {
+            'title': 'New text message template',
+            'link': url_for('.add_template', service_id=service_id)
+          },
+          {
+            'title': 'New email template',
+            'link': url_for('.add_template', service_id=service_id)
+          }
+        ]) }}
+      </div>
     </div>
 
-    <p>
-      <a class="button" href="{{ url_for('.add_template', service_id=service_id) }}" role="button">Add a new message template</a>
-    </p>
-
-
 {% endblock %}