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

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

{{ forms.textField({
    first: true,
    label: 'Name' | t('formie'),
    instructions: 'What this form will be called in the control panel.' | t('formie'),
    id: 'title',
    name: 'title',
    required: true,
    inputAttributes: {
        'v-model': 'form.title',
    },
}) }}

<hr>

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

{% set defaultStatus = form.defaultStatus ?? null %}
{% set defaultStatusId = form.defaultStatus.id ?? null %}

{{ forms.hidden({
    id: 'defaultStatusId',
    name: 'defaultStatusId',
    value: defaultStatusId,
}) }}

{% set statusField %}
    <div>
        <a id="status-menu-btn" class="btn menu-toggle menubtn-custom" href="javascript:;">
            {% if defaultStatus %}
                <span class="status {{ defaultStatus.color }}"></span>{{ defaultStatus.name }}
            {% endif %}
        </a>

        <div class="menu">
            <ul class="padded">
                {% for status in craft.formie.statuses %}
                    <li>
                        <a data-val="{{ status.id }}" data-label="{{ status.name }}" data-color="{{ status.color }}" {% if defaultStatusId == status.id %}class="sel"{% endif %} href="javascript:;">
                            <span class="status {{ status.color }}"></span>{{ status.name }}
                        </a>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
{% endset %}

{{ forms.field({
    label: 'Default Status' | t('formie'),
    instructions: 'The default status to be assigned to new submissions.' | t('formie')
}, statusField) }}

<form-kit
    type="variableText"
    label="{{ 'Submission Title Format' | t('formie') }}"
    help="{{ 'Enter the format of the auto-generated submission titles. If left blank, the date/time of submission will be used.' | t('formie') }}"
    name="settings[submissionTitleFormat]"
    v-model="form.settings.submissionTitleFormat"
    variables="plainTextVariables"
></form-kit>

<hr>

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

{{ forms.lightswitchField({
    label: 'Collect IP Addresses' | t('formie'),
    instructions: 'Whether this form should collect the users’ IP address.' | t('formie'),
    id: 'collectIp',
    name: 'settings[collectIp]',
    on: form.settings.collectIp ?? false,
}) }}

{% set collectUser = form.settings.collectUser ?? false %}

{{ forms.lightswitchField({
    label: 'Collect User' | t('formie'),
    instructions: 'Whether this form should keep a record of the logged-in user.' | t('formie'),
    id: 'collectUser',
    name: 'settings[collectUser]',
    on: collectUser,
    toggle: 'collect-user',
}) }}

{# Annoying, but different settings for top-level #}
{% if stencil is defined %}
    {% set dataRetention = form.data.dataRetention ?? 'forever' %}
    {% set dataRetentionValue = form.data.dataRetentionValue ?? null %}
    {% set fileUploadsAction = form.data.fileUploadsAction ?? 'retain' %}
{% else %}
    {% set dataRetention = form.dataRetention ?? 'forever' %}
    {% set dataRetentionValue = form.dataRetentionValue ?? null %}
    {% set fileUploadsAction = form.fileUploadsAction ?? 'retain' %}
{% endif %}

{{ forms.selectField({
    label: 'Data Retention' | t('formie'),
    instructions: 'How long to retain form submission data for.' | t('formie'),
    id: 'dataRetention',
    name: 'dataRetention',
    options: [{
        label: 'Forever' | t('formie'),
        value: 'forever',
    },
    {
        label: 'Number of minutes' | t('formie'),
        value: 'minutes',
    },
    {
        label: 'Number of hours' | t('formie'),
        value: 'hours',
    },
    {
        label: 'Number of days' | t('formie'),
        value: 'days',
    },
    {
        label: 'Number of weeks' | t('formie'),
        value: 'weeks',
    },
    {
        label: 'Number of months' | t('formie'),
        value: 'months',
    },
    {
        label: 'Number of years' | t('formie'),
        value: 'years',
    }],
    toggle: true,
    targetPrefix: '.fui-dr-',
    value: dataRetention,
}) }}

<div class="fui-dr-minutes fui-dr-hours fui-dr-days fui-dr-weeks fui-dr-months fui-dr-years {{ dataRetention == 'forever' ? 'hidden' }}">
    {{ forms.textField({
        label: 'Data Retention Duration' | t('formie'),
        instructions: 'After this duration has been met, submissions will be deleted.' | t('formie'),
        id: 'dataRetentionValue',
        name: 'dataRetentionValue',
        type: 'number',
        size: 3,
        value: dataRetentionValue,
        warning: 'We use Craft‘s [garbage collection](https://craftcms.com/docs/4.x/gc.html) mechanism to remove submissions, so this may not always be actioned immediately.' | t('formie'),
    }) }}
</div>

{{ forms.selectField({
    label: 'File Uploads' | t('formie'),
    instructions: 'Select how to handle file uploads when a submission is deleted.' | t('formie'),
    id: 'fileUploadsAction',
    name: 'fileUploadsAction',
    options: [{
        label: 'Retain files' | t('formie'),
        value: 'retain',
    },
    {
        label: 'Delete files' | t('formie'),
        value: 'delete',
    }],
    value: fileUploadsAction,
}) }}

<hr>

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

<form-kit
    type="handle"
    label="Handle"
    help="{{ 'How you’ll refer to this form in your templates. Use the refresh icon to re-generate this from your form name.' | t('formie') }}"
    warning="{{ 'Changing this may result in your form not working as expected.' | t('formie') }}"
    name="handle"
    v-model="form.handle"
    :source-value="form.title"
    :required="true"
    :collection="formHandles"
></form-kit>

{% js %}
    $(function () {
        $colorSelect = $('#status-menu-btn');
        new Garnish.MenuBtn($colorSelect, {
            onOptionSelect: function(data) {
                var val = $(data).data('val');
                var label = $(data).data('label');
                var color = $(data).data('color');
                $('#defaultStatusId').val(val);
                var html = '<span class="status ' + color + '"></span>' + label;
                $colorSelect.html(html);
            }
        });
    });
{% endjs %}