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

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

<div class="cloudflare-quick-purge">
  {% if isConfigured %}
    <div class="purge-option purge-individual-urls">
      <div class="heading">
        <div class="icon">
          <svg xmlns="http://www.w3.org/2000/svg">
            <path id="artwork"
                  d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3A8.994 8.994 0 0 0 13 3.06V1h-2v2.06A8.994 8.994 0 0 0 3.06 11H1v2h2.06A8.994 8.994 0 0 0 11 20.94V23h2v-2.06A8.994 8.994 0 0 0 20.94 13H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/>
          </svg>
        </div>
        <h3>{{ 'Purge URLs'|t('cloudflare') }}</h3>
      </div>

      <div class="purge-urls-form">
        <form method="post">
          {{ forms.textarea({
            id: 'settings-urls',
            required: true,
            name: 'urls',
            autofocus: true,
            placeholder: 'Full URLs, one per line'|t( 'cloudflare' ),
            errors: settings.getErrors('urls')
          }) }}

          {{ tag('button', {
            class: ['btn', 'submit', 'fullwidth'],
            id: 'settings-purge-urls',
            text: 'Purge URLs'|t('cloudflare')
          }) }}
        </form>
      </div>
    </div>
    <div class="purge-option purge-all" id="settings-purge-all">
      <div class="heading">
        <div class="icon">
          <svg xmlns="http://www.w3.org/2000/svg">
            <path id="artwork"
                  d="M19.35 10.04A7.49 7.49 0 0 0 12 4c-1.48 0-2.85.43-4.01 1.17l1.46 1.46a5.497 5.497 0 0 1 8.05 4.87v.5H19c1.66 0 3 1.34 3 3 0 1.13-.64 2.11-1.56 2.62l1.45 1.45C23.16 18.16 24 16.68 24 15c0-2.64-2.05-4.78-4.65-4.96zM3 5.27l2.75 2.74C2.56 8.15 0 10.77 0 14c0 3.31 2.69 6 6 6h11.73l2 2L21 20.73 4.27 4 3 5.27zM7.73 10l8 8H6c-2.21 0-4-1.79-4-4s1.79-4 4-4h1.73z"/>
          </svg>
        </div>
        <h3>{{ 'Purge Everything'|t('cloudflare') }}</h3>
      </div>
    </div>
  {% else %}
    <div class="cloudflare-not-configured">
      <p>
        {{- 'Please <a href="{settingsUrl}">configure the Cloudflare plugin</a> first.'|t('cloudflare', {
          settingsUrl: url('settings/plugins/cloudflare')
        })|raw -}}
      </p>
    </div>
  {% endif %}
</div>