From b31613de159910cd438aed37ef646cf1e8732d94 Mon Sep 17 00:00:00 2001
From: Lucas <hello@lucascm.dev>
Date: Mon, 14 Oct 2024 13:33:02 +0100
Subject: [PATCH] [Scorecards] Added council suggestions for comparisson tool

---
 scoring/static/scoring/js/main.js      | 38 ++++++++++++++++++--------
 scoring/templates/scoring/council.html | 22 ++++++++++++---
 scoring/views.py                       | 16 +++++++++++
 3 files changed, 61 insertions(+), 15 deletions(-)

diff --git a/scoring/static/scoring/js/main.js b/scoring/static/scoring/js/main.js
index 92bfde1c..12484223 100644
--- a/scoring/static/scoring/js/main.js
+++ b/scoring/static/scoring/js/main.js
@@ -144,19 +144,35 @@ forEachElement('.js-location-compare-autocomplete', function(input){
             autoFirst: true
         }
     );
+
     input.parentNode.addEventListener('awesomplete-selectcomplete', function(data){
-        var council = findItem(councils, {'name': data.text });
-        var sp = new URLSearchParams(window.location.search)
-        var comparisons = sp.getAll('comparisons');
+        handleCouncilSelection(data.text);
+    });
+});
 
-        if (!comparisons.includes(council.slug)) {
-            comparisons.push(council.slug);
-        }
-        sp.delete('comparisons');
-        for (comparison of comparisons.values()) {
-            sp.append('comparisons', comparison);
-        }
-        window.location.href = window.location.pathname + '?' + sp.toString() + '#questions';
+// Function to handle selection from both autocomplete and suggestions
+function handleCouncilSelection(councilName) {
+    var council = findItem(councils, {'name': councilName});
+    var sp = new URLSearchParams(window.location.search);
+    var comparisons = sp.getAll('comparisons');
+
+    if (!comparisons.includes(council.slug)) {
+        comparisons.push(council.slug);
+    }
+    sp.delete('comparisons');
+    for (comparison of comparisons.values()) {
+        sp.append('comparisons', comparison);
+    }
+    window.location.href = window.location.pathname + '?' + sp.toString() + '#questions';
+}
+
+// Handling suggestion clicks
+forEachElement('.js-council-compare-suggestions', function(suggestion) {
+    suggestion.addEventListener('click', function(event) {
+        event.preventDefault();
+        var councilSlug = this.dataset.slug;
+        var council = findItem(councils, {'slug': councilSlug}); // Get the council by slug
+        handleCouncilSelection(council.name); // Pass the name to the selection handler
     });
 });
 
diff --git a/scoring/templates/scoring/council.html b/scoring/templates/scoring/council.html
index da0fc63e..abe1839c 100644
--- a/scoring/templates/scoring/council.html
+++ b/scoring/templates/scoring/council.html
@@ -154,7 +154,7 @@ <h3>Action Scorecard: {{ council.short_name }}</h3>
     </div>
 
     <div class="row my-4 my-lg-5">
-        <div class="col-md-6 col-lg-4 d-none d-md-block">
+        <div class="col-md-6 col-lg-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>
@@ -164,9 +164,23 @@ <h3 class="fs-6 mb-0">Choose {% include "scoring/includes/scoring-group-name.htm
                       {% if comparisons|length > 2 %}
                         <p class="warning-message">You have reached the maximum number of councils that can be compared.</p>
                       {% else %}
-                        <input class="form-control searchbar js-location-compare-autocomplete" name="search" id="compare-search" type="search" placeholder="Council name" aria-label="Council name" data-council_type="{{ council.get_scoring_group.slug }}">
+                        <input class="form-control searchbar js-location-compare-autocomplete mb-3" name="search" id="compare-search" type="search" placeholder="Council name" aria-label="Council name" data-council_type="{{ council.get_scoring_group.slug }}">
+                          {% if similar_councils %}
+                            <p class="mb-1 fs-7">
+                                <button type="button" class="d-inline-flex align-items-center p-0 me-1 border-0 bg-transparent" data-bs-toggle="tooltip" data-bs-placement="top" title="Overall similarity based on emissions profile, deprivation, rural/urban population density, and geographical proximity">
+                                    <span>Similar councils:</span>
+                                    {% include 'caps/icons/question-circle.html' with classes='ms-1 align-text-top' width='1rem' height='1rem' role='presentation' %}
+                                </button>
+                            </p>
+                            <div class="d-flex flex-wrap lh-sm mt-2" style="column-gap: 1rem; row-gap: 0.5rem;">
+                              {% for similar_council in similar_councils %}
+                                <a class="d-inline-block js-council-compare-suggestions" href="#" data-slug="{{ similar_council.slug }}">{{ similar_council.name }}</a>
+                              {% endfor %}
+                            </div>
+                          {% endif %}
                       {% endif %}
                       {% if comparisons %}
+                        <hr class="mx-n3">
                         <div class="selected-council-wrapper mt-4 mb-3">
                           {% for comparison in comparisons %}
                             <a href="#" class="radio-btn is--with-label is--with-closed-icon mr-1 js-comparison-council" data-slug="{{ comparison.council.slug }}">{{ comparison.council.name }}</a>
@@ -178,8 +192,8 @@ <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="card h-100">
+        <div class="col-md-6 col-lg-7">
+            <div class="card">
                 <div class="card-header">
                     <h3 class="fs-6 mb-0">Filter questions in the table</h3>
                 </div>
diff --git a/scoring/views.py b/scoring/views.py
index d895d38e..2baf967f 100644
--- a/scoring/views.py
+++ b/scoring/views.py
@@ -405,6 +405,22 @@ def get_context_data(self, **kwargs):
         context["sections"] = sorted(
             sections.values(), key=lambda section: section["code"]
         )
+        context["comparisons"] = comparisons
+
+        for group in council.get_related_councils(5):
+            if group["type"].slug == "composite":
+                if comparisons:
+                    # Filter out any related councils that are already being compared
+                    comparison_slugs = {score.council.slug for score in comparisons}
+                    context["similar_councils"] = [
+                        sc
+                        for sc in group["councils"]
+                        if sc.slug not in comparison_slugs
+                    ]
+                else:
+                    context["similar_councils"] = group["councils"]
+                break
+
         context["page_title"] = "{name} Climate Action Scorecard".format(
             name=council.name
         )