{% 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}))."|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 info %}
    <span class="info">{{ "According to Cloudflare, it can take up to 30 seconds for cached files to be purged across all of its edge nodes. Adding a delay between purging the cache and warming it will slow down the process but may help to ensure that the updated pages really are warmed. A value of 5 is recommended."|t('blitz') }}</span>
{% endset %}
{{ forms.textField({
    type: 'number',
    min: 0,
    max: 30,
    unit: "seconds"|t('blitz'),
    label: "Warm Cache Delay"|t('blitz'),
    instructions: "The number of seconds to wait after purging the cache before warming the cache should begin."|t('blitz') ~ info,
    name: 'warmCacheDelay',
    value: purger.warmCacheDelay,
    errors: purger.getErrors('warmCacheDelay'),
}) }}

{% 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 page 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 %}

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