{% import "_includes/forms" as forms %}

{{ forms.selectField({
    label: 'UI Mode'|t('app'),
    instructions: 'How the field should be presented in the control panel.'|t('app'),
    id: 'ui-mode',
    name: 'uiMode',
    options: [
        {label: 'Normal'|t('app'), value: 'normal'},
        {label: 'Enlarged'|t('app'), value: 'enlarged'},
    ],
    value: field.uiMode,
}) }}

{{ forms.textField({
    label: "Placeholder Text"|t('app'),
    instructions: "The text that will be shown if the field doesn’t have a value."|t('app'),
    id: 'placeholder',
    name: 'placeholder',
    value: field.placeholder,
    errors: field.getErrors('placeholder')
}) }}

{% embed '_includes/forms/field' with {
    label: 'Field Limit'|t('app'),
    instructions: "The maximum number of characters or bytes the field is allowed to have."|t('app'),
    id: 'fieldLimit',
    errors: field.getErrors(field.byteLimit ? 'byteLimit' : 'charLimit')
} %}
    {% import "_includes/forms" as forms %}
    {% block input %}
        <div class="flex">
            {{ forms.text({
                id: 'fieldLimit',
                name: 'fieldLimit',
                value: field.charLimit ?? field.byteLimit,
                size: 3,
            }) }}
            {{ forms.select({
                id: 'limitUnit',
                name: 'limitUnit',
                options: [
                    { value: 'chars', label: 'Characters'|t('app') },
                    { value: 'bytes', label: 'Bytes'|t('app') },
                ],
                value: field.byteLimit ? 'bytes' : 'chars'
            }) }}
        </div>
    {% endblock %}
{% endembed %}

<fieldset>
    {{ forms.checkboxField({
        label: "Use a monospaced font"|t('app'),
        name: 'code',
        checked: field.code,
    }) }}

    {{ forms.checkboxField({
        label: "Allow line breaks"|t('app'),
        name: 'multiline',
        checked: field.multiline,
        toggle: 'initialRowsContainer'
    }) }}
</fieldset>

<div id="initialRowsContainer" class="nested-fields{% if not field.multiline %} hidden{% endif %}">
    {{ forms.textField({
        label: "Initial Rows"|t('app'),
        id: 'initialRows',
        name: 'initialRows',
        value: field.initialRows,
        size: 3,
        errors: field.getErrors('initialRows')
    }) }}
</div>

{% if craft.app.db.isMysql %}
    <hr>
    <a class="fieldtoggle" data-target="advanced">{{ "Advanced"|t('app') }}</a>
    <div id="advanced" class="hidden">
        {{ forms.selectField({
            label: "Column Type"|t('app'),
            id: 'column-type',
            name: 'columnType',
            instructions: "The type of column this field should get in the database."|t('app'),
            options: [
                { value: 'auto', label: 'Automatic'|t('app') },
                { value: 'string', label: 'varchar (255B)' },
                { value: 'text', label: 'text (~64KB)' },
                { value: 'mediumtext', label: 'mediumtext (~16MB)' },
            ],
            value: field.columnType ?? 'auto',
            warning: (field.id ? "Changing this may result in data loss."|t('app')),
        }) }}
    </div>
{% endif %}
