{% load crispy_forms_tags %}

{% with field_config_id=id|add:"-fields" variable_catalog_id=id|add:"-variable-catalog" %}
{{ template_builder_fields|json_script:field_config_id }}
{{ template_builder_variable_catalog|json_script:variable_catalog_id }}

<div bloomerp-component="document-template-builder" id="{{ id }}"
    data-catalog-url="{% url 'components_document_template_builder_catalog' %}">
    <div class="grid gap-4 xl:grid-cols-[minmax(0,1fr)_340px]">
        <section class="min-w-0 my-4">
            <div class="overflow-hidden rounded-2xl border border-gray-200 bg-slate-50 xl:min-h-[92vh]">
                <div class="flex p-4 gap-2 justify-center">
                    <button class="btn btn-primary btn-sm">Save</button>
                    <div id="buttons-section" class="flex gap-2"></div>
                </div>

                <!--Page container-->
                <div id="page-container" style="background:#ffffff; font-size:12pt" class="mx-auto">
                    <!--header section-->
                    <div id="page-header-section"></div>

                    <!--Page section-->
                    <div id="page-content-section">
                        <c-ui.inputs.text_editor name="template" :has_border="False"
                            actions_toolbar_section_id="buttons-section" value="{{ builder_form.template.value }}" />
                    </div>
                </div>
                <!--End Page container-->
            </div>
        </section>
        <aside class="my-4 rounded-xl border border-gray-200 bg-slate-50 p-4" x-data="{ activeSection: 'variables' }">
            <div class="flex flex-wrap gap-2 mb-4">
                <button class="btn btn-sm transition-colors" type="button" @click="activeSection = 'variables'"
                    :class="activeSection === 'variables' ? 'bg-black text-white' : 'bg-white text-slate-700'"
                    :aria-pressed="activeSection === 'variables'">
                    <c-blocktrans>Variables</c-blocktrans>
                </button>

                <button class="btn btn-sm transition-colors" type="button" @click="activeSection = 'styling'"
                    :class="activeSection === 'styling' ? 'bg-black text-white' : 'bg-white text-slate-700'"
                    :aria-pressed="activeSection === 'styling'">
                    <c-blocktrans>Styling</c-blocktrans>
                </button>

                <button class="btn btn-sm transition-colors" type="button" @click="activeSection = 'settings'"
                    :class="activeSection === 'settings' ? 'bg-black text-white' : 'bg-white text-slate-700'"
                    :aria-pressed="activeSection === 'settings'">
                    <c-blocktrans>Settings</c-blocktrans>
                </button>
            </div>

            <!--Variables section-->
            <div x-show="activeSection === 'variables'" x-cloak>
                <div class="bg-white rounded-xl p-3 border-gray-200 border space-y-4">
                    <div>
                        <c-ui.text.subtitle class="mb-1">Variables</c-ui.text.subtitle>
                        <c-ui.text.muted>
                            Select root objects, then search or insert variables below.
                        </c-ui.text.muted>
                    </div>

                    <div class="space-y-2">
                        {{ builder_form.content_types|as_crispy_field }}
                    </div>

                    <details class="rounded-xl border border-slate-200 bg-slate-50/70 px-3 py-2">
                        <summary class="cursor-pointer list-none text-sm font-medium text-slate-700">
                            <span class="inline-flex items-center gap-2">
                                <i class="fa-solid fa-plus text-xs"></i>
                                <span>Add free variable</span>
                            </span>
                        </summary>

                        <div class="mt-3 flex flex-col space-y-2">
                            <input class="input" type="text" placeholder="Variable label" id="id_free_variable_label">
                            <select class="select" id="id_free_variable_type">
                                {% for option in free_variable_types %}
                                    <option
                                        value="{{ option.id }}"
                                        data-icon="{{ option.icon }}"
                                        data-injection-methods="{{ option.injectionMethods|join:',' }}"
                                        data-supports-choices="{{ option.supportsChoices|yesno:'true,false' }}"
                                    >
                                        {{ option.label }}
                                    </option>
                                {% endfor %}
                            </select>
                            <input
                                class="input hidden"
                                type="text"
                                placeholder="Choices, comma separated"
                                id="id_free_variable_choices"
                            >
                            <label class="flex items-center gap-2 text-sm text-slate-700">
                                <input type="checkbox" class="checkbox" id="id_free_variable_required">
                                <span><c-blocktrans>Required</c-blocktrans></span>
                            </label>
                            <button 
                                class="btn btn-secondary btn-sm self-start"
                                id="add-free-variable-button"
                                type="button"
                            >
                                Add
                            </button>
                        </div>
                    </details>

                    <div hidden>
                        {{ builder_form.free_variables|as_crispy_field }}
                    </div>

                    <div class="space-y-2 my-2">
                        <input class="input w-full" type="text" placeholder="Search variables" id="variable-search-input">
                        <p
                            class="hidden rounded-xl border border-dashed border-slate-200 bg-slate-50 px-4 py-6 text-sm text-slate-500"
                            id="variable-results-empty"
                        ></p>
                        <div class="max-h-[52vh] overflow-y-auto overflow-x-hidden pr-1" id="variable-results"></div>
                    </div>

                    
                </div>
            </div>
            <!--End variables section-->

            <!--Styling-->
            <div x-show="activeSection === 'styling'" x-cloak>
                {{ builder_form.styling|as_crispy_field }}
                {{ builder_form.template_header|as_crispy_field }}
            </div>
            <!--End styling-->

            <!--Settings-->
            <div x-show="activeSection === 'settings'" x-cloak>
                <div class="mb-4">
                    <c-ui.text.muted>
                        Set page size, margins, and other document settings.
                    </c-ui.text.muted>
                </div>

                <div class="flex flex-col space-y-4">
                    {{ builder_form.name|as_crispy_field }}
                    {{ builder_form.page_orientation|as_crispy_field }}
                    {{ builder_form.page_size|as_crispy_field }}
                    {{ builder_form.page_margin|as_crispy_field }}
                    {{ builder_form.include_page_numbers|as_crispy_field }}
                </div>
            </div>
            <!--End settings-->

        </aside>
    </div>

    <c-ui.modal id="add-variable-modal" title="Add variable"></c-ui.modal>
</div>
{% endwith %}