From a757393d283c1a72aa3adee1bf643b2a3807ec04 Mon Sep 17 00:00:00 2001
From: Catherine Farman <Catherine.Farman@cfpb.gov>
Date: Sat, 7 Mar 2015 16:33:26 -0500
Subject: [PATCH 1/4] placeholder markup for the graph using item length

---
 .../prepare-worksheets/page-summary.hbs       | 43 ++++++++++++++++++-
 1 file changed, 42 insertions(+), 1 deletion(-)

diff --git a/src/static/js/templates/prepare-worksheets/page-summary.hbs b/src/static/js/templates/prepare-worksheets/page-summary.hbs
index d0fd1c5e7..8f98a61a1 100644
--- a/src/static/js/templates/prepare-worksheets/page-summary.hbs
+++ b/src/static/js/templates/prepare-worksheets/page-summary.hbs
@@ -2,7 +2,48 @@
     <h1>Your summary</h1>
     <p class="lead">Buying a home is more complicated than simply trading a rent payment for a mortgage payment.  Owning a home is a long-term financial commitment that carries costs, risks, and benefits.  Examine your summary below to decide whether or not you are ready to continue working towards buying a home.</p>
     
-    <div class="summary-chart"></div>
+    <div class="summary-chart">
+      
+
+    <!-- goals -->
+      {{#each this.goals.[2].[items]}}
+        low priority goal #{{@index}}: 
+        <div class="goal-low"></div>
+      {{/each}} <!-- light green -->
+
+      {{#each this.goals.[1].[items]}}
+        medium priority goal #{{@index}}: 
+        <div class="goal-medium"></div>
+      {{/each}} <!-- medium green -->
+
+      {{#each this.goals.[0].[items]}}
+        high priority goal #{{@index}}: 
+        <div class="goal-high"></div>
+      {{/each}} <!-- dark green -->
+
+      <!-- red flags -->
+      {{#each this.flags.[1].[items]}}
+        somewhat likely flag #{{@index}}: 
+        <div class="flag-medium"></div>
+      {{/each}} <!-- light red -->
+
+      {{#each this.flags.[0].[items]}}
+        likely flag #{{@index}}: 
+        <div class="flag-high"></div>
+      {{/each}} <!-- dark red -->
+
+      <!-- risks -->
+
+      {{#each this.risks.[1].[items]}}
+        maybe ready risk #{{@index}}: 
+        <div class="risk-medium"></div>
+      {{/each}} <!-- light yellow -->
+
+      {{#each this.risks.[2].[items]}}
+        not ready risk #{{@index}}: 
+        <div class="risk-low"></div>
+      {{/each}} <!-- dark yellow -->
+    </div>
     
     <div class="content-l content-l__main">
         <div class="content-l_col content-l_col-1-2">

From 7068acb5a963c9f28605b17ecc2c560d4eba8a57 Mon Sep 17 00:00:00 2001
From: Catherine Farman <Catherine.Farman@cfpb.gov>
Date: Sat, 7 Mar 2015 17:08:11 -0500
Subject: [PATCH 2/4] graph loops

---
 .../prepare-worksheets/page-summary.hbs       | 65 +++++++------------
 1 file changed, 24 insertions(+), 41 deletions(-)

diff --git a/src/static/js/templates/prepare-worksheets/page-summary.hbs b/src/static/js/templates/prepare-worksheets/page-summary.hbs
index 3d0b1a5a8..db01db2ce 100644
--- a/src/static/js/templates/prepare-worksheets/page-summary.hbs
+++ b/src/static/js/templates/prepare-worksheets/page-summary.hbs
@@ -7,68 +7,51 @@
       <section class="summary-chart">
 
         <!-- goals -->
+
+        <div class="box1 first">
           {{#each this.goals.[2].[items]}}
-            low priority goal #{{@index}}: 
-            <div class="goal-low"></div>
+            <!-- low priority goal #{{@index}}: -->
+            <div class="box-goals goals-low"></div>
           {{/each}} <!-- light green -->
 
           {{#each this.goals.[1].[items]}}
-            medium priority goal #{{@index}}: 
-            <div class="goal-medium"></div>
+            <!-- medium priority goal #{{@index}}: -->
+            <div class="box-goals goals-medium"></div>
           {{/each}} <!-- medium green -->
 
           {{#each this.goals.[0].[items]}}
-            high priority goal #{{@index}}: 
-            <div class="goal-high"></div>
+            <!-- high priority goal #{{@index}}: -->
+            <div class="box-goals goals-high"></div>
           {{/each}} <!-- dark green -->
+        </div>
 
-          <!-- red flags -->
+        <!-- red flags -->
+        <div class="box1">
           {{#each this.flags.[1].[items]}}
-            somewhat likely flag #{{@index}}: 
-            <div class="flag-medium"></div>
+            <!-- somewhat likely flag #{{@index}}: -->
+            <div class="box-goals flags-medium"></div>
           {{/each}} <!-- light red -->
 
+
           {{#each this.flags.[0].[items]}}
-            likely flag #{{@index}}: 
-            <div class="flag-high"></div>
+            <!-- likely flag #{{@index}}: -->
+            <div class="box-goals flags-high"></div>
           {{/each}} <!-- dark red -->
+        </div>
 
-          <!-- risks -->
-
+        <!-- risks -->
+        <div class="box1">
           {{#each this.risks.[1].[items]}}
-            maybe ready risk #{{@index}}: 
-            <div class="risk-medium"></div>
+            <!-- maybe ready risk #{{@index}}: -->
+            <div class="box-goals risks-medium"></div>
           {{/each}} <!-- light yellow -->
 
           {{#each this.risks.[2].[items]}}
-            not ready risk #{{@index}}: 
-            <div class="risk-low"></div>
+            <!-- not ready risk #{{@index}}: -->
+            <div class="box-goals risks-high"></div>
           {{/each}} <!-- dark yellow -->
+        </div>
 
-          <div class="box1 first">
-            <div class="box-goals "></div>
-            <div class="box-goals"></div>
-            <div class="box-goals"></div>
-            <div class="box-goals"></div>
-            <div class="box-goals"></div>
-            <div class="box-goals"></div>
-            <div class="box-goals"></div>
-            <div class="box-goals goals-low"></div>
-            <div class="box-goals goals-high"></div>
-            <div class="box-goals goals-high"></div>
-          </div>
-          <div class="box1 ">
-            <div class="box-goals flags-medium"></div>
-            <div class="box-goals flags-medium"></div>
-            <div class="box-goals flags-high"></div>
-            <div class="box-goals flags-high"></div>
-          </div>
-          <div class="box1 ">
-            <div class="box-goals risks-medium"></div>
-            <div class="box-goals risks-medium"></div>
-            <div class="box-goals risks-high"></div>
-            <div class="box-goals risks-high"></div>
-          </div>
           <br>
           <div class="box2">
              <h5>Goals</h5>

From 639894ee05b75d2283c1c7db5a55069b63634bb4 Mon Sep 17 00:00:00 2001
From: Catherine Farman <Catherine.Farman@cfpb.gov>
Date: Sat, 7 Mar 2015 17:09:38 -0500
Subject: [PATCH 3/4] clean up comments

---
 .../templates/prepare-worksheets/page-summary.hbs | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/static/js/templates/prepare-worksheets/page-summary.hbs b/src/static/js/templates/prepare-worksheets/page-summary.hbs
index db01db2ce..06a330ec9 100644
--- a/src/static/js/templates/prepare-worksheets/page-summary.hbs
+++ b/src/static/js/templates/prepare-worksheets/page-summary.hbs
@@ -8,19 +8,20 @@
 
         <!-- goals -->
 
+        {{#if goalsError }}
         <div class="box1 first">
           {{#each this.goals.[2].[items]}}
-            <!-- low priority goal #{{@index}}: -->
+            <!-- low priority goal -->
             <div class="box-goals goals-low"></div>
           {{/each}} <!-- light green -->
 
           {{#each this.goals.[1].[items]}}
-            <!-- medium priority goal #{{@index}}: -->
+            <!-- medium priority goal -->
             <div class="box-goals goals-medium"></div>
           {{/each}} <!-- medium green -->
 
           {{#each this.goals.[0].[items]}}
-            <!-- high priority goal #{{@index}}: -->
+            <!-- high priority goal -->
             <div class="box-goals goals-high"></div>
           {{/each}} <!-- dark green -->
         </div>
@@ -28,13 +29,13 @@
         <!-- red flags -->
         <div class="box1">
           {{#each this.flags.[1].[items]}}
-            <!-- somewhat likely flag #{{@index}}: -->
+            <!-- somewhat likely flag -->
             <div class="box-goals flags-medium"></div>
           {{/each}} <!-- light red -->
 
 
           {{#each this.flags.[0].[items]}}
-            <!-- likely flag #{{@index}}: -->
+            <!-- likely flag -->
             <div class="box-goals flags-high"></div>
           {{/each}} <!-- dark red -->
         </div>
@@ -42,12 +43,12 @@
         <!-- risks -->
         <div class="box1">
           {{#each this.risks.[1].[items]}}
-            <!-- maybe ready risk #{{@index}}: -->
+            <!-- maybe ready risk -->
             <div class="box-goals risks-medium"></div>
           {{/each}} <!-- light yellow -->
 
           {{#each this.risks.[2].[items]}}
-            <!-- not ready risk #{{@index}}: -->
+            <!-- not ready risk -->
             <div class="box-goals risks-high"></div>
           {{/each}} <!-- dark yellow -->
         </div>

From 9d26c6d0e49bdacad388860e3196c2073f115792 Mon Sep 17 00:00:00 2001
From: Catherine Farman <Catherine.Farman@cfpb.gov>
Date: Fri, 28 Aug 2015 16:31:20 -0400
Subject: [PATCH 4/4] fix(prepare worksheets): fix missing closing if tag

---
 .../prepare-worksheets/page-summary.hbs       | 96 ++++++++++---------
 1 file changed, 50 insertions(+), 46 deletions(-)

diff --git a/src/static/js/templates/prepare-worksheets/page-summary.hbs b/src/static/js/templates/prepare-worksheets/page-summary.hbs
index 06a330ec9..a92271cb2 100644
--- a/src/static/js/templates/prepare-worksheets/page-summary.hbs
+++ b/src/static/js/templates/prepare-worksheets/page-summary.hbs
@@ -9,49 +9,50 @@
         <!-- goals -->
 
         {{#if goalsError }}
-        <div class="box1 first">
-          {{#each this.goals.[2].[items]}}
-            <!-- low priority goal -->
-            <div class="box-goals goals-low"></div>
-          {{/each}} <!-- light green -->
+          <div class="box1 first">
+            {{#each this.goals.[2].[items]}}
+              <!-- low priority goal -->
+              <div class="box-goals goals-low"></div>
+            {{/each}} <!-- light green -->
 
-          {{#each this.goals.[1].[items]}}
-            <!-- medium priority goal -->
-            <div class="box-goals goals-medium"></div>
-          {{/each}} <!-- medium green -->
+            {{#each this.goals.[1].[items]}}
+              <!-- medium priority goal -->
+              <div class="box-goals goals-medium"></div>
+            {{/each}} <!-- medium green -->
 
-          {{#each this.goals.[0].[items]}}
-            <!-- high priority goal -->
-            <div class="box-goals goals-high"></div>
-          {{/each}} <!-- dark green -->
-        </div>
+            {{#each this.goals.[0].[items]}}
+              <!-- high priority goal -->
+              <div class="box-goals goals-high"></div>
+            {{/each}} <!-- dark green -->
+          </div>
 
-        <!-- red flags -->
-        <div class="box1">
-          {{#each this.flags.[1].[items]}}
-            <!-- somewhat likely flag -->
-            <div class="box-goals flags-medium"></div>
-          {{/each}} <!-- light red -->
+          <!-- red flags -->
+          <div class="box1">
+            {{#each this.flags.[1].[items]}}
+              <!-- somewhat likely flag -->
+              <div class="box-goals flags-medium"></div>
+            {{/each}} <!-- light red -->
 
 
-          {{#each this.flags.[0].[items]}}
-            <!-- likely flag -->
-            <div class="box-goals flags-high"></div>
-          {{/each}} <!-- dark red -->
-        </div>
+            {{#each this.flags.[0].[items]}}
+              <!-- likely flag -->
+              <div class="box-goals flags-high"></div>
+            {{/each}} <!-- dark red -->
+          </div>
 
-        <!-- risks -->
-        <div class="box1">
-          {{#each this.risks.[1].[items]}}
-            <!-- maybe ready risk -->
-            <div class="box-goals risks-medium"></div>
-          {{/each}} <!-- light yellow -->
+          <!-- risks -->
+          <div class="box1">
+            {{#each this.risks.[1].[items]}}
+              <!-- maybe ready risk -->
+              <div class="box-goals risks-medium"></div>
+            {{/each}} <!-- light yellow -->
 
-          {{#each this.risks.[2].[items]}}
-            <!-- not ready risk -->
-            <div class="box-goals risks-high"></div>
-          {{/each}} <!-- dark yellow -->
-        </div>
+            {{#each this.risks.[2].[items]}}
+              <!-- not ready risk -->
+              <div class="box-goals risks-high"></div>
+            {{/each}} <!-- dark yellow -->
+          </div>
+        {{/if}}
 
           <br>
           <div class="box2">
@@ -66,8 +67,11 @@
 
       </section>
     </div>
+
     <hr>
+    
     <br>
+    
     <div class="content-l content-l__main">
         <div class="content-l_col content-l_col-1-2">
             
@@ -84,7 +88,8 @@
                   {{/if}}
             </section>
             
-        </div>
+        </div><!-- .content-l_col -->
+
         <div class="content-l_col content-l_col-1-2 worksheet worksheet-summary worksheet-flags-summary">
             
             <section class="worksheet worksheet-summary worksheet-flags-summary">
@@ -111,11 +116,11 @@
                   {{/if}}
             </section>
             
-        </div>
-    </div>
-</div>
+        </div><!-- .content-l_col -->
+    </div><!-- .content-l_main -->
+</div><!-- .summary -->
 
-<div class="block__border-top block__padded-top">
+<div class="block block__border-top block__padded-top">
     <div class="summary content-l content-l__main">
         <div class="content-l_col content-l_col-1-2">
             <section class="summary-callout">
@@ -124,7 +129,7 @@
               The next step is to explore how much it will cost to buy a home that meets your goals, and whether buying makes sense financially.  For most people, owning a home will end up being more expensive than their current rental.  Before you start house shopping in earnest, it’s a good idea to get a clear sense for how much buying will cost, so you can decide for yourself if the benefits are worth the cost.
               </p>
             </section>
-        </div>
+        </div><!-- .content-l_col -->
         <div class="content-l_col content-l_col-1-2 content-l_col__before-divider">
             <section class="summary-callout">
               <h4>Not ready to buy?</h4>
@@ -132,7 +137,6 @@
               Are there red flags in your situation, or risks you’re not ready to accept?   That’s ok.  Sometimes, the smartest home buying decision is deciding not to buy – at least not right now.  Consider pursuing the alternatives you identified, so that you can meet some of your goals right away.  Or, consider working to build a larger financial cushion so you will be better able to accept the risks of homeownership when the time is right for you.
               </p>
             </section>
-        </div>
-    </div>
-
-</div>
\ No newline at end of file
+        </div><!-- .content-l_col -->
+    </div><!-- .summary -->
+</div><!-- .block -->
\ No newline at end of file