From 0cf655325cffa1536aaa361120edcf0948c3fef9 Mon Sep 17 00:00:00 2001
From: Ross <ross@xkjq.uk>
Date: Fri, 15 May 2026 20:04:13 +0100
Subject: [PATCH] feat: Enhance collection review and overview templates with
 improved styling and conditional content display

---
 .../atlas/collection_review_start.html        | 156 ++++++++++++++----
 .../atlas/collection_take_overview.html       |   4 +-
 2 files changed, 128 insertions(+), 32 deletions(-)

diff --git a/atlas/templates/atlas/collection_review_start.html b/atlas/templates/atlas/collection_review_start.html
index 1273b539..e8575304 100644
--- a/atlas/templates/atlas/collection_review_start.html
+++ b/atlas/templates/atlas/collection_review_start.html
@@ -1,47 +1,143 @@
 {% extends 'atlas/base.html' %}
 
 {% block content %}
-    <h2>Collection: {{exam}}</h2>
+    <style>
+        .take-start-hero {
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            background: linear-gradient(135deg, rgba(13, 110, 253, 0.22), rgba(25, 135, 84, 0.2));
+            border-radius: .75rem;
+            padding: 1rem 1.25rem;
+            margin-bottom: 1rem;
+        }
+
+        .take-start-card {
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            background: rgba(255, 255, 255, 0.03);
+            border-radius: .75rem;
+            padding: 1rem;
+        }
+
+        .take-start-meta {
+            display: grid;
+            grid-template-columns: 9rem 1fr;
+            gap: .35rem .75rem;
+        }
+
+        .take-start-meta dt {
+            font-weight: 600;
+            color: var(--bs-secondary-color);
+            margin: 0;
+        }
+
+        .take-start-meta dd {
+            margin: 0;
+        }
+    </style>
+
+    <section class="take-start-hero">
+        <div class="d-flex flex-wrap align-items-center gap-2 justify-content-between">
+            <h2 class="mb-0">Review: {{ collection.name }}</h2>
+            <span class="badge bg-light text-dark">Review Collection</span>
+        </div>
+        <p class="mb-0 mt-2 text-body-secondary">Open the collection and browse completed cases.</p>
+    </section>
 
     {% if collection.start_screen_content %}
-        <div class="card mb-3">
-            <div class="card-body">
-                {{ collection.start_screen_content|safe }}
-            </div>
-        </div>
+        <section class="take-start-card mb-3">
+            {{ collection.start_screen_content|safe }}
+        </section>
     {% endif %}
 
-    {% if collection.start_screen_resources.exists %}
-        <div class="card mb-3">
-            <div class="card-body">
-                <h6>Resources</h6>
-                {% for resource in collection.start_screen_resources.all %}
-                    <div class="small mb-1">{{ resource.get_display }}</div>
+    {% if start_screen_resources %}
+        <section class="take-start-card mb-3">
+            <h6 class="mb-2">Resources</h6>
+            <div class="d-grid gap-2">
+                {% for resource in start_screen_resources %}
+                    <div class="small">{{ resource.get_display }}</div>
                 {% endfor %}
             </div>
-        </div>
+        </section>
     {% endif %}
 
-{% comment %}     <ul>
-        {% for case in collection.cases.all %}
-            <li><a href="{% url 'atlas:collection_case_view_take_user' pk=collection.id case_number=forloop.counter0 %}">Case {{forloop.counter}}</a></li>
-        {% endfor %}
-    </ul> {% endcomment %}
+    {% if request.user.is_authenticated and valid_user %}
+        <section class="take-start-card">
+            <dl class="take-start-meta mb-3">
+                <dt>User</dt>
+                <dd>{{ request.user }}</dd>
 
-    User: {{request.user}}<br/>
+                {% if cid_exam %}
+                    <dt>Started</dt>
+                    <dd>{{ cid_exam.start_time }}</dd>
 
