Show task order heading on view task order page

styles/atat.scss

@@ -46,3 +46,4 @@
 @import 'sections/project_edit';
 @import 'sections/member_edit';
 @import 'sections/reports';
+@import 'sections/task_order';

styles/sections/_task_order.scss

@@ -0,0 +1,41 @@
+.task-order-summary {
+
+  @include media($medium-screen) {
+    @include grid-row;
+    flex-wrap: wrap;
+  }
+
+  .panel {
+    padding: 0 $gap * 2;
+    width: 100%;
+
+    @include ie-only {
+      max-width: 100%;
+    }
+  }
+
+  .task-order-heading {
+    align-items: center;
+    justify-content: space-between;
+
+    .task-order-heading__name {
+      align-items: center;
+      padding: $gap;
+
+      label {
+        padding: $gap;
+      }
+    }
+
+    .task-order-heading__value {
+      margin: 0 ($gap * 2);
+      text-align: right;
+
+      dt {
+        font-weight: bold;
+      }
+      dd {
+      }
+    }
+  }
+}

templates/workspaces/task_orders/show.html

@@ -2,6 +2,28 @@
 
 {% block workspace_content %}
 
-You're looking at TO {{ task_order.id }}
+<div class='task-order-summary'>
+  <div class='panel task-order-heading row'>
+    <div class='task-order-heading__name row'>
+      <h2>New Task Order</h2>
+      <span class="label label--warning">Pending</span>
+    </div>
+    <div class="task_order-heading__details row">
+      <div class="task-order-heading__value col">
+        <dt>Started</dt>
+        <dd>
+          <local-datetime
+            timestamp='{{ task_order.start_date }}'
+            format='M/D/YYYY'>
+            </local-datetime>
+        </dd>
+      </div>
+      <div class="task-order-heading__value col">
+        <dt>Task Order Value</dt>
+        <dd>{{ task_order.budget | dollars }}</dd>
+      </div>
+    </div>
+  </div>
+</div>
 
 {% endblock %}