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

{% load render_table from django_tables2 %}
{% block content_container_class %}container-fluid content-wide px-3{% endblock %}
{% block css %}
{% endblock %}

{% block content %}

    <div class="container-fluid">
        <h2>Cases</h2>
        Quick filters:<br/>
        Show <a href='{% url "atlas:case_view" %}?author={{request.user.id}}'>my cases only</a>, <a href='{% url "atlas:case_view" %}'>all cases</a>
        View my <a href='{% url "atlas:case_view" %}?author={{request.user.id}}'>cases</a>.
        <form>
            <details id="actions-detail" class="mt-3">
                <summary>
                    <strong>Actions</strong>
                </summary>
                <div class="row mb-2">
                    <div class="col-auto">
                        <select id="collection-select" name="collection_id" class="form-select form-select-sm">
            <!-- Dynamically load collection options via HTMX -->
                            <option value="">Loading collections...</option>
                            <option hx-trigger="every 1s[document.getElementById('actions-detail').open] once" hx-get="{% url 'atlas:collection_options' %}" hx-target="#collection-select" hx-swap="innerHTML"></option>
                        </select>
                    </div>
                    <div class="col-auto">
                        <button id="add-to-collection-btn"
                                class="btn btn-sm btn-outline-primary"
                                hx-post="{% url 'atlas:add_cases_to_collection' %}"
                                hx-include="[name='selection']:checked, #collection-select"
                                hx-target="#action-result"
                                hx-swap="innerHTML"
                        >
                            Add selected cases to collection
                        </button>
                        <button id="remove-from-collection-btn"
                                class="btn btn-sm btn-outline-danger ms-2"
                                hx-post="{% url 'atlas:remove_cases_from_collection' %}"
                                hx-include="[name='selection']:checked, #collection-select"
                                hx-target="#action-result"
                                hx-swap="innerHTML"
                        >
                            Remove selected cases from collection
                        </button>
                        <br/>
                        <button id="set-open-access-btn"
                                class="btn btn-sm btn-outline-success ms-2"
                                hx-post="{% url 'atlas:set_open_access' %}"
                                hx-include="[name='selection']:checked"
                                hx-target="#action-result"
                                hx-swap="innerHTML"
                        >
                            Set Open Access
                        </button>
                        <button id="remove-open-access-btn"
                                class="btn btn-sm btn-outline-warning ms-2"
                                hx-post="{% url 'atlas:remove_open_access' %}"
                                hx-include="[name='selection']:checked"
                                hx-target="#action-result"
                                hx-swap="innerHTML"
                        >
                            Remove Open Access
                        </button>
                        <span id="action-result"></span>
                    </div>
                </div>
            </details>
            {% render_table table %}
        </form>

        {% include "generic/partials/page_size_form.html" %}
        {% include "generic/partials/filter_bar.html" with filter=filter app_name=app_name collapse_id="bottom-filter-body" %}

        <div id="exam-options"></div>
{% endblock %}