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

{{ forms.autosuggestField({
    label: "Access Key ID"|t('aws-s3'),
    id: 'keyId',
    name: 'keyId',
    suggestEnvVars: true,
    value: fs.keyId,
    errors: fs.getErrors('keyId'),
    class: 's3-key-id',
    instructions: 'You can leave this field empty if you are using an EC2 instance with an applicable IAM role assignment.'|t('aws-s3')
}) }}

{{ forms.autosuggestField({
    label: "Secret Access Key"|t('aws-s3'),
    id: 'secret',
    name: 'secret',
    suggestEnvVars: true,
    value: fs.secret,
    errors: fs.getErrors('secret'),
    class: 's3-secret-key',
    instructions: 'You can leave this field empty if you are using an EC2 instance with an applicable IAM role assignment.'|t('aws-s3')
}) }}

{% set bucketInput %}
    <div class="flex fullwidth">
        {{ forms.select({
            name: 'bucketSelectionMode',
            options: [
                { label: 'Choose…'|t('aws-s3'), value: 'choose' },
                { label: 'Manual…'|t('aws-s3'), 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('aws-s3') }}</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('aws-s3'),
                class: 'ltr s3-manualBucket',
                name: 'manualBucket',
                suggestEnvVars: true,
                value: fs.bucket,
                placeholder: 'Bucket'|t('aws-s3')
            }) }}
        </div>
        <div class="bsm-manual{% if fs.bucketSelectionMode == 'choose' %} hidden{% endif %} flex-grow">
            {{ forms.autosuggest({
                label: "Region"|t('aws-s3'),
                class: 'ltr s3-manualRegion',
                name: 'manualRegion',
                suggestEnvVars: true,
                value: fs.region,
                placeholder: 'Region'|t('aws-s3')
            }) }}
        </div>
    </div>

    <input type="hidden" name="region" class="s3-region" value="{{ fs.region }}" />
{% endset %}


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

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

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

{{ forms.lightswitchField({
    label: "Make Uploads Public"|t('aws-s3'),
    instructions: "Sets the ACL for uploaded objects.",
    id: 'makeUploadsPublic',
    name: 'makeUploadsPublic',
    on: fs.makeUploadsPublic
}) }}

<hr/>

{{ forms.lightswitchField({
    label: "Attempt to set the focal point automatically?"|t('aws-s3'),
    instructions: "Turn this on if you want to use the AWS Rekognition to try to set the focal point to a detected face.\n ⚠️Using this will incur extra cost for each upload.\n ⚠️Using this requires the `rekognition:DetectFaces` action to be allowed."|t('aws-s3'),
    name: 'autoFocalPoint',
    on: fs.autoFocalPoint,
}) }}

<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) }}

{{ forms.autosuggestField({
    label: "CloudFront Distribution ID"|t('aws-s3'),
    instructions: "If you’re using CloudFront as CDN for your assets, enter the distribution ID here so Assets can purge the files from CDN."|t('aws-s3'),
    id: 'cfDistributionId',
    class: 'ltr',
    name: 'cfDistributionId',
    suggestEnvVars: true,
    value: fs.cfDistributionId,
    errors: fs.getErrors('cfDistributionId')
}) }}

{{ forms.autosuggestField({
    label: "CloudFront Path Prefix"|t('aws-s3'),
    instructions: "If you’re using CloudFront as CDN for your assets and have configured subfolders or custom behaviors, enter the path prefix Craft should use when invalidating files."|t('aws-s3'),
    id: 'cfPrefix',
    class: 'ltr',
    name: 'cfPrefix',
    suggestEnvVars: true,
    value: fs.cfPrefix,
    errors: fs.getErrors('cfPrefix')
}) }}

{% do view.registerAssetBundle("craft\\awss3\\AwsS3Bundle") %}