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

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

{% block content %}

    <div class="container-fluid">
        <h2>My Series</h2>
        <details>
            <summary>
                <h4>Filter</h4>
            </summary>
            <div id="view-filter-options">
                <form action="" method="get">
                    {{ filter.form }}
                    <input class="btn btn-primary btn-sm mt-1 mb-1" type="submit" />
                </form>
            </div>
            View my <a href='{% url "atlas:case_view" %}?author={{request.user.id}}'>cases</a>.
        </details>

        <details class="mt-3">
            <summary>
                <strong>Actions</strong>
            </summary>
            <form id="bulk-delete-form" method="post" action="{% url 'atlas:series_bulk_delete' %}">
                {% csrf_token %}
                <button type="submit" class="btn btn-danger mb-2" onclick="return confirm('Delete selected series?');">
                    Delete Selected
                </button>
            </form>
        </details>
        {% render_table table %}
    </div>

    <script>
        document.getElementById('bulk-delete-form').addEventListener('submit', function(e) {
    // Remove any previously added hidden inputs
            document.querySelectorAll('#bulk-delete-form input[name="series_ids"]').forEach(el => el.remove());

    // Find all checked checkboxes
            const checked = document.querySelectorAll('input[name="selection"]:checked');
            if (checked.length === 0) {
                alert("Please select at least one series to delete.");
                e.preventDefault();
                return false;
            }
    // Add hidden inputs for each checked series
            checked.forEach(cb => {
                const hidden = document.createElement('input');
                hidden.type = 'hidden';
                hidden.name = 'series_ids';
                hidden.value = cb.value;
                this.appendChild(hidden);
            });
        });
    </script>

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

{% block js %}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
        });
    </script>
{% endblock %}


{% block css %}
    <style>
    </style>
{% endblock css %}