<div id="bk-mylist" popover class="bk-panel" aria-label="{{ t('My list') }}" x-data>
    <div class="flex h-full flex-col">
        <div class="flex h-[var(--bk-header-h)] shrink-0 items-center justify-between gap-3 border-b border-line px-5">
            <h2 class="flex items-center gap-2 text-lg">{{ icon('bookmark-filled', 'size-5 text-primary') }}{{ t('My list') }}</h2>
            <button type="button" class="bk-icon-btn bk-icon-btn--plain" popovertarget="bk-mylist" popovertargetaction="hide" aria-label="{{ t('Close') }}">{{ icon('x') }}</button>
        </div>
        <div class="flex-1 overflow-y-auto p-3">
            <template x-for="item in $store.list.items" :key="item.id">
                <div class="bk-card bk-card--compact !mx-0">
                    <a :href="item.url" class="bk-card__media aspect-[2/3]" tabindex="-1" aria-hidden="true">
                        <img class="bk-card__img" :src="item.poster" alt="" x-show="item.poster" loading="lazy">
                    </a>
                    <a :href="item.url" class="bk-card__body">
                        <span class="bk-card__title" x-text="item.title"></span>
                        <span class="bk-card__meta" x-text="[item.type, item.year].filter(Boolean).join(' · ')"></span>
                    </a>
                    <button type="button" class="bk-icon-btn bk-icon-btn--plain" @click="$store.list.remove(item.id)" :aria-label="{{ t('Remove')|json_encode }} + ' ' + item.title">{{ icon('x', 'size-4') }}</button>
                </div>
            </template>
            <div class="bk-empty mt-2" x-show="!$store.list.items.length">
                <span class="bk-empty__icon">{{ icon('bookmark') }}</span>
                <p class="font-semibold text-fg">{{ t('Your list is empty') }}</p>
                <p class="text-sm">{{ t('Use “Add to Watchlist” on any title to save it here. Your list stays on this device.') }}</p>
            </div>
        </div>
    </div>
</div>
