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

{% set cols = {
    heading: {
        type: 'heading',
        heading: "Site"|t('blitz'),
        thin: true,
    },
    zoneId: {
        type: 'singleline',
        heading: "Zone ID"|t('blitz'),
    },
} %}

{% set rows = [] %}
{% for site in craft.app.sites.getAllSites() %}
    {% set rows = rows|merge({
        (site.uid): {
            heading: site.name,
            zoneId: purger.zoneIds[site.uid] is defined ? purger.zoneIds[site.uid]['zoneId'],
        }
    }) %}
{% endfor %}

{% set info %}
    <span class="info">{{ 'The zone ID for each site can be found on the “Overview” screen of your domains in your Cloudflare account. This can be set to an environment variable. <a href="{url}" class="go" target="_blank">Learn more</a>'|t('blitz', {url: 'https://docs.craftcms.com/v3/config/environments.html'})|raw }}</span>
{% endset %}
{{ forms.editableTableField({
    label: "Zone IDs"|t('blitz'),
    instructions: "Choose which sites should be purged by entering their zone IDs."|t('blitz') ~ info,
    name: 'zoneIds',
    id: 'zoneIds',
    cols: cols,
    rows: rows,
    staticRows: true,
    errors: purger.getErrors('zoneIds'),
    required: true,
}) }}


{{ forms.selectField({
    label: "Authentication Method"|t('blitz'),
    instructions: "The authentication method for connecting to the Cloudflare API."|t('blitz'),
    suggestEnvVars: true,
    name: 'authenticationMethod',
    value: purger.authenticationMethod,
    options: {
        apiToken: "API Token"|t('blitz'),
        apiKey: "API Key"|t('blitz'),
    },
    toggle: true,
    errors: purger.getErrors('authenticationMethod'),
    required: true,
}) }}

<div id="apiToken" class="hidden">
    {{ forms.autosuggestField({
        label: "API Token"|t('blitz'),
        instructions: "The API token for your Cloudflare account (API tokens can be created [here]({url})). The token must have the permission `Cache Purge → Purge` for at least the zone(s) above."|t('blitz', {url: 'https://dash.cloudflare.com/profile/api-tokens'}),
        suggestEnvVars: true,
        name: 'apiToken',
        value: purger.apiToken,
        errors: purger.getErrors('apiToken'),
        required: true,
    }) }}
</div>

<div id="apiKey" class="hidden">
    {{ forms.autosuggestField({
        label: "API Key"|t('blitz'),
        instructions: "The global API key for your Cloudflare account (API keys can be created [here]({url}))."|t('blitz', {url: 'https://dash.cloudflare.com/profile/api-tokens'}),
        suggestEnvVars: true,
        name: 'apiKey',
        value: purger.apiKey,
        errors: purger.getErrors('apiKey'),
        required: true,
    }) }}

    {{ forms.autosuggestField({
        label: "Email"|t('blitz'),
        instructions: "The email address associated with your Cloudflare account."|t('blitz'),
        suggestEnvVars: true,
        name: 'email',
        value: purger.email,
        errors: purger.getErrors('email'),
        required: true,
    }) }}
</div>

{% set helpText %}
Cloudflare does not cache HTML by default. To enable static page caching, first set “Browser Cache TTL” to “Respect Existing Headers” in the  “Caching” page of the domain in your account. Then create a new page rule in the “Page Rules” page (you get 3 rules with a free plan). Enter a URL pattern such as `domain.com/*` and add a “Cache Level” setting with a value of “Cache Everything”. Click “Save and Deploy” and then visit your site. With dev tools open you should see a cache response (`HIT`, `MISS`, etc.) in the `CF-Cache-Status` header.
{% endset %}

<p class="light">
    {{ helpText|markdown }}
</p>