{% extends "admin/change_list.html" %}
{% load i18n admin_urls %}
{% load custom_paginator %}
{% block search %}
    {% if separate_search_fields %}
        <form id="custom_search_toolbar" style="padding: 8px 10px;
                margin-bottom: 15px;
                border-top: 1px solid var(--hairline-color);
                border-bottom: 1px solid var(--hairline-color);
                background: var(--darkened-bg);
                color: var(--body-quiet-color);">
            <fieldset class="module aligned" style="margin-bottom: 5px;">
                {% for field in separate_search_fields %}
                    <div class="form-field field-{{field.name}}" style="padding: 10px;">
                        <div>
                            {% if field.is_checkbox %}
                                {{field}}{{ field.label_tag }}
                            {% else %}
                                {{ field.label_tag }}
                                {{field}}
                            {% endif %}
                            {% if field.field.help_text %}
                                <div class="help">{{ field.field.help_text|safe }}</div>
                            {% endif %}
                        </div>
                    </div>
                    <hr />
                {% endfor %}
            </fieldset>

            <button id="submit_form" type="submit" class="form_submit_button">
                {% block modal_search_button_text %}
                    {% trans "filter"|title %}
                {% endblock %}
            </button>
        </form>
    {% else %}
        {{ block.super }}
    {% endif %}
{% endblock %}

{% block pagination %}
    {% custom_pagination cl %}
{% endblock %}

<!-- Scripts -->
{% block footer %}
    <div id="footer"></div>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

    <script>
        let searchParams = new URLSearchParams(window.location.search)

        page = searchParams.get("p")
        page = page == null ? 0 : ( $.isNumeric(page) ? parseInt(page) : 0 );

        $("#custom_search_toolbar").submit(function() {
            params = $("#custom_search_toolbar").serialize()

            href = window.location.pathname
            existing_search_params = window.location.search
            if (existing_search_params == "") {
                window.location.href = href + "?" + params;
            } else {
                const query_map = new Map();

                var existing_params = new URLSearchParams(existing_search_params)
                for (let p of existing_params) {
                    query_map.set(p[0], p[1]);
                }

                param_pairs = params.split("&");
                for (let i in param_pairs) {
                    param_pair = param_pairs[i].split("=");
                    query_map.set(param_pair[0], param_pair[1]);
                }

                let new_query_pairs = new Array();
                query_map.forEach((value, key) => {
                    new_query_pairs.push(key + "=" + value);
                })

                window.location.href = href + "?" + new_query_pairs.join("&");
            }

            return false;
        });
    </script>
{% endblock %}
