{% extends 'base.html' %}
{% load form_helpers %}
{% load helpers %}
{% load static %}

{% block title %}{% if editing %}Editing {{ obj_type }} {{ obj }}{% else %}Add a new {{ obj_type }}{% endif %}{% endblock %}

{% block content %}
    <form id="nb-create-form" action="" data-nb-obj-type="{{ obj_type }}" method="post" enctype="multipart/form-data" class="h-100 vstack">
        {% csrf_token %}
        {% for field in form.hidden_fields %}
            {{ field }}
        {% endfor %}
        <div class="row justify-content-center align-content-start flex-fill">
            <div class="col-lg-8 col-md-10 mb-10">
                <h3>
                    {% if obj %}
                        {% with obj|get_docs_url as docs_url %}
                            {% if docs_url %}
                                <a href="{{ docs_url }}" target="_blank" class="btn btn-link btn-sm float-end" title="Help">
                                    <span aria-hidden="true" class="mdi mdi-help-circle"></span>
                                </a>
                            {% endif %}
                        {% endwith %}
                    {% endif %}
                </h3>
            </div>
            <div class="col-lg-8 col-md-10">
                {% block tabs %}{% endblock %}
                {% block form_errors %}
                    {% if form.non_field_errors or model_form.non_field_errors %}
                        <div class="card border-danger">
                            <div class="card-header bg-danger-subtle border-danger text-body">
                                <strong>Errors</strong>
                            </div>
                            <div class="card-body">
                                {{ form.non_field_errors }}
                                {{ model_form.non_field_errors }}
                            </div>
                        </div>
                    {% endif %}
                {% endblock %}
                {% block form %}
                    <div class="card">
                        <div class="card-header"><strong>{{ obj_type|capfirst }}</strong></div>
                        <div class="card-body">
                            {% block form_fields %}
                                {% render_form form %}
                            {% endblock %}
                        </div>
                    </div>
                    {% include 'inc/extras_features_edit_form_fields.html' %}
                {% endblock %}
            </div>
        </div>
        <div class="nb-form-sticky-footer">
            {% block buttons %}
                {% if editing %}
                    <button type="submit" name="_update" class="btn btn-primary">
                        <span aria-hidden="true" class="mdi mdi-check me-4"></span><!--
                        -->Update
                    </button>
                {% else %}
                    <button type="submit" name="_create" class="btn btn-primary">
                        <span aria-hidden="true" class="mdi mdi-check me-4"></span><!--
                        -->Create
                    </button>
                    <button type="submit" name="_addanother" class="btn btn-primary">
                        <span aria-hidden="true" class="mdi mdi-check me-4"></span><!--
                        -->Create and Add Another
                    </button>
                {% endif %}
                <a href="{{ return_url }}" class="btn btn-secondary">
                    <span aria-hidden="true" class="mdi mdi-close me-4"></span><!--
                    -->Cancel
                </a>
            {% endblock %}
        </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 %}

{% 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; // Valid object `id` indicates valid record.
                    } catch (exception) {
                        return undefined;
                    }
                })();

                /*
                 * Valid JSON object is returned only when object creation or search was successful, otherwise it is
                 * expected to receive a rendered HTML template, a standard content eligible for HTMX swap, in which
                 * case do nothing here and let HTMX default behaviors handle the rest.
                 */
                if (obj) {
                    event.preventDefault(); // Prevent HTMX swap - JSON does not look nice when rendered as text.

                    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,
                        }));
                        // If `multiple`, add selected object to already existing Select2 target field array of values.
                        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 src="{% static 'jquery/jquery.formset.js' %}" onerror="nb.media.handleFailure(this)"></script>
{% endblock %}