{% extends 'atlas/exams.html' %}

{% load partials %}

{% partialdef casedetails-management-links %}

<div class="btn-toolbar" role="toolbar" aria-label="Case management links">
    {% include 'atlas/partials/casedetails_management_links.html' %}
</div>

{% endpartialdef %}

{% block content %}

<div class="container">
    <div class="card mb-4">
        <div class="card-body">
            <div class="row">
                <div class="col-md-8">
                    <h2 class="card-title mb-2">{{ collection.name }}</h2>

                    {% include 'exam_notes.html' %}

                    <p class="mb-1">
                        <span class="badge bg-info text-dark me-2">{{ collection.exam_mode }}</span>
                        <small class="text-muted">(open access: {{ collection.exam_open_access }})</small>
                    </p>

                    <p class="mb-2">
                        {% include "generic/partials/exams/exam_status.html#publish-results" %}
                        {% include "generic/partials/exams/exam_status.html#exam-active" %}
                    </p>

                    <p class="mb-1">
                        <span class="badge bg-secondary me-2">{{ collection.get_collection_type_display }}</span>
                        <span class="badge bg-light text-dark me-2">Self review: {{ collection.self_review }}</span>
                        {% if collection.open_access %}
                            <span class="badge bg-success">Open</span>
                        {% else %}
                            <span class="badge bg-warning text-dark">Restricted</span>
                        {% endif %}
                    </p>

                    {% if collection.prerequisites.exists %}
                        <div class="mt-3 mb-2">
                            <strong>Prerequisites</strong>
                            <ul class="mb-0">
                                {% for prereq in collection.prerequisites.all %}
                                    <li><a href="{% url 'atlas:collection_detail' prereq.pk %}">{{ prereq.name }}</a></li>
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %}
                </div>

                <div class="col-md-4 d-flex flex-column align-items-md-end mt-3 mt-md-0">
                    <div class="mb-2 w-100 text-md-end">
                        {% if collection.collection_type == "VIV" %}
                            <a href="{% url 'atlas:collection_viva' collection.pk %}" class="btn btn-primary mb-2">Start Viva</a>
                        {% else %}
                            <div class="d-inline-block">
                                <a class="btn btn-outline-secondary btn-sm" href="{{ collection.get_take_url }}" id="take-url-link">Open</a>
                                <button
                                    _="on click
                                         writeText(#take-url-link's href) on navigator.clipboard
                                         put 'copied url!' into me
                                         wait 1s
                                         put 'copy link' into me"
                                    class="btn btn-sm btn-outline-secondary ms-1">Copy link</button>
                            </div>
                        {% endif %}
                    </div>

                    {% if collection.prerequisites.exists %}
                        <div class="w-100 text-md-end">
                            <button
                                title="Sync users from all prerequisite collections into this collection"
                                hx-post="{% url 'atlas:collection_sync_prerequisite_users' collection.pk %}"
                                hx-swap="outerHTML"
                                class="btn btn-sm btn-secondary"
                            >Sync prerequisite users</button>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <h3 class="mb-3">Cases</h3>

            <ol id="full-question-list" class="sortable list-group list-group-numbered">
                {% for casedetail in casesdetails %}
                    {% include 'atlas/partials/case_list_item.html' %}
                {% endfor %}
            </ol>
        </div>
    </div>

    {% if can_edit %}
        <div class="row mt-4">
            <div class="col-12 d-flex gap-2">
                <button id='button-edit-order'
                                title='click and drag questions to change order'
                                data-posturl="{% url 'atlas:exam_json_edit' pk=collection.pk %}"
                                class="btn btn-sm btn-outline-secondary">
                        Edit case order / Remove cases
                </button>

                <button id='button-add-case'
                             title='click to add a case to this collection'
                             hx-get="{% url 'atlas:add_case_to_collection' collection.pk %}" hx-swap="innerHTML" hx-target="#case-list"
                             class="btn btn-sm btn-secondary">
                        Add case
                </button>

                <div id='case-list'></div>
            </div>
        </div>

        <div class="row mt-3">
            <div class="col-12">
                <details>
                    <summary>Answer management</summary>

                    <div class="alert alert-danger mt-3">
                        <p class="mb-1">Manage answers for this collection.</p>
                        <small class="text-muted">Please note these are permanent and cannot be undone.</small>
                    </div>

                    <div class="d-flex gap-2">
                        <button title="This will clear all user answers and attempts"
                                        hx-post="{% url 'atlas:collection_reset_answers' collection.pk %}"
                                        hx-swap="outerHTML"
                                        hx-confirm="Are you sure you want to reset all answers? This action cannot be undone."
                                        class="btn btn-danger btn-sm"
                        >Reset all answers</button>

                        <button title="This will specific user answers and attempts"
                                        hx-post="{% url 'atlas:collection_reset_answers_user_list' collection.pk %}"
                                        hx-swap="innerHTML"
                                        hx-target="#user-list"
                                        class="btn btn-warning btn-sm">
                                Reset user answers</button>
                    </div>

                    <div id="user-list" class="mt-3"></div>
                </details>
            </div>
        </div>
    {% endif %}

    {% include 'exam_overview_js.html' %}
</div>

{% endblock %}