{% extends 'base.html' %}
{% load helpers %}
{% load registry %}

{# TODO: Figure out better solution: this is a quick hack to remove "chevrons" from homepage because in this commit I'm adding the chevrons in base_django.html #}
{% block page_title %}{% endblock %}

{% block header %}
    {{ block.super }}
    {% if new_release %}
        {# new_release is set only if the current user is a superuser or staff member #}
        <div class="alert alert-info text-center" role="alert">
            <span class="mdi mdi-information-outline"></span>
            A new release is available: <a href="{{ new_release.url }}">Nautobot v{{ new_release.version }}</a> |
            <a href="https://docs.nautobot.com/projects/core/en/v{{ new_release.version }}/installation/upgrading/">Upgrade instructions</a>
        </div>
    {% endif %}
    <noscript>
        <style>
            #draggable-homepage-panels .nb-draggable-handle {
                cursor: default;
            }
            #draggable-homepage-panels .nb-collapse-toggle {
                display: none;
            }
        </style>
    </noscript>
{% endblock %}

{% block extra_styles %}
    <style>
        #draggable-homepage-panels {
            /* Height, margin and padding adjustments below enable drag and drop mechanism over the entire homepage. */
            height: calc(100% + 2 * 1rem); /* (100% + 2 * 16px); the latter compensates negative vertical margins. */
            margin: -1rem -1.25rem; /* -16px -20px; negate parent container and compensate for `col-*` paddings. */
            padding: 1rem 0.625rem; /* Clone padding from parent container, with an additional `0.625rem` `col-*` compensation, to imitate its content boundaries. */
        }
        #draggable-homepage-panels > .nb-panel-group {
            height: fit-content;
        }
        #draggable-homepage-panels > .nb-panel-group > .card.nb-draggable > .list-group {
            max-height: 25rem; /* 400px */
        }
    </style>
{% endblock %}

