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

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

{% block content %}
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <h2>Accounts</h2>
        <div class="d-flex gap-2">
            <a href='{% url "trainees" %}' class="btn btn-outline-info">
                <i class="bi bi-list-ul me-1"></i>Trainees list
            </a>
            <a href="{% url 'create_user' %}" class="btn btn-primary">
                <i class="bi bi-person-plus me-1"></i>Create single user
            </a>
            <a href="{% url 'accounts_bulk_create' %}" class="btn btn-outline-primary">
                <i class="bi bi-people me-1"></i>Bulk create users
            </a>
        </div>
    </div>

    <details class="bulk-edit card mb-3">
        <summary class="card-header cursor-pointer fw-bold">
            Bulk edit
        </summary>
        <div class="card-body">
            <div id="htmx-info" class="mb-2"></div>
            <div id="htmx-options" class="mb-3"></div>
            <div class="d-flex flex-wrap gap-2">
                <button id="bulk-delete-supervisors-button"
                        class="btn btn-sm btn-danger"
                        title="Deletes the supervisors of all selected users"
                        hx-post="{% url 'generic:users_bulk_delete_supervisors' %}"
                        hx-include="[name='selection']"
                        hx-confirm="This will delete supervisors from all selected users, are you sure you wish to continue?"
                        hx-target="#htmx-info"
                        _='on click put "" into #htmx-options'
                >Delete supervisors</button>
                <button id="bulk-edit-grade-button"
                        class="btn btn-sm btn-secondary"
                        hx-post="{% url 'generic:users_bulk_edit' %}"
                        hx-include="[name='selection']"
                        hx-target="#htmx-options"
                        title="Changes the selected users grade."
                >Edit grade</button>
                <button id="bulk-add-group-button"
                        class="btn btn-sm btn-secondary"
                        hx-post="{% url 'generic:users_bulk_edit' %}"
                        hx-include="[name='selection']"
                        hx-target="#htmx-options"
                        title="Adds the selected user to a group."
                >Add group</button>
                <button id="bulk-remove-group-button"
                        class="btn btn-sm btn-secondary"
                        hx-post="{% url 'generic:users_bulk_edit' %}"
                        hx-include="[name='selection']"
                        hx-target="#htmx-options"
                        title="Removes the selected user from a group."
                >Remove group</button>
                <button id="bulk-deactivate-user-button"
                        class="btn btn-sm btn-warning text-dark"
                        hx-post="{% url 'generic:users_bulk_edit' %}"
                        hx-include="[name='selection']"
                        hx-target="#htmx-options"
                        hx-confirm="This will deactivate all selected users, are you sure you wish to continue?"
                        title="Deactivates the selected users"
                >Deactivate</button>
            </div>
        </div>
    </details>

    <div id="table-div">
        <span id="manage-span">
            {% render_table table %}
        </span>
    </div>
    {% include "generic/partials/filter_bar.html" with filter=filter app_name=app_name collapse_id="bottom-filter-body" %}

{% endblock %}