{% extends 'generic/examcollection_base.html' %}

{% block content %}

    <div class="container py-4">
        <div class="row align-items-start mb-3">
            <div class="col">
                <h1 class="h3 mb-0">{{ object.name }} {% if object.date %}<small class="text-muted">[{{ object.date }}]</small>{% endif %}</h1>
                <div class="small text-muted mt-1">Authors: {{ object.get_authors }}</div>
            </div>
            <div class="col-auto">
                <div class="btn-group" role="group" aria-label="collection-actions">
                    <a class="btn btn-outline-primary btn-sm" href="{% url 'generic:examcollection_edit' object.pk %}"><i class="bi bi-pencil"></i> Edit</a>
                    <a class="btn btn-outline-secondary btn-sm" href="{% url 'generic:examcollection_clone' object.pk %}"><i class="bi bi-files"></i> Clone</a>
                    <a class="btn btn-outline-danger btn-sm" href="{% url 'generic:examcollection_delete' object.pk %}"><i class="bi bi-trash"></i> Delete</a>
                </div>
            </div>
        </div>

        <p class="lead small text-muted">This collection contains the following exams</p>




        {% if object.anatomy_count %}
            <div class="card mb-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <strong>Anatomy Exams</strong>
                    <div class="btn-group">
                        <a class="btn btn-sm btn-outline-secondary" href="{% url 'anatomy:exam_list_collection' object.pk %}">View exam list</a>
                        <button class="btn btn-sm btn-outline-primary" hx-get="{% url 'generic:exam_collection_add_marker' object.pk 'anatomy' %}" hx-target=".add-marker" hx-swap="innerHTML">Add marker</button>
                    </div>
                </div>
                <div class="card-body p-2" hx-get="{% url 'generic:exam_collection_exams_partial' object.pk 'anatomy' %}" hx-trigger="revealed" hx-swap="innerHTML">
                    <div class="d-flex align-items-center">
                        <div class="placeholder small text-muted">Loading anatomy exams…</div>
                        <div class="exam-loading ms-2 d-none"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></div>
                    </div>
                </div>
                <div class="card-footer add-marker small"></div>
            </div>
        {% endif %}

        {% if object.longs_count %}
            <div class="card mb-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <strong>Longs Exams</strong>
                    <div class="btn-group">
                        <a class="btn btn-sm btn-outline-secondary" href="{% url 'longs:exam_list_collection' object.pk %}">View exam list</a>
                        <button class="btn btn-sm btn-outline-primary" hx-get="{% url 'generic:exam_collection_add_marker' object.pk 'longs' %}" hx-target=".add-marker" hx-swap="innerHTML">Add marker</button>
                    </div>
                </div>
                <div class="card-body p-2" hx-get="{% url 'generic:exam_collection_exams_partial' object.pk 'longs' %}" hx-trigger="revealed" hx-swap="innerHTML">
                    <div class="d-flex align-items-center">
                        <div class="placeholder small text-muted">Loading longs exams…</div>
                        <div class="exam-loading ms-2 d-none"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></div>
                    </div>
                </div>
                <div class="card-footer add-marker small"></div>
            </div>
        {% endif %}

        {% if object.rapids_count %}
            <div class="card mb-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <strong>Rapids Exams</strong>
                    <div class="btn-group">
                        <a class="btn btn-sm btn-outline-secondary" href="{% url 'rapids:exam_list_collection' object.pk %}">View exam list</a>
                        <button class="btn btn-sm btn-outline-primary" hx-get="{% url 'generic:exam_collection_add_marker' object.pk 'rapids' %}" hx-target=".add-marker" hx-swap="innerHTML">Add marker</button>
                    </div>
                </div>
                <div class="card-body p-2" hx-get="{% url 'generic:exam_collection_exams_partial' object.pk 'rapids' %}" hx-trigger="revealed" hx-swap="innerHTML">
                    <div class="d-flex align-items-center">
                        <div class="placeholder small text-muted">Loading rapids exams…</div>
                        <div class="exam-loading ms-2 d-none"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></div>
                    </div>
                </div>
                <div class="card-footer add-marker small"></div>
            </div>
        {% endif %}

        {% if object.shorts_count %}
            <div class="card mb-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <strong>Shorts Exams</strong>
                    <div class="btn-group">
                        <a class="btn btn-sm btn-outline-secondary" href="{% url 'shorts:exam_list_collection' object.pk %}">View exam list</a>
                        <button class="btn btn-sm btn-outline-primary" hx-get="{% url 'generic:exam_collection_add_marker' object.pk 'shorts' %}" hx-target=".add-marker" hx-swap="innerHTML">Add marker</button>
                    </div>
                </div>
                <div class="card-body p-2" hx-get="{% url 'generic:exam_collection_exams_partial' object.pk 'shorts' %}" hx-trigger="revealed" hx-swap="innerHTML">
                    <div class="d-flex align-items-center">
                        <div class="placeholder small text-muted">Loading shorts exams…</div>
                        <div class="exam-loading ms-2 d-none"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></div>
                    </div>
                </div>
                <div class="card-footer add-marker small"></div>
            </div>
        {% endif %}

        {% if object.physics_count %}
            <div class="card mb-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <strong>Physics Exams</strong>
                    <a class="btn btn-sm btn-outline-secondary" href="{% url 'physics:exam_list_collection' object.pk %}">View exam list</a>
                </div>
                <div class="card-body p-2" hx-get="{% url 'generic:exam_collection_exams_partial' object.pk 'physics' %}" hx-trigger="revealed" hx-swap="innerHTML">
                    <div class="d-flex align-items-center">
                        <div class="placeholder small text-muted">Loading physics exams…</div>
                        <div class="exam-loading ms-2 d-none"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></div>
                    </div>
                </div>
            </div>
        {% endif %}

        {% if object.sbas_count %}
            <div class="card mb-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <strong>SBAs Exams</strong>
                    <a class="btn btn-sm btn-outline-secondary" href="{% url 'sbas:exam_list_collection' object.pk %}">View exam list</a>
                </div>
                <div class="card-body p-2" hx-get="{% url 'generic:exam_collection_exams_partial' object.pk 'sbas' %}" hx-trigger="revealed" hx-swap="innerHTML">
                    <div class="d-flex align-items-center">
                        <div class="placeholder small text-muted">Loading SBAs exams…</div>
                        <div class="exam-loading ms-2 d-none"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></div>
                    </div>
                </div>
            </div>
        {% endif %}

        <br/>
        <div class="d-flex gap-2 mt-3">
            <div id="bulk-add-groups">
                <button class="btn btn-sm btn-outline-secondary" hx-get="{% url 'generic:exam_collection_bulk_add_groups' object.pk %}" hx-target="#bulk-add-groups" hx-swap="innerHTML">Add groups to exams</button>
            </div>

            <div id="add-user">
                <button class="btn btn-sm btn-outline-secondary" hx-get="{% url 'generic:exam_collection_add_author' object.pk %}" hx-target="#add-user" hx-swap="innerHTML">Add author to all exams</button>
            </div>
        </div>

        {% include 'exam_overview_js.html' %}

    </div> {# .container end #}

{% endblock %}

{% block css %}
    <style>
        /* subtle visual tweaks for the new layout */
        .card-body .exam-list { margin: 0; }
        .card .card-footer.add-marker { min-height: 1.5rem; }
        .card-header strong { font-weight: 600; }
    </style>
{% endblock %}