{% block content %}
    {% registry %}
    <div
        id="draggable-homepage-panels"
        class="row nb-draggable-container"
        data-nb-draggable-flow="column"
        hx-ext="json-enc"
        hx-swap="none"
        hx-vals="javascript:{homepage_layout:{panels:window.nb.homepage.serializePanels()}}"
    >
        {% for panel_group in homepage_layout_panels %}
            {% comment %}Special flex order is used for unorthodox wrapping in two-column layout (`md` breakpoint) in which the elements are wrapped: 1-2 | 3-4, instead of default 1-3 | 2-4.{% endcomment %}
            <div class="col-xxl-3 col-xl-4 col-md-6 ms-auto nb-panel-group order-xl-0 order-md-{% if forloop.counter0|divisibleby:'2' %}0{% else %}1{% endif %}">
                {% for panel_name, panel_details in panel_group.items %}
                    <div class="card nb-draggable" id="{{ panel_name|slugify }}" data-panel-weight="{{ panel_details.weight }}">
                        <div class="card-header nb-draggable-handle">
                            <strong class="text-body nb-text-none">{{ panel_name }}</strong>
                            {% comment %}Not using <button> element here because of Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=568313 {% endcomment %}
                            <span
                                class="btn stretched-link nb-collapse-toggle nb-cursor-unset"
                                role="button"
                                tabindex="0"
                                data-bs-toggle="collapse"
                                data-bs-target="#homepanel-{{ panel_name|slugify }}"
                                aria-expanded="{% if panel_details.collapsed %}false{% else %}true{% endif %}"
                                aria-controls="homepanel-{{ panel_name|slugify }}"
                            >
                                <span class="mdi mdi-chevron-down"></span>
                            </span>
                        </div>
                        <ul
                            id="homepanel-{{ panel_name|slugify }}"
                            class="list-group collapse overflow-y-auto{% if not panel_details.collapsed %} show{% endif %}"
                        >
                            {% if panel_details.rendered_html %}
                                {% autoescape off %}{{ panel_details.rendered_html }}{% endautoescape %}
                            {% elif panel_details.items %}
                                {% for item_name, item_details in panel_details.items.items %}
                                    {% if item_details.rendered_html %}
                                        <li class="list-group-item" data-item-weight="{{ item_details.weight }}">
                                            {% if request.user|has_one_or_more_perms:item_details.permissions %}
                                                {% autoescape off %}{{ item_details.rendered_html }}{% endautoescape %}
                                            {% endif %}
                                        </li>
                                    {% elif not item_details.items.items %}
                                        {% if request.user|has_one_or_more_perms:item_details.permissions %}
                                            <li class="list-group-item" data-item-weight="{{ item_details.weight }}">
                                                {% if request.user|has_perms:item_details.permissions %}
                                                    <span class="badge bg-primary float-end my-1">{{ item_details.count }}</span>
                                                    <h4 class="fw-normal lh-base">
                                                        {% comment %}
                                                            Use 'url xxx as variable' so that an invalid
                                                            link doesn't throw a NoReverseMatch exception.
                                                        {% endcomment %}
                                                        {% url item_details.link as item_url %}
                                                        {% if item_url %}
                                                            <a href="{{ item_url }}">{{ item_name }}</a>
                                                        {% else %}
                                                            <a>ERROR: Invalid link!</a>
                                                        {% endif %}
                                                    </h4>
                                                {% else %}
                                                    <span class="badge bg-primary float-end my-1"><span class="mdi mdi-lock" aria-hidden="true"></span></span>
                                                    <h4 class="fw-normal lh-base">{{ item_name }}</h4>
                                                {% endif %}
                                                <p class="fs-5 mb-0 mt-4 text-secondary">{{ item_details.description }}</p>
                                            </li>
                                        {% endif %}
                                    {% else %}
                                        <li class="list-group-item" data-item-weight="{{ item_details.weight }}">
                                            <h4 class="fw-normal lh-base">{{ item_name }}</h4>
                                            {% for group_item_name, group_item_details in item_details.items.items %}
                                                {% if request.user|has_one_or_more_perms:group_item_details.permissions %}
                                                    {% if request.user|has_perms:group_item_details.permissions %}
                                                        {% if group_item_details.rendered_html %}
                                                            {% autoescape off %}
                                                                {{ group_item_details.rendered_html }}
                                                            {% endautoescape %}
                                                        {% else %}
                                                            <span class="badge bg-primary float-end mt-4">{{ group_item_details.count }}</span>
                                                            <p class="mb-0 mt-4 ps-20">
                                                                {% comment %}
                                                                    Use 'url xxx as variable' so that an invalid
                                                                    link doesn't throw a NoReverseMatch exception.
                                                                {% endcomment %}
                                                                {% url group_item_details.link as group_url %}
                                                                {% if group_url %}
                                                                    <a href="{{ group_url }}">{{ group_item_name }}</a>
                                                                {% else %}
                                                                    <a>ERROR: Invalid link!</a>
                                                                {% endif %}
                                                            </p>
                                                        {% endif %}
                                                    {% else %}
                                                        <span class="badge bg-primary float-end mt-4"><span class="mdi mdi-lock" aria-hidden="true"></span></span>
                                                        <p class="mb-0 mt-4 ps-20">{{ group_item_name }}</p>
                                                    {% endif %}
                                                {% endif %}
                                            {% endfor %}
                                        </li>
                                    {% endif %}
                                {% endfor %}
                            {% endif %}
                        </ul>
                    </div>
                {% endfor %}
            </div>
        {% endfor %}
    </div>
{% endblock %}
{% block javascript %}
    {{ block.super }}
    <script>
        (() => {
            window.addEventListener('DOMContentLoaded', () => {
                // Remove legacy localStorage entry.
                window.localStorage?.removeItem('homepage-panels-order');

                const draggableHomepagePanels = document.querySelector('#draggable-homepage-panels');
                const columns = [...draggableHomepagePanels.children];

                const collapseVerticalWhitespace = () => {
                    const firstColumnOffsetTop = columns[0]?.offsetTop;

                    // Reset all columns `marginBlockStart` to start offset calculations from scratch.
                    columns.forEach((column) => (column.style.marginBlockStart = 0));

                    // Force wait for the `marginBlockStart` style set above to take effect.
                    columns.forEach((column) => window.getComputedStyle(column).marginBlockStart);

                    (function moveWrappedColumnsUp(iteration) {
                        const MAX_ITERATIONS = 5;

                        const columnOffsetTopTargets = columns.map((column, index) => {
                            /*
                             * `column` must be wrapped in case when its `offsetTop` property is greater than that of
                             * the first column.
                             */
                            const isColumnWrapped = column.offsetTop > firstColumnOffsetTop;
                            if (isColumnWrapped) {
                                /*
                                 * `columnAbove` is assumed to be another column with the same `offsetLeft` and the
                                 * lowest positive `offsetTop` difference, so essentially having the same X coordinate
                                 * and being the closest preceding vertical neighbor.
                                 */
                                const columnAbove = columns
                                    .filter((anotherColumn) => anotherColumn !== column)
                                    .reduce(
                                        (acc, anotherColumn) => {
                                            const offsetTopDifference = column.offsetTop - anotherColumn.offsetTop;
                                            return anotherColumn.offsetLeft === column.offsetLeft &&
                                            offsetTopDifference > 0 &&
                                            offsetTopDifference < acc.offsetTopDifference
                                                ? { anotherColumn, offsetTopDifference }
                                                : acc;
                                        },
                                        { anotherColumn: null, offsetTopDifference: Infinity },
                                    ).anotherColumn;
                                const columnAboveLastChild =
                                    // Fall back to the `columnAbove` itself here, in case it has no children.
                                columnAbove.children[columnAbove.children.length - 1] ?? columnAbove;
                                return (
                                    columnAboveLastChild.offsetTop +
                                    columnAboveLastChild.offsetHeight +
                                    parseInt(window.getComputedStyle(columnAboveLastChild).marginBlockEnd, 10)
                                );
                            }
                            return column.offsetTop;
                        });

                        columns.forEach((column, index) => {
                            // Re-calculate column top margin to seamlessly align it with the column above.
                            column.style.marginBlockStart = `${parseInt(window.getComputedStyle(column).marginBlockStart, 10) - (column.offsetTop - columnOffsetTopTargets[index])}px`;
                            // Force wait for the `marginBlockStart` style set above to take effect.
                            window.getComputedStyle(column).marginBlockStart;
                        });

                        /*
                         * The complexity of calculating exact margin top initially stems from the fact that it does not
                         * only depend on the columns above, but also on the total height of columns container, that is
                         * the main row. Because the row height is also affected by moving wrapped columns up, it is
                         * straight up simpler to just re-calculate again if the columns did not end up at their target
                         * places, rather than try to get all the positions exactly right at the first time.
                         */
                        const areAllColumnsAtTheirTargets = columns.every(
                            (column, index) => column.offsetTop <= columnOffsetTopTargets[index],
                        );
                        if (!areAllColumnsAtTheirTargets && iteration < MAX_ITERATIONS) {
                            moveWrappedColumnsUp(iteration + 1);
                        }
                    })(0);
                };

                const resizeObserver = new ResizeObserver(() => collapseVerticalWhitespace());
                columns.forEach((column) => resizeObserver.observe(column));

                const savePanels = () =>
                htmx.ajax('patch', '{% url "users-api:userconfig-list" %}', {
                    source: '#draggable-homepage-panels',
                });

                const mutationObserver = new MutationObserver(savePanels);
                mutationObserver.observe(draggableHomepagePanels, {
                    attributeFilter: ['aria-expanded'],
                    childList: true,
                    subtree: true,
                });

                // This is a callback for HTMX `hx-vals` to populate the `PATCH` `/api/users/config/` request body.
                const serializePanels = () =>
                columns.map((column) =>
                    [...column.children].map((child) => ({
                        collapsed:
                            child.querySelector('[aria-expanded]')?.getAttribute('aria-expanded') === 'false',
                        id: child.id,
                    })),
                );

                window.nb = window.nb || {};
                window.nb.homepage = { serializePanels };
            });
        })();
    </script>
{% endblock %}