
<div class="container-fluid mb-3">
    <div class="row align-items-start">
        <div class="col-12 col-md-8">
            {# Responsive: title to left, action buttons (include) to the right on md+ #}
            <div class="d-flex justify-content-between align-items-start flex-column flex-md-row mb-1">
                <div>
                    <h1 class="h4 mb-1">Exam: {{ exam }}</h1>
                </div>
{% comment %}                 <div class="mt-2 mt-md-0">
                    {% include "generic/exam_link_headers.html" %}
                </div> {% endcomment %}
            </div>
            {% include 'exam_notes.html' %}

            {% if exam.examcollection %}
                <div class="mb-2">Part of collection: <a href="{{ exam.examcollection.get_absolute_url }}">{{ exam.examcollection }}</a></div>
            {% endif %}

            {% if exam.recreate_json %}
                <div class="alert alert-warning" role="alert">
                    Exam JSON may be out of date. <a href="{% url exam.get_app_name|add:':exam_json_recreate' pk=exam.pk %}">Force refresh</a>
                </div>
            {% endif %}

            {% if exam.exam_mode and not exam.exam_open_access %}
                {% if not exam.cid_user_groups.count and not exam.user_user_groups.count %}
                    <div class="alert alert-danger" role="alert">
                        This exam does not have any user / cid groups added.
                    </div>
                    {% if not candidate_count.0 and not candidate_count.1 %}
                        <div class="alert alert-danger" role="alert">This exam does not have any candidates.</div>
                    {% endif %}
                {% endif %}
            {% endif %}

            {% if exam.archive %}
                <div class="alert alert-info" role="alert">This exam is archived. Results and submitted answers will not be available to candidates (supervisors can still view).</div>
            {% endif %}

            <div class="mt-2 small text-muted">

                This exam has <strong>{{ question_number }}</strong> questions &nbsp;•&nbsp;
                Time limit: <strong>{{ exam.time_limit }}</strong> seconds (<span title="Time per question: {% widthratio exam.time_limit question_number 1 %} seconds">1Q</span>)
            </div>

            <div class="mt-2 small text-muted">Author(s): {% for author in exam.author.all %}{{ author }}{% if not forloop.last %}, {% endif %}{% endfor %}</div>

            <div class="mt-2">
                Exam mode: <strong>{{ exam.exam_mode }}</strong>
                {% if exam.exam_mode %}
                    {% if exam.exam_open_access %}
                        <div class="small text-muted">Available to all registered users.</div>
                    {% else %}
                        {# Improved candidate counts: use compact buttons with badges and icons; stack on xs, inline on md+ #}
                        <div class="small">
                            <div class="d-flex flex-column flex-md-row align-items-start align-items-md-center gap-2">
                                <div class="text-muted d-none d-md-block me-md-2">Candidates:</div>

                                <a href="{{ exam.get_cid_edit_url }}" class="btn btn-sm btn-outline-primary d-inline-flex align-items-center" title="CID candidates">
                                    <i class="bi bi-person-badge" aria-hidden="true"></i>
                                    <span class="ms-1 d-none d-sm-inline">CID</span>
                                    <span class="badge bg-secondary ms-2" aria-label="CID candidates count">{{ candidate_count.0 }}</span>
                                </a>

                                <a href="{{ exam.get_user_edit_url }}" class="btn btn-sm btn-outline-success d-inline-flex align-items-center" title="User candidates">
                                    <i class="bi bi-people" aria-hidden="true"></i>
                                    <span class="ms-1 d-none d-sm-inline">Users</span>
                                    <span class="badge bg-secondary ms-2" aria-label="User candidates count">{{ candidate_count.1 }}</span>
                                </a>
                            </div>
                        </div>
                    {% endif %}
                {% endif %}
            </div>
        </div>

        <div class="col-12 col-md-4">
            {# Cards stack vertically on mobile, align on md+ using gap utilities #}
            <div class="d-flex flex-column gap-2">
                <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" %}
                            {% 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 %}
                            {% if exam.end_date %}/ End: {{ exam.end_date }}{% endif %}
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body p-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <div title="Defines if this exam is freely available to all users.">
                                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>
                        <div class="mt-1">
                            {% for marker in exam.markers.all %}
                                <span class="d-inline-block small me-1">{{ marker }}</span>{% if not forloop.last %},{% endif %}
                            {% empty %}
                                <div class="small text-muted">No additional markers.</div>
                            {% endfor %}
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-body p-2 small">
                        Supervisor visible: <strong>{{ exam.results_supervisor_visible }}</strong>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header p-2" title="Allow bulk setting of question open access status. Note: questions and exams have different open access settings.">
                        {# Use d-block on small screens so the summary text wraps nicely; md uses flex for spacing #}
                        <a class="d-block d-md-flex justify-content-between align-items-center text-decoration-none text-reset" data-bs-toggle="collapse" data-bs-target="#open-access-bulk" role="button" aria-expanded="false" aria-controls="open-access-bulk">
                            <small>Open access (questions)</small>
                            <small class="text-muted">Expand to change selected questions open access status</small>
                        </a>
                    </div>
                    <div class="card-body p-2">
                        <div class="collapse" id="open-access-bulk">
                            <form hx-post="{% url 'generic:generic_exam_set_open_access' %}" hx-target="#action-result" hx-swap="innerHTML" class="row g-2 align-items-center">
                                <input type="hidden" name="type" value="{{exam.app_name}}" />
                                <input type="hidden" name="exam_id" value="{{ exam.pk }}" />
                                <div class="col-12 d-flex flex-column flex-md-row gap-2 justify-content-md-end">
                                    <button class="btn btn-sm btn-outline-success" type="submit" name="set_open_access" value="true" hx-include="input[name='selection']:checked">Set Open Access = True</button>
                                    <button class="btn btn-sm btn-outline-danger" type="submit" name="set_open_access" value="false" hx-include="input[name='selection']:checked">Set Open Access = False</button>
                                    <button class="btn btn-sm btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#open-access-bulk">Close</button>
                                </div>
                            </form>
                            <div id="action-result" class="mt-2"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-12">
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            {% if can_edit and exam.exam_mode %}
                <div class="card mb-2">
                    <div class="card-body p-2">
                        <details class="mb-0">
                            <summary class="small">Answer management</summary>
                            <div class="mt-2">
                                <div class="alert alert-danger small mb-2">
                                    <i class="bi bi-exclamation-diamond"></i> Manage answers for this collection. These actions are permanent.
                                </div>
                                <div>
                                    <button class="btn btn-sm btn-danger" title="This will clear all user answers and attempts"
                                            hx-post="{% url exam.get_app_name|add:':exam_reset_answers' exam.pk %}"
                                            hx-swap="outerHTML"
                                            hx-confirm="Are you sure you want to reset all answers? This action cannot be undone.">Reset all answers</button>
                                </div>
                            </div>
                        </details>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>

    {# Authors and supervisor visibility moved earlier in the header; duplicate block removed #}
</div>

{% block css %}
    <style>
        .answer-management[open] { border: 1px dashed lightgrey; }
    </style>
{% endblock css %}


