Add big number component…

…and count the messages to display some totals

app/templates/components/big-number.html

@@ -0,0 +1,6 @@
+{% macro big_number(number, label) %}
+  <div class="big-number">
+    {{ number }}
+    <span class="big-number-label">{{ label }}</span>
+  </div>
+{% endmacro %}

app/templates/components/table.html

@@ -1,6 +1,6 @@
-{% macro table(items, caption='', field_headings='', field_headings_visible=True) -%}
+{% macro table(items, caption='', field_headings='', field_headings_visible=True, caption_visible=True) -%}
   <table class="table">
-    <caption class="heading-medium table-heading">
+    <caption class="heading-medium table-heading{{ ' visuallyhidden' if not caption_visible}}">
       {{ caption }}
     </caption>
     <thead class="table-field-headings{% if field_headings_visible %}-visible{% endif %}">

app/templates/views/job.html

@@ -11,21 +11,33 @@ GOV.UK Notify | Notifications activity
 			{{ uploaded_file_name }} sent with {{ template_used }}
 		</h1>
 
-		<p>
-	    {{ counts.total }} text messages
-		</p>
+		<ul class="grid-row job-totals">
+			<li class="column-one-third">
+				{{ big_number(
+					counts.total,
+					'text message' if 1 == counts.total else 'text messages'
+				)}}
+			</li>
+			<li class="column-one-third">
+				{{ big_number(
+					counts.failed,
+					'failed delivery' if 1 == counts.failed else 'failed deliveries'
+				)}}
+			</li>
+			<li class="column-one-third">
+				{{ big_number(
+					cost, 'total cost'
+				)}}
+			</li>
+		</ul>
 
-		<p>
-	    {{ counts.failed }} failed deliveries
-		</p>
-
-		<p>
-	    {{ cost }} total cost
-		</p>
+    <p>
+      You uploaded contact-demo.csv today at 13:42
+    </p>
 
     {% call(item) table(
       messages,
-      caption='',
+      caption='Messages',
       caption_visible=False,
       field_headings=[
         'To',