{% 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: 'Forms' | t('formie'), url: url('formie/forms') },
] %}

{% set bodyClass = 'fui-body fui-body-start' %}
{% set title = '' %}
{% set selectedSubnavItem = 'forms' %}

{% block main %}

<div id="fui-new-form" class="fui-start content-pane">
    <form method="post" accept-charset="UTF-8">
        {{ actionInput('formie/forms/save') }}
        {{ redirectInput('formie/forms/edit/{id}') }}
        {{ csrfInput() }}

        <div class="fui-start-wrap">
            <div class="intro">
                <h1>{{ 'Create your form' | t('formie') }}</h1>
                <p class="instructions">{{ 'Before you get started, you’ll need a name for your form.' | t('formie') }}</p>
            </div>

            {# Would be great to use v-model, but Craft's fields add `inputAttributes` to the outer div element #}
            {{ forms.textField({
                first: true,
                label: 'Name' | t('app'),
                instructions: 'What this form will be called in the control panel.' | t('formie'),
                id: 'title',
                name: 'title',
                autofocus: true,
                required: true,
                errors: form.getErrors('title'),
                inputAttributes: {
                    ':value': 'name',
                    '@input': 'name = $event.target.value',
                },
            }) }}

            {% if stencilArray %}
                {{ forms.selectField({
                    label: 'Stencil' | t('formie'),
                    instructions: 'Select a stencil to kick-start your form with fields and settings.' | t('formie'),
                    id: 'applyStencilId',
                    name: 'applyStencilId',
                    required: false,
                    value: applyStencilId ?? '',
                    options: [{
                        'value': '',
                        'label': 'Blank Form' | t('formie'),
                    }] | merge(stencilArray),
                }) }}
            {% endif %}

            <a href="#" class="fieldtoggle" data-target="advanced">{{ 'Advanced' | t('app') }}</a>

            <div id="advanced" class="{{ form.getErrors('handle') ? '' : 'hidden' }}">
                {{ forms.textField({
                    label: 'Handle' | t('app'),
                    instructions: 'How you’ll refer to this form in the templates.' | t('formie'),
                    id: 'handle',
                    name: 'handle',
                    class: 'code',
                    autocorrect: false,
                    autocapitalize: false,
                    required: true,
                    errors: form.getErrors('handle'),
                    inputAttributes: {
                        ':value': 'handle',
                        '@input': 'handle = $event.target.value',
                    },
                }) }}
            </div>

            <hr>

            {% if form %}
                {% set errors = form.getErrors() ?: form.getConsolidatedErrors() %}

                {% if errors %}
                    <div class="fui-notice error">
                        <pre>{{ errors | json_encode(constant('JSON_PRETTY_PRINT')) }}</pre>
                    </div>

                    <hr>
                {% endif %}
            {% endif %}

            <div class="buttons">
                <a href="{{ url('formie/forms') }}" class="btn big fui-btn">{{ 'Cancel' | t('formie') }}</a>
                <button type="submit" class="btn big submit">{{ 'Next' | t('formie') }}</button>
            </div>
        </div>
    </form>
</div>

{% endblock %}

{% js %}
    document.addEventListener('vite-script-loaded', function(e) {
        if (e.detail.path === 'src/js/formie-form-new.js') {
            new Craft.Formie.NewForm({
                name: '{{ form.title ?? '' }}',
                handle: '{{ form.handle ?? '' }}',
                formHandles: {{ formHandles | json_encode | raw }},
                reservedHandles: {{ reservedHandles | json_encode | raw }},
                maxFormHandleLength: {{ maxFormHandleLength | json_encode | raw }},
            });
        }
    });
{% endjs %}