{% extends "_components/fieldtypes/elementfieldsettings" %}

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

{% set folderOptions = field.getFolderOptions() %}
{% set fileKindOptions = field.getFileKindOptions() %}
{% set isMatrix = craft.app.view.getNamespace()[0:26] == 'types[Matrix][blockTypes][' %}

{% macro uploadLocationInput(name, field, sourceOptions) %}
    {% from "_includes/forms" import select, text %}
    <div class="flex">
        <div>
            {{ select({
                id: name~'Source',
                name: name~'Source',
                options: sourceOptions,
                value: field[name~'Source'],
            }) }}
        </div>
        <div class="flex-grow">
            {{ text({
                id: name~'Subpath',
                class: 'ltr',
                name: name~'Subpath',
                value: field[name~'Subpath'],
                placeholder: "path/to/subfolder"|t('app')
            }) }}
        </div>
    </div>
{% endmacro %}

{% from _self import uploadLocationInput %}


{% block fieldSettings %}
    {% block uploadLocationFields %}
        {{ forms.checkboxField({
            label: "Restrict uploads to a single folder?"|t('app'),
            id: 'useSingleFolder-toggle',
            name: 'useSingleFolder',
            class: 'use-single-folder-cb',
            value: 1,
            checked: field.useSingleFolder,
            toggle: 'single-folder-settings',
            reverseToggle: 'multi-folder-settings'
        }) }}

        {% set uploadLocationNote = "Note that the subfolder path can contain variables like <code>{slug}</code> or <code>{author.username}</code>."|t('app') %}
        {% if isMatrix %}
            {% set uploadLocationNote = uploadLocationNote|replace({
            '{slug}': '{owner.slug}',
            '{author.username}': '{owner.author.username}'
            }) %}
        {% endif %}

        <div id="multi-folder-settings"{% if field.useSingleFolder %} class="hidden"{% endif %}>
            {% if folderOptions %}
                {{ forms.checkboxSelectField({
                    label: "Sources"|t('app'),
                    instructions: "Which sources do you want to select {type} from?"|t('app', { type: field.displayName()|lower }),
                    id: 'sources',
                    name: 'sources',
                    options: folderOptions,
                    values: field.sources
                })}}
            {% else %}
                {{ forms.field({
                    label: "Sources"|t('app')
                }, '<p class="error">' ~ "No sources exist yet."|t('app') ~ '</p>') }}
            {% endif %}


            {{ forms.field({
                label: "Default Upload Location"|t('app'),
                instructions: "Where should files be uploaded when they are dragged directly onto the field, or uploaded from the front end?"|t('app') ~' '~ uploadLocationNote,
                errors: field.getErrors('defaultUploadLocationSubpath')
            }, uploadLocationInput('defaultUploadLocation', field, sourceOptions)) }}
        </div>

        <div id="single-folder-settings"{% if not field.useSingleFolder %} class="hidden"{% endif %}>
            {{ forms.field({
                label: "Upload Location"|t('app'),
                instructions: uploadLocationNote,
                errors: field.getErrors('singleUploadLocationSubpath')
            }, uploadLocationInput('singleUploadLocation', field, sourceOptions)) }}
        </div>
    {% endblock %}

    {% block fileTypesField %}
        {{ forms.checkboxField({
            label: "Restrict allowed file types?"|t('app'),
            class: 'restrictFiles',
            id: 'restrictFiles',
            name: 'restrictFiles',
            value: 1,
            checked: field.restrictFiles,
            toggle: 'restrict-allowed-types'
        }) }}

        <div id="restrict-allowed-types"{% if not field.restrictFiles %} class="hidden indent"{% endif %}>
            {% for option in fileKindOptions %}
                {{ forms.checkboxField({
                    label: option.label,
                    id: 'allowedKinds-'~option.value,
                    name: 'allowedKinds[]',
                    value: option.value,
                    checked: (option.value in field.allowedKinds)
                }) }}
            {% endfor %}
        </div>
    {% endblock %}

    {{ block('targetSiteField') }}
    {{ block('limitField') }}
    {{ block('viewModeField') }}
    {{ block('selectionLabelField') }}
    {{ block('localizeRelationsField') }}
{% endblock %}