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

{% do view.registerAssetBundle('craft\\web\\assets\\timepicker\\TimepickerAsset') -%}

{% set crumbs = [
    { label: craft.formie.getPluginName() | t('formie'), url: url('formie') },
    { label: 'Forms' | t('formie'), url: url('formie/forms') },
] %}

{% set selectedSubnavItem = 'forms' %}

{% 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 v-html="error"></li>
        </ul>
    </div>
</div>

{% endset %}

{% block actionButton %}

{% set submissions = craft.formie.submissions.form(form.handle).limit(1).exists() %}

{% if submissions and (currentUser.can('formie-viewSubmissions') or currentUser.can('formie-viewSubmissions:' ~ form.uid)) %}
    <a href="{{ cpUrl('formie/submissions/' ~ form.handle, { source: 'form:' ~ form.id }) }}" class="btn" target="_blank" rel="noopener" data-icon-after="external">
        {{ 'View Submissions' | t('formie') }}
    </a>
{% endif %}

{% if currentUser.can('formie-manageForms') or currentUser.can('formie-manageForms:' ~ form.uid) %}
    <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 form.id %}
                        <li>
                            <a data-redirect="{{ continueEditingUrl | hash }}" @click.prevent="onSaveAs({ duplicate: true })">
                                {{ 'Save as a new form' | t('formie') }}
                            </a>
                        </li>

                        {% if craft.app.config.general.allowAdminChanges %}
                            <li>
                                <a data-redirect="{{ continueEditingUrl | hash }}" @click.prevent="onSaveAs({ saveAsStencil: true })">
                                    {{ 'Save as a new stencil' | t('formie') }}
                                </a>
                            </li>
                        {% endif %}
                    {% endif %}
                </ul>

                {% if form.id and currentUser.can('formie-deleteForms') %}
                    <hr>

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

{% 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 form.id %}
        <input type="hidden" name="formId" value="{{ form.id }}" />
    {% endif %}

    {% if craft.app.getIsMultiSite() %}
        <input type="hidden" name="siteId" value="{{ form.siteId }}" />
    {% endif %}

    {% for tab in formTabs %}
        <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 %}