Enhance primary answer display with edit functionality and conditional rendering based on user permissions

anatomy/templates/anatomy/partials/primary_answer_display.html

@@ -1,25 +1,27 @@
 <div id="primary-answer-container" class="position-relative primary-answer-wrap py-1">
     <strong>{{ question.get_primary_answer }}</strong>
+    {% if can_edit %}
     <button
-        class="edit-primary-btn btn btn-sm btn-link text-muted position-absolute"
+        class="edit-primary-btn btn btn-sm btn-outline-secondary position-absolute"
         style="right:0; top:0;"
         hx-get="{% url 'anatomy:primary_answer_htmx' pk=question.pk %}"
         hx-target="#primary-answer-container"
         hx-swap="outerHTML"
         aria-label="Edit primary answer"
     >
-        Edit
+        Edit primary answer
     </button>
+    {% endif %}
 
     <style>
-    /* Scoped styles for primary answer edit control */
+    /* Scoped styles for primary answer edit control: match outline-secondary look */
     .primary-answer-wrap .edit-primary-btn {
-            opacity: 0.55;
+        opacity: 0.9;
-            transition: opacity 120ms ease, color 120ms ease;
+        transition: opacity 120ms ease, transform 120ms ease;
     }
     .primary-answer-wrap:hover .edit-primary-btn {
         opacity: 1;
-            color: inherit;
+        transform: none;
     }
     </style>
 </div>

anatomy/templates/anatomy/question_detail.html

@@ -42,7 +42,14 @@
                         <div id="primary-answer-container" hx-get="{% url 'anatomy:primary_answer_htmx' pk=question.pk %}" hx-trigger="load" hx-swap="outerHTML"></div>
                     {% endif %}
 
-                    <h6>Answers</h6>
+                    <div class="d-flex justify-content-between align-items-start">
+                        <h6 class="mb-0">Answers</h6>
+                        <div>
+                            {% if can_edit %}
+                            <a class="btn btn-sm btn-outline-secondary" href="{% url 'anatomy:question_answer_update' pk=question.pk %}">Edit answers</a>
+                            {% endif %}
+                        </div>
+                    </div>
                     <details class="mb-3">
                         <summary class="small">Show answers</summary>
                         <table class="table table-sm mt-2">
@@ -69,7 +76,7 @@
                                         </td>
                                         <td>{{ answer.get_status_display|default:answer.status }}</td>
                                         <td>
-                                            {% if answer.proposed %}
+                                            {% if answer.proposed and can_edit %}
                                                 <div class="btn-group btn-group-sm" role="group">
                                                     <button class="btn btn-outline-success accept-button" data-aid={{answer.id}} hx-get="{% url 'anatomy:confirm_answer' answer.id %}" title="Accept">Accept</button>
                                                     <button class="btn btn-outline-danger delete-button" data-aid={{answer.id}} hx-get="{% url 'anatomy:delete_answer' answer.id %}" title="Delete">Delete</button>

anatomy/views.py

@@ -1697,17 +1697,17 @@ def primary_answer_htmx(request, pk: int):
                     return HttpResponse("Invalid answer choice", status=400)
 
             # return display fragment
-            return render(request, "anatomy/partials/primary_answer_display.html", {"question": question})
+            return render(request, "anatomy/partials/primary_answer_display.html", {"question": question, "can_edit": question.can_edit(request.user)})
         else:
             return HttpResponse("Invalid form", status=400)
 
     # Handle cancel request to restore original state
     if request.method == "GET" and request.GET.get("cancel"):
         if question.primary_answer:
-            return render(request, "anatomy/partials/primary_answer_display.html", {"question": question})
+            return render(request, "anatomy/partials/primary_answer_display.html", {"question": question, "can_edit": question.can_edit(request.user)})
         else:
-            return render(request, "anatomy/partials/primary_answer_empty.html", {"question": question})
+            return render(request, "anatomy/partials/primary_answer_empty.html", {"question": question, "can_edit": question.can_edit(request.user)})
 
     # GET - render form
     form = PrimaryAnswerForm(question=question)
-    return render(request, "anatomy/partials/primary_answer_form.html", {"form": form, "question": question})
+    return render(request, "anatomy/partials/primary_answer_form.html", {"form": form, "question": question, "can_edit": question.can_edit(request.user)})