{% extends "_layouts/cp" %}

{% set fullPageForm = true %}

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


{% block content %}
        <input type="hidden" name="action" value="volumes/save-volume">
        {{ redirectInput('settings/assets') }}
        {% if not isNewVolume %}<input type="hidden" name="volumeId" value="{{ volume.id }}">{% endif %}

        <div id="assetvolume-settings">
            {{ 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',
                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.textField({
                    label: "Base URL"|t('app'),
                    instructions: "The base URL to the assets in this volume. An absolute URL ({ex1}) or protocol-relative URL ({ex2}) is recommended. It can begin with an alias, such as {ex3}."|t('app', {
                        ex1: '“`http://example.com/path/to/folder`”',
                        ex2: '“`//example.com/path/to/folder”`',
                        ex3: '`@web`'
                    }),
                    id: 'url',
                    class: 'ltr volume-url',
                    name: 'url',
                    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 %}
        </div>

        <div id="assetvolume-fieldlayout" class="hidden">
            {% include "_includes/fieldlayoutdesigner" with {
                fieldLayout: volume.getFieldLayout(),
                customizableTabs: false,
                tab: 'fieldlayout'
            } only %}
        </div>
{% endblock %}


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