{{#
    @name Consent gate
    @desc An extendable consent gate.
    @param aspect_ratio Aspect ratio class. Defaults to `aspect-video`.
    @param explainer_accept The text explaining that embeds will be accepted. Displayed when the consent banner is visible. Defaults to `trans:strings.consent_embeds_accept`.
    @param explainer_open The text explaining that the consent banner will be opened. Displayed when the consent banner is hidden. Defaults to `trans:strings.consent_embeds_open`.
#}}

<!-- /components/_consent_gate.antlers.html -->
{{ _consent_embeds =
    (environment == 'local' && seo:trackers_local && seo:embeds) or
    (environment == 'staging' && seo:trackers_staging && seo:embeds) or
    (environment == 'production' && seo:trackers_production && seo:embeds)
}}
<div
    {{ if _consent_embeds }}
        x-data
    {{ /if }}
    class="{{ class }}"
>
    <div class="relative {{ aspect_ratio ?? 'aspect-video' }}">
        {{ if _consent_embeds }}
            <div
                x-show="!$store.consentBanner.getConsent() || !$store.consentBanner.getConsentValue('embeds')"
                class="absolute z-10 inset-0 p-6 flex justify-center items-center bg-neutral/10 text-neutral/80"
            >
                <a @click.prevent="!$store.consentBanner.getConsent() ? $store.consentBanner.accept('embeds') : $store.consentBanner.revokeConsent()" href="#" class="underline">
                    <span x-show="!$store.consentBanner.getConsent()">{{ explainer_accept ?? { trans:strings.consent_embeds_accept } }}</span>
                    <span x-show="$store.consentBanner.getConsent()">{{ explainer_open ?? { trans:strings.consent_embeds_open } }}</span>
                </a>
            </div>
            <template x-if="$store.consentBanner.getConsent() && $store.consentBanner.getConsentValue('embeds')">
                {{ slot }}
            </template>
        {{ else }}
            {{ slot }}
        {{ /if }}
    </div>

    {{ slot:append }}
</div>
<!-- End: /components/_consent_gate.antlers.html -->