{#- Inside a .bk-player element with x-data="mkPlayer(…)": the frame, the poster with its play button, and the empty and error states. Expects: poster -#}
<template x-if="frame">
    <iframe :src="frame" title="{{ t('Video player') }}" allow="autoplay; fullscreen; picture-in-picture; encrypted-media" allowfullscreen referrerpolicy="origin"></iframe>
</template>
<button type="button" class="bk-player__poster" x-show="!frame && state !== 'empty' && state !== 'error'" @click="play()" aria-label="{{ t('Play') }}">
    {%- if poster|default(null) %}<img src="{{ poster }}" alt="" loading="lazy" decoding="async">{% endif -%}
    <span x-show="state !== 'loading'">{{ icon('play-filled', 'size-8 translate-x-0.5') }}</span>
    <i class="bk-spinner relative" x-show="state === 'loading'" x-cloak></i>
</button>
<div class="bk-player__state" x-show="state === 'empty'" x-cloak>
    {{ icon('server', 'size-9 opacity-60') }}
    <p class="font-semibold text-white">{{ t('No video sources yet') }}</p>
    <p class="max-w-sm text-sm">{{ t('We’re still adding sources for this title. Check back soon.') }}</p>
</div>
<div class="bk-player__state" x-show="state === 'error'" x-cloak>
    {{ icon('alert', 'size-9 opacity-70') }}
    <p x-text="message"></p>
    <button type="button" class="bk-btn bk-btn--glass bk-btn--sm" @click="state = 'idle'; load(true)">{{ icon('refresh', 'size-4') }}{{ t('Try again') }}</button>
</div>
<noscript><div class="bk-player__state">{{ t('Turn on JavaScript to play this video.') }}</div></noscript>