{% extends 'base.html' %}
{% load buttons %}
{% load helpers %}
{% load perms %}
{% load plugins %}
{% load static %}
{% load ui_framework %}

{% block document_title_extra %}{% saved_view_title "plain" %}{% endblock %}

{% block header_messages %}
    {# Create a placeholder for header messages but do not actually render the current messages; #}
    {# they will be retrieved and populated by a subsequent HTMX request #}
    {% include "inc/header_messages.html" with messages=None %}
{% endblock header_messages %}

{% block title %}{{ block.super }}{% saved_view_title %}{% endblock %}

{% block breadcrumbs_wrapper %}
    {% captureas default_breadcrumbs %}
        {% if list_url %}
            <li class="breadcrumb-item"><a href="{% url list_url %}">{{ title }}</a></li>
        {% endif %}
    {% endcaptureas %}

    {% captureas block_breadcrumbs %}
        {% block breadcrumbs %}
            {% if list_url %}
                <li class="breadcrumb-item"><a href="{% url list_url %}">{{ title }}</a></li>
            {% endif %}
            {% block extra_breadcrumbs %}{% endblock extra_breadcrumbs %}
        {% endblock breadcrumbs %}
    {% endcaptureas %}

    {% render_breadcrumbs default_breadcrumbs block_breadcrumbs %}
{% endblock breadcrumbs_wrapper %}

{% block content %}
    <div class="align-items-center d-flex gap-8 justify-content-end mb-16 d-print-none">
        {% block buttons %}{% endblock %}
        {% plugin_buttons content_type.model_class 'list' %}

        <div class="btn-group">
            {% if permissions.add and 'add' in action_buttons %}
                {% add_button content_type.model_class|validated_viewname:"add" verbose_name=model|meta:"verbose_name"|bettertitle %}
                <button type="button" id="actions-dropdown" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
                    <span class="visually-hidden">Toggle Dropdown</span>
                    <span class="mdi mdi-chevron-down"></span>
                </button>
            {% elif permissions.add and 'import' in action_buttons %}
                <button type="button" id="actions-dropdown" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
                    Actions
                    <span class="mdi mdi-chevron-down" aria-hidden="true"></span>
                </button>
            {% elif 'export' in action_buttons %}
                <button type="button" id="actions-dropdown" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
                    Actions
                    <span class="mdi mdi-chevron-down" aria-hidden="true"></span>
                </button>
            {% endif %}
            <ul class="dropdown-menu dropdown-menu-end" role="menu">
                {% if permissions.add and 'import' in action_buttons %}
                    {% block import_list_element %}
                        {% job_import_button content_type list_element=True%}
                    {% endblock import_list_element %}
                {% endif %}
                {% if permissions.add and 'import' in action_buttons and 'export' in action_buttons %}
                    <li class="dropdown-divider"></li>
                {% endif %}
                {% if 'export' in action_buttons %}
                    {% block export_list_element %}
                        {% export_button content_type list_element=True %}
                    {% endblock export_list_element %}
                {% endif %}
            </ul>
        </div>
        {% comment %} TODO: 3.0 Remove legacy import_button and export button {% endcomment %}
        {% if permissions.add and 'import' in action_buttons %}
            {% block import_button %}
            {% endblock import_button %}
        {% endif %}
        {% if 'export' in action_buttons %}
            {% block export_button %}
            {% endblock export_button %}
        {% endif %}
        <div class="align-items-center d-flex gap-4">
            {% if model.is_saved_view_model %}
                <button
                    type="button"
                    class="btn position-relative text-secondary"
                    data-nb-toggle="drawer"
                    data-nb-target="#SavedViews_drawer"
                    title="Saved Views"
                    aria-expanded="false"
                    aria-controls="SavedViews_drawer"
                >
                    <span class="mdi mdi-view-compact-outline" aria-hidden="true"></span>
                    <span class="visually-hidden">Saved Views</span>
                    {% if current_saved_view %}
                        <span
                            aria-hidden="true"
                            {% if current_saved_view == user_default_saved_view %}
                                class="nb-btn-indicator mdi mdi-star"
                                data-bs-toggle="tooltip"
                                data-bs-title="Your default saved view"
                            {% elif current_saved_view == global_saved_view %}
                                class="nb-btn-indicator mdi mdi-earth"
                                data-bs-toggle="tooltip"
                                data-bs-title="Global default saved view"
                            {% else %}
                                class="nb-btn-indicator"
                            {% endif %}
                        ></span>
                    {% endif %}
                </button>
            {% endif %}
            {% if filter_form or dynamic_filter_form %}
                <button
                    type="button"
                    class="btn position-relative text-secondary"
                    data-nb-toggle="drawer"
                    data-nb-target="#FilterForm_drawer"
                    title="Add Filters"
                    id="id__filterbtn"
                    aria-controls="FilterForm_drawer"
                    aria-expanded="false"
                >
                    <span class="mdi mdi-filter" aria-hidden="true"></span>
                    <span class="visually-hidden">Add Filters</span>
                    {% if filter_params %}
                        <span aria-hidden="true" class="nb-btn-indicator"></span>
                    {% endif %}
                </button>
            {% endif %}
        </div>
    </div>

    {% block header_extra %}{% endblock %}

    <div hx-select="#object_table"
         {% if permissions.change or permissions.delete %}
             hx-select-oob="#header_messages,#paginator,#select_all_box"
         {% else %}
             hx-select-oob="#header_messages,#paginator"
         {% endif %}
    >
        {% block table %}
            {% with bulk_edit_url=content_type.model_class|validated_viewname:"bulk_edit" bulk_delete_url=content_type.model_class|validated_viewname:"bulk_delete" %}
                {% if permissions.change or permissions.delete %}
                    <form id="object_list_form" method="post" class="form form-horizontal">
                        {% csrf_token %}
                        <input type="hidden" name="return_url" value="{% if return_url %}{{ return_url }}{% else %}{{ request.path }}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}{% endif %}" />
                        <span id="select_all_box" class="visually-hidden card d-print-none">
                            {% comment %}Replaced through HTMX call below{% endcomment %}
                        </span>
                        <div id="object_table_wrapper" hx-get="" hx-params="*" hx-trigger="load">
                            {% include table_template|default:'panel_table.html' with table_id="object_table" %}
                        </div>

                        <div class="d-print-none mt-16 float-lg-start mt-lg-20" id="bulk-action-buttons">
                            {% consolidate_bulk_action_buttons %}
                            {% block bulk_buttons %}{% endblock %}
                        </div>
                    </form>
                {% else %}
                    <div id="object_table_wrapper" hx-get="" hx-params="*" hx-trigger="load">
                        {% include table_template|default:'panel_table.html' with table_id="object_table" %}
                    </div>
                {% endif %}
            {% endwith %}
            {% include 'inc/paginator.html' with paginator=table.paginator page=table.page %}
            <div class="clearfix"></div>
        {% endblock %}
    </div>
    {% if model.is_saved_view_model %}
        {% saved_view_modal request.GET.urlencode list_url model request %}
    {% endif %}
    {% dynamic_group_assignment_modal request=request content_type=content_type %}
{% endblock %}

{% block drawer %}
    {% filter_form_drawer filter_form dynamic_filter_form model_plural_name=title filter_params=filter_params %}
    {% if table %}
        {% table_config_form table %}
    {% endif %}
    <section class="nb-drawer" tabindex="-1" id="SavedViews_drawer">
        <div class="nb-drawer-header">
            <h1>Saved Views</h1>
            <button type="button" class="btn-close" data-nb-dismiss="drawer" aria-label="Close"></button>
        </div>
        <div class="nb-drawer-body pb-20 px-20">
            <div class="align-items-start vstack flex-grow-0 gap-10">
                {% if saved_views|length > 0 %}
                    <div class="dropdown w-100">
                        <button
                            class="btn btn-secondary dropdown-toggle align-items-center d-inline-flex justify-content-between w-100"
                            type="button"
                            data-bs-toggle="dropdown"
                            aria-expanded="false"
                        >
                            {% if current_saved_view %}
                                {{current_saved_view.name}}
                            {% else %}
                                <i>No saved view</i>
                            {% endif %}
                            <span class="mdi mdi-chevron-down"></span>
                            <span class="visually-hidden">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu w-100">
                            <li>
                                {% if not current_saved_view %}
                                    <button class="dropdown-item text-primary" type="button">
                                        <span class="mdi mdi-check" aria-hidden="true"></span>
                                        <i>No saved view</i>
                                    </button>
                                {% else %}
                                    <a class="dropdown-item" href="{% url list_url %}?clear_view=true">
                                        <span class="mdi mdi-card-remove-outline" aria-hidden="true"></span>
                                        <i>No saved view</i>
                                    </a>
                                {% endif %}
                            </li>
                            {% for saved_view in saved_views %}
                                <li>
                                    {% if saved_view == current_saved_view %}
                                        <button class="dropdown-item text-primary" type="button">
                                            <span class="mdi mdi-check" aria-hidden="true"></span>
                                            {{saved_view.name}}
                                            {% if saved_view == user_default_saved_view %}
                                                <span class="mdi mdi-star ms-auto" aria-hidden="true" data-bs-toggle="tooltip" data-bs-title="Your default" data-bs-fallback-placements="[&quot;top&quot;]"></span>
                                            {% elif saved_view == global_saved_view %}
                                                <span class="mdi mdi-earth ms-auto" aria-hidden="true" data-bs-toggle="tooltip" data-bs-title="Global default" data-bs-fallback-placements="[&quot;top&quot;]"></span>
                                            {% elif saved_view.is_shared %}
                                                <span class="mdi mdi-account-group ms-auto" aria-hidden="true" data-bs-toggle="tooltip" data-bs-title="Shared" data-bs-fallback-placements="[&quot;top&quot;]"></span>
                                            {% endif %}
                                        </button>
                                    {% else %}
                                        <a class="dropdown-item" href="{{ saved_view.get_absolute_url }}">
                                            <span class="mdi mdi-view-compact-outline" aria-hidden="true"></span>
                                            {{saved_view.name}}
                                            {% if saved_view == user_default_saved_view %}
                                                <span class="mdi mdi-star ms-auto" aria-hidden="true" data-bs-toggle="tooltip" data-bs-title="Your default" data-bs-fallback-placements="[&quot;top&quot;]"></span>
                                            {% elif saved_view == global_saved_view %}
                                                <span class="mdi mdi-earth ms-auto" aria-hidden="true" data-bs-toggle="tooltip" data-bs-title="Global default" data-bs-fallback-placements="[&quot;top&quot;]"></span>
                                            {% elif saved_view.is_shared %}
                                                <span class="mdi mdi-account-group ms-auto" aria-hidden="true" data-bs-toggle="tooltip" data-bs-title="Shared" data-bs-fallback-placements="[&quot;top&quot;]"></span>
                                            {% endif %}
                                        </a>
                                    {% endif %}
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                {% endif %}
            </div>
            {% if saved_views %}
                <hr class="border-top my-20" />
            {% endif %}
            <div class="align-items-start vstack gap-10">
                Actions:
                {% if current_saved_view %}
                    {% if current_saved_view.owner == user %}
                        <a class="btn btn-secondary" href="{% url 'extras:savedview_update_config' pk=current_saved_view.pk %}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}">
                            <span class="mdi mdi-content-save-outline me-4" aria-hidden="true"></span>Update Current
                        </a>
                    {% else %}
                        <span data-bs-toggle="tooltip" data-bs-title="You cannot update another user's saved view.">
                            <button class="btn btn-secondary" disabled type="button">
                                <span class="mdi mdi-content-save-outline me-4" aria-hidden="true"></span>Update Current
                            </button>
                        </span>
                    {% endif %}
                    <a class="btn btn-secondary" href="{% url 'extras:savedview_set_default' pk=current_saved_view.pk %}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}">
                        <span class="mdi mdi-star me-4" aria-hidden="true"></span>Set As My Default
                    </a>
                {% endif %}
                <a class="btn btn-secondary" href="" data-bs-toggle="modal" data-bs-target="#saved_view_modal">
                    <span class="mdi mdi-content-save-plus-outline me-4" aria-hidden="true"></span>Save As New
                </a>
                {% if current_saved_view %}
                    {% if current_saved_view.owner == user %}
                        <a class="btn btn-danger" href="{% url 'extras:savedview_delete' pk=current_saved_view.pk %}?return_url={{ request.path }}">
                            <span class="mdi mdi-trash-can-outline me-4" aria-hidden="true"></span>Delete Current
                        </a>
                    {% else %}
                        <span data-bs-toggle="tooltip" data-bs-title="You cannot delete another user's saved view.">
                            <button class="btn btn-danger" disabled type="button">
                                <span class="mdi mdi-trash-can-outline me-4" aria-hidden="true"></span>Delete Current
                            </button>
                        </span>
                    {% endif %}
                {% endif %}
            </div>
        </div>
    </section>
{% endblock drawer %}

{% block javascript %}
    <script src="{% static 'jquery/jquery.formset.js' %}"></script>
    <script>
        var clipboard = new ClipboardJS('.btn');

        clipboard.on('success', function (e) {});

        clipboard.on('error', function (e) {});

        // TODO: move this to a JS file that is auto-included by dynamic_group_assignment_modal templatetag
        $("#dynamic_group_assignment_modal").on("show.bs.modal", function (event) {
            const button = $(event.relatedTarget);
            const selected_or_all = button.data("objects");
            const pks_target = document.getElementById("dynamic_group_assignment_pks");
            pks_target.replaceChildren();
            if (selected_or_all == "all") {
                document.getElementById("dynamic_group_assignment_all").value = true;
            } else {
                document.getElementById("dynamic_group_assignment_all").value = "";
                const formData = new FormData(document.getElementById("object_list_form"));
                for (let pk of formData.getAll("pk")) {
                    let input = document.createElement("input");
                    input.setAttribute("type", "hidden");
                    input.setAttribute("name", "pk");
                    input.setAttribute("value", pk);
                    pks_target.append(input);
                }
            }
        });

        document.getElementById("dynamic_group_assignment_cancel").addEventListener("click", (e) => {
        // Clear form data on cancel, but not on "close" "x" button
            $("#dynamic_group_assignment_modal").modal("hide");
            document.getElementById("dynamic_group_assignment_all").value = "";
            document.getElementById("dynamic_group_assignment_pks").replaceChildren();
            document.getElementById("id_create_and_assign_to_new_group_name").value = "";
            $("#id_add_to_groups").val(null).trigger("change");
            $("#id_remove_from_groups").val(null).trigger("change");
        });

        // Keep "Saved Views" drawer open when saved views are swapped, updated, set as default, created, deleted, etc.
        (() => {
            document.addEventListener('DOMContentLoaded', () => {
                document.addEventListener('click', (event) => {
                    const anchor = event.target.closest('a');
                    const savedViewsDrawer = document.querySelector('#SavedViews_drawer');

                    if (anchor?.getAttribute('href') && savedViewsDrawer?.contains(anchor)) {
                        window.nb.history.saveState()
                    }
                });

                document.addEventListener('submit', (event) => {
                    const savedViewModal = document.querySelector('#saved_view_modal');

                    if (savedViewModal?.contains(event.target)) {
                        window.nb.history.saveState()
                    }
                });
            });
        })();

        document.body.addEventListener('htmx:responseError', (event) => {
            if (event.detail?.target?.id === 'object_table_wrapper' ||
                event.detail?.elt?.classList.contains("page-link") ||
                event.detail?.elt?.id === 'per_page'
            ) {
                document.querySelector("#object_table table").innerHTML = `
                    <div class="bg-danger-subtle text-center">
                        <strong>Failed to load table content.</strong>
                        The server responded with status: ${event.detail.xhr.status}
                    </div>
                `;
            }
        });
    </script>
{% endblock %}