{# Popover targets for the `ferienpass--cms-wishlists` controller.
   Include this once inside any element that has data-controller="ferienpass--cms-wishlists";
   the controller wires the popover to whichever button calls `requestCardPopover()`
   or `openFilterMenu`.

   Toast feedback for "link copied" / "wishlist created" uses the page-wide
   `#notifications` live region (rendered by `<twig:Cms:Notifications/>` in
   fe_page.html.twig), so it's not declared here. #}

<div data-ferienpass--cms-wishlists-target="popover"
     role="dialog"
     aria-label="{{ 'wishlists.title'|trans({}, 'cms') }}"
     hidden
     class="absolute z-50 min-w-[280px] rounded-xl border border-gray-200 bg-white p-1.5 shadow-xl dark:border-white/10 dark:bg-gray-800">
    <div data-ferienpass--cms-wishlists-target="popTitle"
         class="px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
        {{ 'wishlists.title'|trans({}, 'cms') }}
    </div>
    <div data-ferienpass--cms-wishlists-target="popList" class="max-h-64 overflow-y-auto"></div>
    <div class="my-1 h-px bg-gray-100 dark:bg-white/10"></div>
    <button type="button"
            data-action="ferienpass--cms-wishlists#toggleNewForm"
            class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-primary-700 hover:bg-primary-50 dark:text-primary-300 dark:hover:bg-primary-400/10">
        <twig:ux:icon name="lucide:plus" class="h-4 w-4" />
        {{ 'wishlists.new'|trans({}, 'cms') }}
    </button>
    <div data-ferienpass--cms-wishlists-target="newForm" hidden class="flex gap-1.5 p-2">
        <input type="text"
               data-ferienpass--cms-wishlists-target="newName"
               data-action="input->ferienpass--cms-wishlists#updateNewBtn keydown.enter->ferienpass--cms-wishlists#createWishlist"
               placeholder="{{ 'wishlists.namePlaceholder'|trans({}, 'cms') }}"
               maxlength="40"
               class="!flex-1 !rounded-md !border !border-gray-200 !bg-white !px-2.5 !py-2 !text-sm focus:!border-primary-500 focus:!ring-2 focus:!ring-primary-500/30 dark:!border-white/15 dark:!bg-gray-900 dark:!text-gray-100" />
        <button type="button"
                data-ferienpass--cms-wishlists-target="newBtn"
                data-action="ferienpass--cms-wishlists#createWishlist"
                disabled
                class="rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 disabled:bg-gray-200 disabled:text-gray-500 dark:disabled:bg-white/10">
            {{ 'wishlists.create'|trans({}, 'cms') }}
        </button>
    </div>
</div>
