{% extends "_layouts/cp" %}

{% set fullPageForm = true %}

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


{% block content %}
    {{ actionInput('volumes/save-volume') }}
    {{ redirectInput('settings/assets') }}
    {% if not isNewVolume %}{{ hiddenInput('volumeId', volume.id) }}{% endif %}

    {{ forms.textField({
        first: true,
        label: "Name"|t('app'),
        id: 'name',
        name: 'name',
        value: (volume is defined ? volume.name : null),
        errors: (volume is defined ? volume.getErrors('name') : null),
        autofocus: true,
        required: true,
    }) }}

    {{ forms.textField({
        first: true,
        label: "Handle"|t('app'),
        id: 'handle',
        name: 'handle',
        class: 'code',
        autocorrect: false,
        autocapitalize: false,
        value: (volume is defined ? volume.handle : null),
        errors: (volume is defined ? volume.getErrors('handle') : null),
        required: true,
    }) }}

    {{ forms.lightswitchField({
        label: "Assets in this volume have public URLs"|t('app'),
        name: 'hasUrls',
        on:   volume.hasUrls,
        toggle: "url-field"
    }) }}

    <div id="url-field" class="{% if not volume.hasUrls %}hidden{% endif %}">
        {{ forms.autosuggestField({
            label: "Base URL"|t('app'),
            instructions: "The base URL to the assets in this volume."|t('app'),
            id: 'url',
            class: ['ltr', 'volume-url'],
            name: 'url',
            suggestEnvVars: true,
            suggestAliases: true,
            value: (volume is defined ? volume.url : null),
            errors: (volume is defined ? volume.getErrors('url') : null),
            required: true,
            placeholder: "//example.com/path/to/folder"
        }) }}
    </div>

    <hr>

    {{ forms.selectField({
        label: "Volume Type"|t('app'),
        instructions: "What type of volume is this?"|t('app'),
        id: 'type',
        name: 'type',
        options: volumeTypeOptions,
        value: className(volume),
        toggle: true
    }) }}

    {{ missingVolumePlaceholder|raw }}

    {% for volumeType in volumeTypes %}
        {% set isCurrent = (volumeType == className(volume)) %}

        <div id="{{ volumeType|id }}"{% if not isCurrent %} class="hidden"{% endif %}>
            {% namespace 'types['~volumeType~']' %}
                {% if isCurrent %}
                    {{ volume.getSettingsHtml()|raw }}
                {% else %}
                    {{ volumeInstances[volumeType].getSettingsHtml()|raw }}
                {% endif %}
            {% endnamespace %}
        </div>
    {% endfor %}

    {% if craft.app.getIsMultiSite() %}
        <hr>

        {{ forms.selectField({
            label: 'Title Translation Method'|t('app'),
            instructions: 'How should {type} titles be translated?'|t('app', {
                type: lowerTypeName,
            }),
            id: 'translation-method',
            name: 'titleTranslationMethod',
            options: [
                { value: 'none', label: 'Not translatable'|t('app') },
                { value: 'site', label: 'Translate for each site'|t('app') },
                { value: 'siteGroup', label: 'Translate for each site group'|t('app') },
                { value: 'language', label: 'Translate for each language'|t('app') },
                { value: 'custom', label: 'Custom…'|t('app') },
            ]|filter,
            value: volume.titleTranslationMethod,
            toggle: true,
            targetPrefix: 'translation-method-'
        }) }}

        <div id="translation-method-custom" {% if volume.titleTranslationMethod != 'custom' %}class="hidden"{% endif %}>
            {{ forms.textField({
                label: 'Title Translation Key Format'|t('app'),
                instructions: 'Template that defines the Title field’s custom “translation key” format. {type} titles will be copied to all sites that produce the same key. For example, to make titles translatable based on the first two characters of the site handle, you could enter `{site.handle[:2]}`.'|t('app', {
                    type: typeName,
                }),
                id: 'translation-key-format',
                name: 'titleTranslationKeyFormat',
                value: volume.titleTranslationKeyFormat,
                errors: volume.getErrors('titleTranslationKeyFormat')
            }) }}
        </div>
    {% endif %}

    <hr>

    {{ forms.fieldLayoutDesignerField({
        fieldLayout: volume.getFieldLayout(),
    }) }}
{% endblock %}


{% if volume is not defined or not volume.handle %}
    {% js %}
        new Craft.HandleGenerator('#name', '#handle');
    {% endjs %}
{% endif %}
