{% extends "base.html" %}
{% load form_helpers %}

{% block title %}
    {% if function_code %}
        Assign Devices to {{ function_code.name }}
    {% else %}
        Assign Devices
    {% endif %}
{% endblock title %}

{% block content %}
    <form action="" method="post" class="h-100 vstack" id="nb-create-form" data-nb-obj-type="Device Function Code Assignment">
        {% csrf_token %}
        <div class="row justify-content-center align-content-start flex-fill">
            <div class="col-lg-8 col-md-10 mb-10">
                <h3>
                    {% if function_code %}
                        Assign Devices to {{ function_code }}
                    {% else %}
                        Assign Devices
                    {% endif %}
                </h3>
                <p class="text-muted">
                    Select one or more devices. Each device can have only one Function Code; existing assignments are updated.
                </p>
            </div>
            <div class="col-lg-8 col-md-10">
                <div class="card">
                    <div class="card-header"><strong>Assignment</strong></div>
                    <div class="card-body">
                        {% render_form form %}
                    </div>
                </div>
            </div>
        </div>
        <div class="nb-form-sticky-footer">
            <button type="submit" class="btn btn-primary">
                <span aria-hidden="true" class="mdi mdi-check me-4"></span><!--
                -->Assign
            </button>
            <a href="{{ return_url }}" class="btn btn-secondary">
                <span aria-hidden="true" class="mdi mdi-close me-4"></span><!--
                -->Cancel
            </a>
        </div>
    </form>
    <div class="modal fade" data-bs-backdrop="static" id="embedded_action_modal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-xl" role="document">
            <div
                class="modal-content"
                hx-on:htmx:before-swap="window.nb.embeddedAction.handleEnd(event);"
                hx-on:htmx:load="jsify_form(this);"
            ></div>
        </div>
    </div>
{% endblock content %}

{% block javascript %}
    {{ block.super }}
    {{ form.media }}
    <script>
        (() => {
            const handleEnd = (event) => {
                const obj = (() => {
                    try {
                        const obj = JSON.parse(event.detail.serverResponse);
                        return obj?.id ? obj : undefined;
                    } catch (exception) {
                        return undefined;
                    }
                })();

                if (obj) {
                    event.preventDefault();

                    const targetField = document.querySelector(
                        `#nb-create-form select[name="${window.nb.embeddedAction.targetFieldName}"]`,
                    );
                    if (targetField) {
                        const targetFieldValue = [...targetField.selectedOptions].map((option) => ({
                            text: option.innerText,
                            value: option.value,
                        }));
                        window.nb.select2.setSelect2Value(targetField, [
                            ...(targetField.getAttribute("multiple") !== null ? targetFieldValue : []),
                            {
                                text: _.get(obj, targetField.getAttribute("display-field")) || obj.name,
                                value: _.get(obj, targetField.getAttribute("value-field")) || obj.id,
                            },
                        ]);
                    }

                    const modal = document.querySelector("#embedded_action_modal");
                    bootstrap.Modal.getInstance(modal).hide();
                    window.nb.messages.refreshMessages("{% url 'messages' %}");
                }
            };

            const handleStart = ({ targetFieldName }) => {
                const modal = document.querySelector("#embedded_action_modal");
                const content = modal.querySelector(".modal-content");
                content.innerHTML =
                    '<div class="spinner-border mx-auto my-16"><span class="visually-hidden">Loading...</span></div>';
                window.nb.embeddedAction.targetFieldName = targetFieldName;
            };

            window.nb = window.nb || {};
            window.nb.embeddedAction = { handleEnd, handleStart, targetFieldName: null };
        })();
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const select = document.getElementById("id_devices");
            if (!select || !window.jQuery) {
                return;
            }
            select.setAttribute("multiple", "multiple");
            const $select = window.jQuery(select);
            if ($select.data("select2")) {
                $select.select2("destroy");
            }
            window.nb.select2.initializeSelect2Fields(select.closest("form"));
        });
    </script>
{% endblock javascript %}