{%- set d = data.embeds -%}
{%- set s = settings -%}
{%- set types = d.types|filter(type => type.sample) -%}
{%- if d.enabled and types -%}
{%- set icons = { movie: 'film', series: 'tv', drama: 'heart', anime: 'sparkles', manga: 'book-open', video: 'play' } -%}
{%- set first = types|filter(type => type.key == s.start_type)|first ?: types|first -%}
{%- set pick = first.sample -%}
{%- set config = {
    base: site.url|trim('/', 'right'), lookup: runtime_url('embed'), types: types, start: first.key,
    text: { error: t('Something went wrong. Please try again.') }
} -%}
<section class="kb-hero" x-data="mkEmbedBuilder({{ config|json_encode }})" @keydown.escape.window="$refs.preview && $refs.preview.close()">
    <div class="kb-hero__bg" aria-hidden="true">
        {%- if pick.backdrop %}<img src="{{ pick.backdrop }}" :src="current.backdrop" x-show="current.backdrop" alt="" fetchpriority="high">{% endif -%}
    </div>

    <div class="bk-container kb-hero__inner">
        {%- if s.badge %}<span class="kb-pill">{{ icon('code', 'size-4') }}{{ s.badge }}</span>{% endif -%}
        <h1 class="kb-hero__title" x-text="current.title">{{ pick.title }}</h1>
        <p class="kb-hero__text" x-show="current.text" x-text="current.text">{{ pick.text }}</p>

        {%- if types|length > 1 -%}
            <div class="kb-types" role="radiogroup" aria-label="{{ t('Type') }}" style="--n: {{ types|length }}">
                {%- for type in types -%}
                    <button type="button" class="kb-type" role="radio" aria-checked="{{ type.key == first.key ? 'true' : 'false' }}" :aria-checked="(type === '{{ type.key }}').toString()" @click="pick('{{ type.key }}')">
                        {{ icon(icons[type.key] ?? 'grid', 'size-7') }}
                        <span class="kb-type__name">{{ type.label }}</span>
                        {%- if s.show_counts %}<span class="kb-type__count">{{ t(type.count == 1 ? ':count title' : ':count titles', { count: type.count|number_format }) }}</span>{% endif -%}
                    </button>
                {%- endfor -%}
            </div>
        {%- endif -%}

        <form class="kb-bar" @submit.prevent="find()">
            {{ icon('link', 'size-5 shrink-0 opacity-60') }}
            <input class="kb-bar__id" value="{{ pick.ref }}" x-model.trim="id" :placeholder="ids" aria-label="{{ t('ID') }}" spellcheck="false" autocomplete="off">
            <label class="kb-bar__num" x-show="structure === 'episodic'" x-cloak><span>{{ t('S') }}</span><input type="number" min="0" x-model.number="season" aria-label="{{ t('Season') }}"></label>
            <label class="kb-bar__num" x-show="structure === 'episodic'" x-cloak><span>{{ t('E') }}</span><input type="number" min="1" x-model.number="episode" aria-label="{{ t('Episode') }}"></label>
            <label class="kb-bar__num" x-show="structure === 'chapters'" x-cloak><span>{{ t('Ch.') }}</span><input inputmode="decimal" x-model.trim="chapter" aria-label="{{ t('Chapter') }}"></label>
            <button type="submit" class="bk-btn bk-btn--primary" :disabled="loading">
                <span class="bk-spinner bk-spinner--sm" x-show="loading" x-cloak></span>{{ t('Get embed link') }}
            </button>
        </form>

        <div class="kb-result" x-show="!error">
            <img class="kb-result__poster" src="{{ pick.poster }}" :src="current.poster" x-show="current.poster" alt="" loading="lazy">
            <div class="kb-result__body">
                <p class="kb-result__head">
                    <a class="kb-result__title" href="{{ pick.url }}" :href="current.url" x-text="current.title">{{ pick.title }}</a>
                    <span class="kb-result__meta" x-show="current.year" x-text="current.year">{{ pick.year }}</span>
                    <span class="kb-result__meta kb-result__chip" x-show="current.label" x-text="current.label">{{ pick.label }}</span>
                </p>
                <div class="kb-result__row">
                    <code class="kb-result__link" x-text="url"></code>
                    <button type="button" class="kb-btn" @click="copy('url')">
                        <span class="contents" x-show="copied !== 'url'">{{ icon('copy', 'size-4') }}{{ t('Copy link') }}</span>
                        <span class="contents" x-show="copied === 'url'" x-cloak>{{ icon('check', 'size-4') }}{{ t('Copied') }}</span>
                    </button>
                    <button type="button" class="kb-btn" @click="copy('html')">
                        <span class="contents" x-show="copied !== 'html'">{{ icon('code', 'size-4') }}{{ t('Copy HTML') }}</span>
                        <span class="contents" x-show="copied === 'html'" x-cloak>{{ icon('check', 'size-4') }}{{ t('Copied') }}</span>
                    </button>
                    {%- if s.show_preview -%}
                        <button type="button" class="bk-btn bk-btn--primary bk-btn--sm" @click="preview()">{{ icon('play-filled', 'size-4') }}{{ t('Play preview') }}</button>
                    {%- endif -%}
                </div>
            </div>
        </div>
        <p class="kb-result kb-result--error" x-show="error" x-text="error" role="alert" x-cloak></p>
    </div>

    {%- if s.show_preview -%}
        <dialog class="bk-dialog bk-dialog--video" x-ref="preview" @close="frame = ''" @click.self="$refs.preview.close()" aria-label="{{ t('Preview') }}">
            <div class="relative aspect-video w-full overflow-hidden rounded-[inherit] bg-black">
                <template x-if="frame">
                    <iframe class="absolute inset-0 size-full" :src="frame" title="{{ t('Preview') }}" allow="autoplay; fullscreen; picture-in-picture; encrypted-media" allowfullscreen></iframe>
                </template>
            </div>
            <button type="button" class="bk-icon-btn bk-dialog__close" @click="$refs.preview.close()" aria-label="{{ t('Close') }}">{{ icon('x') }}</button>
        </dialog>
    {%- endif -%}
</section>
{%- endif -%}