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

{{ forms.autosuggestField({
    label: "Project ID"|t('google-cloud'),
    id: 'projectId',
    name: 'projectId',
    suggestEnvVars: true,
    value: volume.projectId,
    errors: volume.getErrors('projectId'),
    class: 'google-project-id',
    instructions: 'Your Google project ID'|t('google-cloud'),
    required: true
}) }}

{{ forms.autosuggestField({
    label: "Contents of the access key file"|t('google-cloud'),
    id: 'keyFileContents',
    name: 'keyFileContents',
    value: volume.keyFileContents,
    errors: volume.getErrors('keyFileContents'),
    class: 'google-key-file-contents',
    instructions: 'If you are using an environment variable, make sure the "\\n" characters in the RSA key are properly escaped. You can leave this blank if you set <a href="{link}">application default credentials</a>.'|t('google-cloud', {
        link: 'https://github.com/googleapis/google-auth-library-php#application-default-credentials'
    }),
    suggestEnvVars: true,
    rows: 8,
    cols: 50
}) }}

{% set bucketInput %}
    <div class="flex fullwidth">
        {{ forms.select({
        name: 'bucketSelectionMode',
        options: [
        { label: 'Choose…'|t('google-cloud'), value: 'choose' },
        { label: 'Manual…'|t('google-cloud'), value: 'manual' }
        ],
        value: volume.bucketSelectionMode,
        toggle: true,
        targetPrefix: '.bsm-'
        }) }}
    
        <div class="bsm-choose{% if volume.bucketSelectionMode == 'manual' %} hidden{% endif %}">
            {{ forms.select({
            id: 'bucket',
            name: 'bucket',
            options: { (volume.bucket): volume.bucket },
            value: volume.bucketSelectionMode == 'manual' ? volume.bucket,
            readonly: true,
            class: 'google-bucket-select'
            }) }}
        </div>
        <div class="bsm-choose{% if volume.bucketSelectionMode == 'manual' %} hidden{% endif %}">
            <div class="btn google-refresh-buckets">{{ "Refresh"|t('google-cloud') }}</div>
        </div>
        <div class="bsm-choose{% if volume.bucketSelectionMode == 'manual' %} hidden{% endif %}">
            <div class="spinner hidden"></div>
        </div>
    
        <div class="bsm-manual{% if volume.bucketSelectionMode == 'choose' %} hidden{% endif %} flex-grow">
            {{ forms.autosuggest({
            label: "Bucket"|t('google-cloud'),
            class: 'ltr google-manualBucket',
            name: 'manualBucket',
            suggestEnvVars: true,
            value: volume.bucket,
            placeholder: 'Bucket'|t('google-cloud')
            }) }}
        </div>
    </div>
{% endset %}

{{ forms.field({
    label: "Bucket"|t('google-cloud'),
    id: 'bucket',
    required: true,
    errors: volume.getErrors('bucket'),
}, bucketInput) }}

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

<hr>

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

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

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

{% do view.registerAssetBundle("craft\\googlecloud\\GoogleCloudBundle") %}