Mockup the tasklist page

app/views/case_logs/show.html.erb

@@ -1,29 +1,38 @@
-<h1 class="govuk-heading-xl">Tasklist for log <%= @case_log.id %></h1>
+<h1 class="govuk-heading-xl">Tasklist for log
+  <%= @case_log.id %></h1>
 
-<h2 class="govuk-heading-s govuk-!-margin-bottom-2">This submission is <%= @case_log.status %></h2>
+<h2 class="govuk-heading-s govuk-!-margin-bottom-2">This submission is
+  <%= @case_log.status %></h2>
+<p class="govuk-body govuk-!-margin-bottom-7">You've completed 0 of 9 sections.</p>
+<p class="govuk-body govuk-!-margin-bottom-7">
+  <a href="#">Skip to next incomplete section</a>
+</p>
 
-<br />
+<%# Placeholder until we have a real form schema %>
+<%
+  sections = {
+    "About the household" => ["Household characteristics", "Household situation", "Household needs"],
+    "Tenancy and property information" => ["Tenancy information", "Property information"],
+    "Rent and charges" => ["Income & benefits", "Rent"],
+    "Local Authority" => ["Local authority"],
+    "Submission" => ["Declaration"]
+  }
+%>
 
 <ol class="app-task-list app-task-list--no-numbers">
-  <li>
+  <% sections.map do |section, subsections| %>
-    <h2 class="app-task-list__section">
+    <li>
-      <span class="app-task-list__section-number">About the household</span>
+      <h2 class="app-task-list__section">
-    </h2>
+        <span class="app-task-list__section-number"><%= section %></span>
-    <ul class="app-task-list__items">
+      </h2>
-      <li class="app-task-list__item">
+      <ul class="app-task-list__items">
-        <a class="task-name" href="">Household characteristics</a>
+        <% subsections.map do |subsection| %>
-        <strong class="govuk-tag govuk-tag--grey app-task-list__tag">Not started</strong>
+          <li class="app-task-list__item">
-      </li>
+            <a class="task-name" href=""><%= subsection %></a>
-
+            <strong class="govuk-tag govuk-tag--grey app-task-list__tag">Not started</strong>
-      <li class="app-task-list__item">
+          </li>
-        <a class="task-name" href="">Household situation</a>
+        <% end %>
-        <strong class="govuk-tag govuk-tag--grey app-task-list__tag">Not started</strong>
+      </ul>
-      </li>
+    </li>
-
+  <% end %>
-      <li class="app-task-list__item">
-        <a class="task-name" href="">Household needs</a>
-        <strong class="govuk-tag govuk-tag--grey app-task-list__tag">Not started</strong>
-      </li>
-    </ul>
-  </li>
 </ol>