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

<h2>{{ 'Form Appearance' | t('formie') }}</h2>

{{ forms.lightswitchField({
    label: 'Display Form Title' | t('formie'),
    instructions: 'Whether the title of this form should be included on the page when rendering the form.' | t('formie'),
    id: 'displayFormTitle',
    name: 'settings[displayFormTitle]',
    on: form.settings.displayFormTitle ?? false,
}) }}

{{ forms.lightswitchField({
    label: 'Display Current Page Title' | t('formie'),
    instructions: 'Whether the title of the current page should be included when rendering the form.' | t('formie'),
    id: 'displayCurrentPageTitle',
    name: 'settings[displayCurrentPageTitle]',
    on: form.settings.displayCurrentPageTitle ?? false,
}) }}

{{ forms.lightswitchField({
    label: 'Display Page Tabs' | t('formie'),
    instructions: 'Whether tabs of all pages should be included on the page when rendering the form. This is only applicable for forms with more than one page.' | t('formie'),
    id: 'displayPageTabs',
    name: 'settings[displayPageTabs]',
    on: form.settings.displayPageTabs ?? false,
}) }}

{{ forms.lightswitchField({
    label: 'Display Page Progress' | t('formie'),
    instructions: 'Whether to show a progress bar of the page completion. This is only applicable for forms with more than one page.' | t('formie'),
    id: 'displayPageProgress',
    name: 'settings[displayPageProgress]',
    on: form.settings.displayPageProgress ?? false,
    toggle: 'progress-position',
}) }}

<div id="progress-position" class="{{ not form.settings.displayPageProgress ? 'hidden' }}">
    {{ forms.selectField({
        label: 'Page Progress Position' | t('formie'),
        instructions: 'Select the position of the page progress indicator in the form.' | t('formie'),
        name: 'settings[progressPosition]',
        options: [
            {
                label: 'Start of form' | t('formie'),
                value: 'start',
            },
            {
                label: 'End of form' | t('formie'),
                value: 'end',
            }
        ],
        value: form.settings.progressPosition ?? 'end',
    }) }}
</div>

{{ forms.lightswitchField({
    label: 'Scroll To Top' | t('formie'),
    instructions: 'Whether for multi-page forms, the page should automatically scroll to the top of the next page after submission.' | t('formie'),
    id: 'scrollToTop',
    name: 'settings[scrollToTop]',
    on: form.settings.scrollToTop ?? false,
}) }}

{{ forms.selectField({
    label: 'Form Templates' | t('formie'),
    instructions: 'Select the templates this form should use.' | t('formie'),
    name: 'templateId',
    options: [{
        label: 'Default Formie Template' | t('formie'),
        value: '',
    }] | merge(craft.formie.templates | map(template => {
        label: template.name,
        value: template.id,
    })),
    value: form.template.id ?? '',
    inputAttributes: {
        ':value': 'form.templateId',
        '@input': 'form.templateId = $event.target.value',
    },
}) }}

<div v-cloak style="margin: -12px 0 24px;" :class="{ 'hidden': !templateReloadNotice }">
    <p class="warning with-icon">{{ 'Save this form and reload the page to see your form template fields.' | t('formie') }}</p>
</div>

{% include 'formie/forms/_panes/_positions' %}

{{ forms.selectField({
    label: 'Required Field Indicator' | t('formie'),
    instructions: 'Select how to show required fields.' | t('formie'),
    name: 'settings[requiredIndicator]',
    options: [
        {
            label: 'Asterisk for required fields' | t('formie'),
            value: 'asterisk',
        },
        {
            label: 'Optional indicator for non-required fields' | t('formie'),
            value: 'optional',
        }
    ],
    value: form.settings.requiredIndicator ?? 'asterisk',
}) }}