Add table of recipients

Uses an adapted version of the 'summary table' pattern from Digital Marketplace
frontend toolkit:
http://alphagov.github.io/digitalmarketplace-frontend-toolkit/summary-table.html

app/templates/components/placeholder.html

@@ -0,0 +1,3 @@
+{% macro placeholder(variable) %}
+  <span class='placeholder'>{{variable}}</span>
+{% endmacro %}

app/templates/components/table.html

@@ -0,0 +1,39 @@
+{% macro table(items, caption='', field_headings='', field_headings_visible=True) -%}
+  <table class="table">
+    <caption class="heading-medium table-heading">
+      {{ caption }}
+    </caption>
+    <thead class="table-field-headings{% if field_headings_visible %}-visible{% endif %}">
+      <tr>
+        {% for field_heading in field_headings %}
+          <th scope="col" class="table-field-heading{% if loop.first %}-first{% endif %}">
+            {% if field_headings_visible %}
+              {{ field_heading }}
+            {% else %}
+              <span class="visuallyhidden">{{ field_heading }}</span>
+            {% endif %}
+          </th>
+        {% endfor %}
+      </tr>
+    </thead>
+    <tbody>
+      {% if items %}
+        {% for item in items %}
+          <tr class="table-row">
+            {{ caller(item) }}
+          </tr>
+        {% endfor %}
+      {% else %}
+        <p class="table-no-content">
+          {{ empty_message }}
+        </p>
+      {% endif %}
+    </tbody>
+  </table>
+{%- endmacro %}
+
+{% macro field(first=False, wide=False, action=False) -%}
+  <td class="table-field{% if first %}-first{% endif %}{% if first and wide %}-wider{% endif %}{% if action %}-with-action{% endif %}">
+    <span>{{ caller() }}</span>
+  </td>
+{%- endmacro %}

app/templates/views/check-sms.html

@@ -1,22 +1,37 @@
 {% extends "admin_template.html" %}
 {% from "components/sms-message.html" import sms_message %}
+{% from "components/table.html" import table, field %}
+{% from "components/placeholder.html" import placeholder %}
 
 {% block page_title %}
-GOV.UK Notify | Send text messages
+	GOV.UK Notify | Send text messages
 {% endblock %}
 
 {% block content %}
 
-<div class="grid-row">
-	<div class="column-two-thirds">
-		<h1 class="heading-xlarge">Send text messages</h1>
+	<div class="grid-row">
+		<div class="column-two-thirds">
+			<h1 class="heading-xlarge">Send text messages</h1>
 
-		{{ sms_message(message_template) }}
+			<h2 class="heading-medium">Check and confirm</h2>
+			{{ sms_message(message_template) }}
 
-  	<p>
-	  	<a class="button" href="/jobs/job" role="button">Send {{recipient_count}} text messages</a>
-  	</p>
+	  	<p>
+		  	<a class="button" href="/jobs/job" role="button">Send {{recipients|length}} text messages</a>
+	  	</p>
+		</div>
 	</div>
-</div>
+
+	{% call(item) table(
+		recipients,
+		caption="Preview of the first 3 recipients",
+		field_headings=[
+			'Recipient', placeholder('registration number'), placeholder('date')
+		]
+	) %}
+		{% call field() %}{{item.phone}}{% endcall %}
+		{% call field() %}{{item.registration}}{% endcall %}
+		{% call field() %}{{item.date}}{% endcall %}
+	{% endcall %}
 
 {% endblock %}

app/templates/views/send-sms.html

@@ -23,6 +23,10 @@
 			</div>
 		{% endfor %}
 
+		<p>
+			<a href="#">Create a new template</a>
+		</p>
+
 		<h2 class="heading-medium">2. Add recipients</h2>
 
 		<p>