Hard code some data in the Python

This commit adds some stubbed data for the pages. The structure of the data
is just a proposal, but it gives the templates something to work with for now.

app/assets/stylesheets/components/placeholder.scss

@@ -0,0 +1,7 @@
+.placeholder {
+  display: inline;
+  background: $light-blue;
+  color: $white;
+  padding: 0 5px;
+  box-shadow: inset 0 0 0 2px $panel-colour;
+}

app/assets/stylesheets/components/sms-message.scss

@@ -0,0 +1,41 @@
+.sms-message {
+
+  position: relative;
+  margin: 0 0 $gutter 0;
+
+  &:before {
+    content: '';
+    position: absolute;
+    z-index: 10;
+    bottom: -12px;
+    right: 5px;
+    width: 20px;
+    height: 25px;
+    border-radius: 100%;
+    background: $panel-colour;
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    z-index: 20;
+    bottom: -15px;
+    right: -5px;
+    border-radius: 100%;
+    width: 20px;
+    height: 20px;
+    background: $white;
+  }
+
+  &-wrapper {
+    box-sizing: border-box;
+    position: relative;
+    z-index: 30;
+    width: 100%;
+    height: 100%;
+    padding: $gutter/2;
+    background: $panel-colour;
+    border-radius: 5px;
+  }
+
+}

app/main/views/index.py

@@ -43,12 +43,37 @@ def addservice():
 
 @main.route("/send-sms")
 def sendsms():
-    return render_template('views/send-sms.html')
+    return render_template(
+        'views/send-sms.html',
+        message_templates=[
+            {
+                'name': 'Reminder',
+                'body': """
+                    Vehicle tax: Your vehicle tax for ((registration number)) expires on ((date)).
+                    Tax your vehicle at www.gov.uk/vehicle-tax
+                """
+            },
+            {
+                'name': 'Warning',
+                'body': """
+                    Vehicle tax: Your vehicle tax for ((registration number)) has expired.
+                    Tax your vehicle at www.gov.uk/vehicle-tax
+                """
+            },
+        ]
+    )
 
 
 @main.route("/check-sms")
 def checksms():
-    return render_template('views/check-sms.html')
+    return render_template(
+        'views/check-sms.html',
+        recipient_count=159,
+        message_template="""
+            Vehicle tax: Your vehicle tax for ((registration number)) expires on ((date)).
+            Tax your vehicle at www.gov.uk/vehicle-tax
+        """
+    )
 
 
 @main.route("/email-not-received")

app/templates/views/check-sms.html

@@ -1,4 +1,5 @@
 {% extends "admin_template.html" %}
+{% from "components/sms-message.html" import sms_message %}
 
 {% block page_title %}
 GOV.UK Notify | Send text messages
@@ -10,10 +11,10 @@ GOV.UK Notify | Send text messages
 	<div class="column-two-thirds">
 		<h1 class="heading-xlarge">Send text messages</h1>
 
-		<p>This page will be where we check the text messages we're about to send</p>
+		{{ sms_message(message_template) }}
 
   	<p>
-  	<a class="button" href="dashboard" role="button">Send text messages</a>
+	  	<a class="button" href="/check-sms" role="button">Send {{recipient_count}} text messages</a>
   	</p>
 	</div>
 </div>

app/templates/views/send-sms.html

@@ -12,13 +12,31 @@
 
 		<h1 class="heading-xlarge">Send text messages</h1>
 
-		{{ sms_message("
+		<h2 class="heading-medium">1. Choose text message template</h2>
-			Vehicle tax: Your vehicle tax for ((registration number)) expires on
+		{% for template in message_templates %}
-			((date)). Tax your vehicle at www.gov.uk/vehicle-tax
+			{{ template.name }}
-		") }}
+			{{ sms_message(template.body) }}
+		{% endfor %}
+
+		<h2 class="heading-medium">2. Add recipients</h2>
+
+		<p>
+			Add recipients by uploading a CSV
+		</p>
+		<p>
+			Format the cells as ‘text’ in your spreadsheet app – this stores the mobile
+			numbers correctly
+		</p>
+		<p>
+			You can also <a href="#">download an example</a>
+		</p>
+		<p>
+			<input type="file" />
+		</p>
+
 
   	<p>
-	  	<a class="button" href="check-sms" role="button">Continue</a>
+	  	<a class="button" href="/check-sms" role="button">Continue</a>
   	</p>
 	</div>
 </div>