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

{{ forms.selectField({
    label: "Region"|t('scaleway-object-storage'),
    id: 'region',
    name: 'region',
    options: { 'fr-par': 'fr-par (Paris)', 'nl-ams': 'nl-ams (Amsterdam)', 'pl-waw': 'pl-waw (Warsaw)' },
    value: fs.region,
    class: 'scaleway-region',
    errors: fs.getErrors('region'),
    instructions: "The region where your bucket is located."|t('scaleway-object-storage'),
    required: true
}) }}

{{ forms.autosuggestField({
    label: "Access Key ID"|t('scaleway-object-storage'),
    id: 'keyId',
    name: 'keyId',
    suggestEnvVars: true,
    value: fs.keyId,
    errors: fs.getErrors('keyId'),
    class: 'scaleway-key-id',
    required: true,
}) }}

{{ forms.autosuggestField({
    label: "Secret Access Key"|t('scaleway-object-storage'),
    id: 'secret',
    name: 'secret',
    suggestEnvVars: true,
    value: fs.secret,
    errors: fs.getErrors('secret'),
    class: 'scaleway-secret-key',
    required: true,
}) }}

{% set bucketInput %}
    <div class="flex fullwidth">
        {{ forms.select({
            name: 'bucketSelectionMode',
            options: [
                { label: 'Choose…'|t('scaleway-object-storage'), value: 'choose' },
                { label: 'Manual…'|t('scaleway-object-storage'), value: 'manual' }
            ],
            value: fs.bucketSelectionMode,
            toggle: true,
            targetPrefix: '.bsm-'
        }) }}

        <div class="bsm-choose{% if fs.bucketSelectionMode == 'manual' %} hidden{% endif %}">
            {{ forms.select({
                id: 'bucket',
                name: 'bucket',
                options: { (fs.bucket): fs.bucket },
                value: fs.bucketSelectionMode == 'manual' ? fs.bucket,
                readonly: true,
                class: 's3-bucket-select'
            }) }}
        </div>
        <div class="bsm-choose{% if fs.bucketSelectionMode == 'manual' %} hidden{% endif %}">
            <div class="btn s3-refresh-buckets">{{ "Refresh"|t('scaleway-object-storage') }}</div>
        </div>
        <div class="bsm-choose{% if fs.bucketSelectionMode == 'manual' %} hidden{% endif %}">
            <div class="spinner hidden"></div>
        </div>

        <div class="bsm-manual{% if fs.bucketSelectionMode == 'choose' %} hidden{% endif %} flex-grow">
            {{ forms.autosuggest({
                label: "Bucket"|t('scaleway-object-storage'),
                class: 'ltr s3-manualBucket',
                name: 'manualBucket',
                suggestEnvVars: true,
                value: fs.bucket,
                placeholder: 'Bucket'|t('scaleway-object-storage')
            }) }}
        </div>
    </div>
{% endset %}


{{ forms.field({
    label: "Bucket"|t('scaleway-object-storage'),
    id: 'bucket',
    required: true,
    errors: fs.getErrors('bucket'),
}, bucketInput) }}

{{ forms.autosuggestField({
    label: "Subfolder"|t('scaleway-object-storage'),
    instructions: "If you want to use a bucket’s subfolder as a fs, specify the path to use here."|t('scaleway-object-storage'),
    id: 'subfolder',
    class: 'ltr',
    name: 'subfolder',
    suggestEnvVars: true,
    value: fs.subfolder,
    errors: fs.getErrors('subfolder'),
    placeholder: "path/to/subfolder"|t('scaleway-object-storage')
}) }}

{{ forms.lightswitchField({
    label: "Add the subfolder to the Base URL?"|t('scaleway-object-storage'),
    instructions: "Turn this on if you want to add the specified subfolder to the Base URL."|t('scaleway-object-storage'),
    name: 'addSubfolderToRootUrl',
    on: fs.addSubfolderToRootUrl,
}) }}

<hr/>

<hr />
{% set cacheInput %}
    {% set expires = (fs.expires|length > 0 ? fs.expires|split(' ') : ['', ''])%}

    <div class="flex">
        <div>
            {{ forms.text({
                id: 'expiresAmount',
                value: expires[0],
                size: 2,
                class: 's3-expires-amount'
            }) }}
        </div>
        {{ forms.select({
            id: 'expiresPeriod',
            options: periods,
            value: expires[1],
            class: 's3-expires-period'
        }) }}
    </div>
    {{ forms.hidden({
        name: "expires",
        value: fs.expires,
        class: "expires-combined"
    }) }}
{% endset %}

{{ forms.field({
    label: "Cache Duration"|t,
    instructions: "The Cache-Control duration that assets should be uploaded to the cloud with.",
    id: 'cacheDuration',
}, cacheInput) }}

{% do view.registerAssetBundle("calips\\scaleway_object_storage\\ScalewayObjectStorageBundle") %}