{% 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 %}
    <div class="row noprint">
        <div class="{% if search_form %}col-sm-8 col-md-9 {% else %} col-md-12 {% endif %}">
            {% if breadcrumbs is not None %}
                {% render_breadcrumbs %}
            {% else %}
                {# TODO: remove this fragment after breadcrumbs implementation in generic views like ConsoleConnectionsListView #}
                <ol class="breadcrumb">
                    {% block breadcrumbs %}
                        {% if list_url %}
                            <li><a href="{% url list_url %}">{{ title }}</a></li>
                        {% endif %}
                        {% block extra_breadcrumbs %}{% endblock extra_breadcrumbs %}
                    {% endblock breadcrumbs %}
                </ol>
            {% endif %}
        </div>
        {% if search_form %}
        <div class="col-sm-4 col-md-3">
            <form action="#" method="get" id="search-form">
                <div class="input-group">
                    {{ search_form.q }}
                    <span class="input-group-btn">
                        <button type="submit" class="btn btn-primary">
                            <i class="mdi mdi-magnify"></i>
                        </button>
                    </span>
                </div>
            </form>
        </div>
        {% endif %}
    </div>
{% endblock header %}


{% block content %}
<div class="pull-right noprint">
    {% block buttons %}{% endblock %}
    {% plugin_buttons content_type.model_class 'list' %}
    {% if table and request.user.is_authenticated and table_config_form %}
        {% block table_config_button %}
            {% table_config_button table table_name="ObjectTable" %}
        {% endblock table_config_button %}
    {% endif %}
    {% if filter_form or dynamic_filter_form %}
        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#FilterForm_modal" title="Add filters" id="id__filterbtn"><i class="mdi mdi-filter"></i> Filter</button>
    {% endif %}
    {% if model.is_saved_view_model %}
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="mdi mdi-view-compact-outline" aria-hidden="true"></span> Saved Views <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                {% for saved_view in saved_views %}
                    <li>
                        {% if saved_view == current_saved_view %}
                            <a href="{% url list_url %}?clear_view=true">
                                <i class="mdi mdi-check-bold text-bold" aria-hidden="true"></i>
                                <strong>
                                    {{saved_view.name}}
                                </strong>
                            </a>
                        {% else %}
                            <a href="{{ saved_view.get_absolute_url }}">
                                <i class="mdi mdi-view-compact-outline text-muted" aria-hidden="true"></i>
                                {{saved_view.name}}
                            </a>
                        {% endif %}
                    </li>
                {% endfor %}
                {% if saved_views %}
                    <li role="separator" class="divider"></li>
                {% endif %}
                {% if current_saved_view %}
                    <li>
                        <a href="{% url 'extras:savedview_update_config' pk=request.GET.saved_view %}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}">
                            <i class="mdi mdi-content-save-outline text-muted" aria-hidden="true"></i>
                            <span>Update Current Saved View</span>
                        </a>
                    </li>
                    <li>
                        <a href="{% url 'extras:savedview_set_default' pk=request.GET.saved_view %}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}">
                            <i class="mdi mdi-star text-muted" aria-hidden="true"></i>
                            <span>Set As My Default</span>
                        </a>
                    </li>
                {% endif %}
                <li>
                    <a href="" data-toggle="modal" data-target="#saved_view_modal" title="Save Current View As">
                        <i class="mdi mdi-content-save-plus-outline text-muted" aria-hidden="true"></i>
                        <span>Save As New View</span>
                    </a>
                </li>
                {% if current_saved_view %}
                    <li>
                        <a href="{% url 'extras:savedview_delete' pk=request.GET.saved_view %}">
                            <i class="mdi mdi-trash-can-outline text-danger" aria-hidden="true"></i>
                            <span class="text-danger">Delete Current Saved View</span>
                        </a>
                    </li>
                {% endif %}
            </ul>
        </div>
    {% endif %}
    <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-toggle="dropdown">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </button>
        {% elif permissions.add and 'import' in action_buttons %}
            <button type="button" id="actions-dropdown" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                Actions <span class="caret"></span>
            </button>
        {% elif 'export' in action_buttons %}
            <button type="button" id="actions-dropdown" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                Actions <span class="caret"></span>
            </button>
        {% endif %}
        <ul class="dropdown-menu pull-right" 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="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>
<h1>{% block title %}{% render_title %}{% endblock %}{% saved_view_title %}</h1>
{% block header_extra %}{% endblock %}
{% if filter_params %}
<div class="filters-applied">
    <b>Filters:</b>
    {% for field in filter_params %}
    <span class="filter-container" dir="ltr">
        <span
                class="filter-selection">
            <b>{{ field.display }}:</b>
            <span
                    class="remove-filter-param"
                    title="Remove all items"
                    data-field-type="parent"
                    data-field-value="{{ field.name }}"
            >×</span>
            <ul class="filter-selection-rendered">
                {% for value in field.values %}
                <li
                        class="filter-selection-choice"
                        title="{{ value.name }}"
                >
                    <span
                            class="filter-selection-choice-remove remove-filter-param"
                            data-field-type="child"
                            data-field-parent="{{ field.name }}"
                            data-field-value="{{ value.name }}"
                    >×</span>{{ value.display }}
                </li>
                {% endfor %}
            </ul>
        </span>
    </span>
    {% endfor %}
</div>
<hr>
{% endif %}

<div class="row">
    {% block table %}
    <div class="col-md-12">
        {% 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 %}" />
                {% if table.paginator.num_pages > 1 %}
                <div class="table-responsive">
                    <div id="select_all_box" class="hidden panel panel-default noprint">
                        <div class="panel-body">
                            <div class="checkbox-inline">
                                <label for="select_all">
                                    <input type="checkbox" id="select_all" name="_all" />
                                    Select <strong>all {{ table.rows|length }} {{ table.data.verbose_name_plural }}</strong> matching query
                                </label>
                            </div>
                            <div class="pull-right">
                                {% if content_type.model_class.is_dynamic_group_associable_model and perms.extras.add_staticgroupassociation %}
                                    <button type="button"
                                            id="update_dynamic_groups_for_all"
                                            data-toggle="modal"
                                            data-target="#dynamic_group_assignment_modal"
                                            data-objects="all"
                                            class="btn btn-primary btn-sm"
                                            disabled="disabled">
                                        <span class="mdi mdi-group" aria-hidden="true"></span>
                                        Update Group Assignment for All
                                    </button>
                                {% endif %}
                                {% if bulk_edit_url and permissions.change %}
                                    <button type="submit" name="_edit" formaction="{% url bulk_edit_url %}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}" class="btn btn-warning btn-sm" disabled="disabled">
                                        <span class="mdi mdi-pencil" aria-hidden="true"></span> Edit All
                                    </button>
                                {% endif %}
                                {% if bulk_delete_url and permissions.delete %}
                                    <button type="submit" name="_delete" formaction="{% url bulk_delete_url %}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}" class="btn btn-danger btn-sm" disabled="disabled">
                                        <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span> Delete All
                                    </button>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}
                {% include table_template|default:'panel_table.html' %}

                <div class="pull-left noprint">
                    {% consolidate_bulk_action_buttons %}
                    {% block bulk_buttons %}{% endblock %}

                </div>
            </form>
        {% else %}
            {% include table_template|default:'panel_table.html' %}
        {% endif %}
        {% endwith %}
        {% include 'inc/paginator.html' with paginator=table.paginator page=table.page %}
        <div class="clearfix"></div>
    </div>
    {% endblock %}
</div>
{% if table %}{% table_config_form table table_name="ObjectTable" %}{% endif %}
{% filter_form_modal filter_form dynamic_filter_form model_plural_name=title %}
{% 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 javascript %}
<script src="{% static 'js/tableconfig.js' %}"></script>
<script src="{% static 'jquery/jquery.formset.js' %}"></script>
<script>
    var clipboard = new ClipboardJS('.btn');

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

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

    $('.formset_row-dynamic-filterform').formset({
        addText: '<span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add another Filter',
        addCssClass: 'btn btn-primary add-row',
        deleteText: '<span class="mdi mdi-trash-can-outline" aria-hidden="true"></span>',
        deleteCssClass: 'btn btn-danger delete-row',
        prefix: 'form',
        formCssClass: 'dynamic-filterform',
        added: jsify_form,
        removed: (row) => { row.remove(); }
    });

    // 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");
    });


</script>
{% endblock %}