{% extends '_layouts/cp' %}
{% import '_includes/forms' as forms %}
{% import 'verbb-base/_macros' as macros %}

{% set crumbs = [
    { label: craft.formie.getPluginName() | t('formie'), url: url('formie') },
    { label: 'Settings' | t('app'), url: url('formie/settings') },
    { label: 'Stencils' | t('formie'), url: url('formie/settings/stencils') },
] %}

{% set selectedSubnavItem = 'settings' %}

{% set bodyClass = 'fui-body' %}

{% block pageTitle %}
    <div id="fui-page-title">
        <h1 :title="form.title" v-cloak>${form.title}</h1>
    </div>
{% endblock %}

{% set errorSummary %}

<div id="fui-error-summary">
    <div v-if="errors.length" class="error-summary" tabindex="-1" v-cloak>
        <div>
            <span class="notification-icon" data-icon="alert" aria-label="error" role="img"></span>
            <h2>${errorMessage}</h2>
        </div>

        <ul v-for="(error, index) in errors" :key="index" class="errors">
            <li>${error}</li>
        </ul>
    </div>
</div>

{% endset %}

{% block actionButton %}
    <div id="fui-save-form-button">
        <div class="btngroup submit first">
            <a href="#" class="btn submit" :class="{ 'fui-loading fui-loading-sm': loading }" @click.prevent="onSave">
                {{ 'Save' | t('app') }}
            </a>

            <div class="btn submit menu-toggle menubtn-custom"></div>
            <div class="menu">
                <ul>
                    {% if stencil.id %}
                        <li>
                            <a data-redirect="{{ stencil.getCpEditUrl() | hash }}" @click.prevent="onSaveAs({ duplicateStencil: true })">
                                {{ 'Save as a new stencil' | t('formie') }}
                            </a>
                        </li>
                    {% endif %}
                </ul>

                {% if stencil.id %}
                    <hr>

                    <ul>
                        <li>
                            <a class="error" data-redirect="{{ 'formie/settings/stencils' | hash }}" @click.prevent="onDelete">{{ 'Delete' | t('formie') }}</a>
                        </li>
                    </ul>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}

{% block content %}

{# Capture any JS generated by the form builder that isn't Vue. Think elementSelect fields. #}
{% do craft.app.view.startJsBuffer() %}

<form id="fui-forms" ref="formElem">
    {% if stencil.id %}
        <input type="hidden" name="stencilId" value="{{ stencil.id }}" />
    {% endif %}

    {% for tab in tabs %}
        <div id="{{ tab.url | trim('#') }}" class="{{ tab.tab is defined ? 'tab-form-fields' }} {{ not loop.first ? 'hidden' }}">
            {% include ['formie/forms/_panes/' ~ tab.value, 'formie/forms/_panes/form-fields'] %}
        </div>
    {% endfor %}
</form>

{# Wait for the `formie-form.js` file to load (via Vite) before initializing the Vue app. #}
{# Once ready, initialized any captured JS _after_ Vue has loaded. This handles all jQuery-based scripts #}
{% set jsBuffer = craft.app.view.clearJsBuffer(false) %}

{% js %}
    document.addEventListener('vite-script-loaded', function(e) {
        if (e.detail.path === 'src/js/formie-form.js') {
            new Craft.Formie.EditForm({{ jsBuilderConfig | json_encode | raw }});

            // Wait for Vue to kick in
            setTimeout(function() {
                {{ jsBuffer | raw }}
            }, 100);
        }
    });
{% endjs %}

{% endblock %}