-    {% if cid_exam %}
-        Started: {{cid_exam.start_time}} <br/>
-        {% if cid_exam.completed %}
-            Ended: {{cid_exam.end_time}} <br/>
+                    {% if cid_exam.completed %}
+                        <dt>Ended</dt>
+                        <dd>{{ cid_exam.end_time }}</dd>
+                    {% endif %}
+                {% endif %}
+            </dl>
+
+            <div class="d-flex flex-wrap gap-2">
+                <a class="btn btn-primary"
+                   href="{% url 'atlas:collection_case_view_take_user' pk=collection.pk case_number=0 %}">
+                    Browse
+                </a>
+
+                {% if cid_exam.completed %}
+                    <a class="btn btn-outline-secondary"
+                       href="{% url 'atlas:collection_take_overview_user' pk=collection.pk %}">Overview</a>
+                {% endif %}
+            </div>
+        </section>
+
+        {% if collection.show_results_sharing_information and sharing_summary %}
+            <section class="take-start-card mt-3">
+                <div class="fw-semibold mb-2 small text-body-secondary text-uppercase" style="letter-spacing:.05em;">Who can see your results</div>
+                <ul class="list-unstyled mb-0 small">
+                    <li class="mb-1">
+                        <span class="badge bg-secondary me-1">You</span>
+                        Always visible to you.
+                    </li>
+                    {% for u in sharing_summary.always_visible_to %}
+                        <li class="mb-1">
+                            <span class="badge bg-secondary me-1">Author/Marker</span>
+                            {{ u.get_full_name|default:u.username }}
+                            {% if u.email %}<span class="text-muted">&lt;{{ u.email }}&gt;</span>{% endif %}
+                        </li>
+                    {% endfor %}
+                    {% if sharing_summary.supervisor_always %}
+                        <li class="mb-1">
+                            <span class="badge bg-info text-dark me-1">Supervisor</span>
+                            {% if sharing_summary.supervisor %}
+                                {{ sharing_summary.supervisor.get_full_name|default:sharing_summary.supervisor.username }}
+                                (always shared - collection setting)
+                            {% else %}
+                                Your supervisor, if one is linked to your profile (collection setting always on).
+                            {% endif %}
+                        </li>
+                    {% elif sharing_summary.supervisor_opt_in %}
+                        <li class="mb-1">
+                            <span class="badge bg-outline-secondary me-1" style="border:1px solid var(--bs-secondary);color:var(--bs-secondary);">Supervisor</span>
+                            {% if sharing_summary.supervisor %}
+                                {{ sharing_summary.supervisor.get_full_name|default:sharing_summary.supervisor.username }}
+                                - you can choose to share with them after starting.
+                            {% else %}
+                                You have a supervisor linked but they do not have a login account yet.
+                            {% endif %}
+                        </li>
+                    {% endif %}
+                    {% if not sharing_summary.always_visible_to and not sharing_summary.supervisor_always and not sharing_summary.supervisor_opt_in %}
+                        <li class="text-muted fst-italic">Only you can see your results for this collection.</li>
+                    {% endif %}
+                </ul>
+            </section>
         {% endif %}
+    {% else %}
+        <section class="take-start-card">
+            <p class="mb-0">
+                Please sign in to access this review collection.
+                <a href="{% url 'login' %}?next={% url 'atlas:collection_take_start' pk=collection.pk %}">Log in here</a>.
+            </p>
+        </section>
     {% endif %}
 
-    <a href="{% url 'atlas:collection_case_view_take_user' pk=collection.pk case_number=0 %}">
-        {% if cid_exam.completed %}
-            <button>Review</button>
-        {% else %}
-            <button>Start</button>
-        {% endif %}
-    </a>
 {% endblock %}
diff --git a/atlas/templates/atlas/collection_take_overview.html b/atlas/templates/atlas/collection_take_overview.html
index 9d1a82a7..9115b90f 100644
--- a/atlas/templates/atlas/collection_take_overview.html
+++ b/atlas/templates/atlas/collection_take_overview.html
@@ -57,7 +57,7 @@
                 <div class="d-flex flex-wrap justify-content-between align-items-start gap-2">
                     <div>
                         <div class="fw-semibold">
-                            Case {{ forloop.counter }}{% if collection.show_title_post %}: {{ question.case.title|default:question.case.pk|truncatechars:70 }}{% endif %}
+                            Case {{ forloop.counter }}{% if collection.show_title_post and answer and answer.completed or collection.show_title_post and cid_user_exam.completed %}: {{ question.case.title|default:question.case.pk|truncatechars:70 }}{% endif %}
                             {% if answer and answer.completed or cid_user_exam.completed %}
                                 <span class="badge bg-success-subtle text-success-emphasis ms-2">Completed</span>
                             {% elif answer %}
@@ -79,7 +79,7 @@
                                 {% endif %}
                             {% endif %}
                         </div>
-                        {% if collection.show_title_post %}
+                        {% if collection.show_title_post and answer and answer.completed or collection.show_title_post and cid_user_exam.completed %}
                             <div class="small text-muted">
                                 {{ question.case }}
                             </div>