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

{% js %}
window.__CLOUDFLARE_PLUGIN = {
    messages: {
        credentialVerificationFailed: "{{ 'Could not verify API credentials.'|t('cloudflare') }}",
            credentialsMissing: "{{ 'Please enter required API credentials.'|t('cloudflare') }}",
        },
        actions: {
            verifyCredentials: "cloudflare/default/verify-connection",
            fetchZones: "cloudflare/default/fetch-zones",
        }
    };
{% endjs %}

{% do view.registerAssetBundle("putyourlightson\\cloudflare\\assets\\CloudflareAsset") %}

{{ forms.selectField({
    label: 'Authentication Type'|t('cloudflare'),
    id: 'authType',
    first: true,
    required: true,
    name: 'authType',
    options: [
        { label: 'Key', value: 'key' },
        { label: 'Token', value: 'token' },
    ],
    value: settings.authType,
    autofocus: true,
    errors: settings.getErrors('authType'),
    toggle: true,
    targetPrefix: 'fields-api-',
    instructions: 'Choose whether you’ll be using an account-level key or scope-limited token.'|t('cloudflare')
}) }}

<div id="fields-api-token"{% if not (settings.authType == 'token') %} class="hidden"{% endif %}>
    {{ forms.autosuggestField({
        label: 'Cloudflare API Token'|t('cloudflare'),
        id: 'apiToken',
        required: true,
        name: 'apiToken',
        type: 'password',
        class: 'code',
        suggestEnvVars: true,
        suggestions: craft.cp.getEnvSuggestions(),
        value: settings.apiToken,
        errors: settings.getErrors('apiToken'),
        instructions: 'Add your API token. It must include at least `cache_purge:edit` and `zone:read` permissions.'|t('cloudflare'),
    }) }}
</div>

<div id="fields-api-key"{% if not (settings.authType == 'key' or settings.authType is empty) %} class="hidden"{% endif %}>
    {% set zoneOptions = craft.cloudflare.getZoneOptions() %}
    {{ forms.autosuggestField({
        label: 'Cloudflare API Key'|t('cloudflare'),
        id:  'apiKey',
        required: true,
        name: 'apiKey',
        type: 'password',
        class: 'code',
        suggestEnvVars: true,
        suggestions: craft.cp.getEnvSuggestions(),
        value: settings.apiKey,
        autofocus: true,
        errors: settings.getErrors('apiKey'),
        instructions: 'Add your API key, which you’ll find in the _My Profile_ section of Cloudflare’s interface.'|t('cloudflare'),
    }) }}

    {{ forms.autosuggestField( {
        label: 'Cloudflare Account Email'|t('cloudflare'),
        id: 'email',
        required: true,
        name: 'email',
        class: 'code',
        suggestEnvVars: true,
        suggestions: craft.cp.getEnvSuggestions(),
        value: settings.email,
        placeholder: currentUser.email,
        autofocus: true,
        errors: settings.getErrors('email'),
        instructions: 'Specify which account email should be used for API requests.'|t('cloudflare')
    }) }}
</div>

<br>

<div class="cloudflare-verify{% if zoneOptions | length %} verified{% endif %}">
    {{ forms.button({
        label: 'Verify Credentials'|t('cloudflare'),
        id: 'cf-test',
        spinner: true,
    }) }}
</div>

<div>
    {% set hardcodedZone = settings.zoneIsStatic() %}
    {% set zoneListSupported = settings.canListZones() %}

    {% if zoneListSupported %}
        <div id="zone-id-select">
            {{ forms.selectField({
                label: 'Cloudflare Zone'|t('cloudflare'),
                id: 'zone-select',
                required: true,
                name: 'zone',
                options: zoneOptions,
                value: settings.zone,
                autofocus: true,
                errors: settings.getErrors('zone'),
                instructions: 'Specify which Cloudflare Zone is utilized by this site.'|t('cloudflare')
            }) }}
        </div>
    {% else %}
        {% set warningMessage = 'Unable to list zones for selection. You must specify a Zone ID.'|t('cloudflare') %}
        {% if settings.zoneIsStatic() %}
            {% set warningMessage = 'Zone ID hardcoded in config file.'|t('cloudflare') %}
        {% endif %}
        <div id="zone-id-input">
            {{ forms.textField( {
                label: 'Cloudflare Zone ID'|t('cloudflare'),
                id: 'zone-input',
                required: true,
                name: 'zone',
                class: 'code',
                value: settings.zone,
                autofocus: true,
                errors: settings.getErrors('zone'),
                disabled: settings.zoneIsStatic(),
                warning: warningMessage,
                instructions: 'The Cloudflare Zone ID utilized by this site.'|t('cloudflare')
            }) }}
        </div>
    {% endif %}

    <hr>

    {{ forms.checkboxGroupField({
        label: 'Automatically Purge Elements'|t('cloudflare'),
        id: 'purgeElements',
        name: 'purgeElements',
        errors: settings.getErrors('purgeElements'),
        options: elementTypes,
        values: settings.purgeElements,
        instructions: "Select elements whose URLs should automatically be purged when they’re updated."|t('cloudflare')
    }) }}
</div>