[Scorecards] Added legends and new layout to previous year scorecard …

…comparison

scoring/templates/scoring/council.html

@@ -153,8 +153,8 @@ <h3>Action Scorecard: {{ council.short_name }}</h3>
       {% endif %}
     </div>
 
-    <div class="row my-4 my-lg-5">
-        <div class="col-md-6 col-lg-4 d-none d-md-block">
+    <div class="row mt-4 mb-3 mt-5">
+        <div class="col-md-5 d-none d-md-block">
             <div class="card h-100">
                 <div class="card-header">
                     <h3 class="fs-6 mb-0">Choose {% include "scoring/includes/scoring-group-name.html" with group=council.get_scoring_group.slug plural=1 %} to compare</h3>
@@ -192,7 +192,7 @@ <h3 class="fs-6 mb-0">Choose {% include "scoring/includes/scoring-group-name.htm
                 </div>
             </div>
         </div>
-        <div class="col-md-6 col-lg-8">
+        <div class="col-md-6">
             <div class="card">
                 <div class="card-header">
                     <h3 class="fs-6 mb-0">Filter questions in the table</h3>
@@ -215,9 +215,30 @@ <h3 class="fs-6 mb-0">Filter questions in the table</h3>
                             <input class="form-check-input" type="checkbox" id="expand-all-sections">
                             <label class="form-check-label" for="expand-all-sections">Expand all sections</label>
                         </div>
-                        <div class="form-check-flex position-relative">
+                      </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row mb-3 mb-lg-4">
+        <div class="col-md-5">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="fs-6 mb-0"><span class="badge bg-primary-100 text-primary me-2">NEW</span>Previous scorecards version comparison</h3>
+                </div>
+                <div class="card-body">
+                      <div class="form-check-flex">
                           <input class="form-check-input" type="checkbox" id="js-toggle-previous-year-score" aria-checked="false" role="switch">
-                          <label class="form-check-label" for="js-toggle-previous-year-score"><span class="badge bg-primary-100 text-primary position-absolute" style="top: -1rem;">NEW</span>Display 2023 scores</label>
+                          <label class="form-check-label" for="js-toggle-previous-year-score">Display 2023 scores</label>
+                      </div>
+                      <div class="d-flex flex-row gap-3 mt-3">
+                        <h4 class="visually-hidden">Legends for variation column</h4>
+                        <div>
+                          <span class="badge bg-gray-300 text-dark">--</span> No change
+                        </div>
+                        <div>
+                          <span class="badge bg-gray-300 text-dark">NA</span> New question (not in previous scorecards)
                         </div>
                       </div>
                 </div>