From 07f121fb69b58ef5e6e069e1bd0c1ca493d5ac29 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 20 Oct 2025 23:03:40 +0100
Subject: [PATCH] Refactor exam status display to use buttons for publish
 results and exam active states, enhancing user interaction and visual
 clarity.

---
 .../generic/exam_overview_headers.html        | 12 ++--
 .../generic/partials/exams/exam_status.html   | 56 +++++++++++--------
 2 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/generic/templates/generic/exam_overview_headers.html b/generic/templates/generic/exam_overview_headers.html
index efd80d16..a2ca4913 100644
--- a/generic/templates/generic/exam_overview_headers.html
+++ b/generic/templates/generic/exam_overview_headers.html
@@ -53,10 +53,8 @@
                 <div class="card">
                     <div class="card-body p-2">
                         <div class="d-flex justify-content-between align-items-center">
-                            <div>
-                                Open access:
-                                <span class="fw-bold">{{ exam.open_access }}</span>
-                            </div>
+                            {% include "generic/partials/exams/exam_status.html#exam-active" %}
+                            {% include "generic/partials/exams/exam_status.html#publish-results" %}
                         </div>
                         <div class="mt-2 small text-muted">
                             {% if exam.start_date %}Start: {{ exam.start_date }}{% endif %}
@@ -67,11 +65,15 @@
                 <div class="card">
                     <div class="card-body p-2">
                         <div class="d-flex justify-content-between align-items-center">
-                            {% include "generic/partials/exams/exam_status.html#exam-active" %}
+                            <div>
+                                Open access:
+                                <span class="fw-bold">{{ exam.open_access }}</span>
+                            </div>
                         </div>
                     </div>
                 </div>
 
+
                 <div class="card">
                     <div class="card-body p-2">
                         <div class="small">Markers:</div>
diff --git a/generic/templates/generic/partials/exams/exam_status.html b/generic/templates/generic/partials/exams/exam_status.html
index b5a51885..9269219f 100644
--- a/generic/templates/generic/partials/exams/exam_status.html
+++ b/generic/templates/generic/partials/exams/exam_status.html
@@ -5,21 +5,25 @@
         <div class="me-2 small text-muted">Publish results</div>
         <div>
             {% if exam.publish_results %}
-                <span class="badge bg-success">Published</span>
+                <button
+                    class="btn btn-sm btn-success"
+                    hx-post="{% url exam.get_app_name|add:':exam_toggle_results_published' exam.pk %}"
+                    hx-swap="outerHTML"
+                    hx-target="#publish-results-status"
+                    title="Click to unpublish results"
+                    aria-label="Unpublish results"
+                >Published</button>
             {% else %}
-                <span class="badge bg-secondary">Unpublished</span>
+                <button
+                    class="btn btn-sm btn-secondary"
+                    hx-post="{% url exam.get_app_name|add:':exam_toggle_results_published' exam.pk %}"
+                    hx-swap="outerHTML"
+                    hx-target="#publish-results-status"
+                    title="Click to publish results"
+                    aria-label="Publish results"
+                >Unpublished</button>
             {% endif %}
         </div>
-        <div class="ms-auto">
-            <button
-                hx-post="{% url exam.get_app_name|add:':exam_toggle_results_published' exam.pk %}"
-                hx-swap="outerHTML"
-                hx-target="#publish-results-status"
-                class="btn btn-sm btn-outline-primary"
-            >
-                {% if exam.publish_results %}Unpublish{% else %}Publish{% endif %}
-            </button>
-        </div>
     </div>
 {% endpartialdef publish-results %}
 
@@ -29,20 +33,24 @@
         <div class="me-2 small text-muted">Exam active</div>
         <div>
             {% if exam.active %}
-                <span class="badge bg-success">Active</span>
+                <button
+                    class="btn btn-sm btn-success"
+                    hx-post="{% url exam.get_app_name|add:':exam_toggle_active' exam.pk %}"
+                    hx-swap="outerHTML"
+                    hx-target="#exam-active-status"
+                    title="Click to deactivate this exam"
+                    aria-label="Deactivate exam"
+                >Active</button>
             {% else %}
-                <span class="badge bg-secondary">Inactive</span>
+                <button
+                    class="btn btn-sm btn-secondary"
+                    hx-post="{% url exam.get_app_name|add:':exam_toggle_active' exam.pk %}"
+                    hx-swap="outerHTML"
+                    hx-target="#exam-active-status"
+                    title="Click to activate this exam"
+                    aria-label="Activate exam"
+                >Inactive</button>
             {% endif %}
         </div>
-        <div class="ms-auto">
-            <button
-                hx-post="{% url exam.get_app_name|add:':exam_toggle_active' exam.pk %}"
-                hx-swap="outerHTML"
-                hx-target="#exam-active-status"
-                class="btn btn-sm btn-outline-primary"
-            >
-                {% if exam.active %}Deactivate{% else %}Activate{% endif %}
-            </button>
-        </div>
     </div>
 {% endpartialdef exam-active %}
\ No newline at end of file