{{--
    A WordPress/Gutenberg-style "+" inserter: sits between two blocks (or
    before the first / after the last). Hover shows a thin line with a "+"
    circle in the middle; click it to reveal a small menu of block types.
    Picking one creates that block at exactly this position in the page.

    $position   - the 0-based slot this inserter sits in.
    $prominent  - true only for the very first inserter on an empty page,
                  where there's nothing to hover near yet, so it stays
                  visible with a label instead of appearing only on hover.
--}}
<div class="inserter group relative {{ $prominent ? 'py-8' : 'py-1' }}">
    @unless ($prominent)
        <div class="absolute inset-x-4 top-1/2 -translate-y-1/2 border-t border-dashed border-neutral-200 opacity-0 group-hover:opacity-100 transition-opacity duration-150"></div>
    @endunless

    <div class="flex flex-col items-center justify-center gap-1.5">
        <button type="button"
            class="inserter-btn w-6 h-6 rounded-full bg-white border border-neutral-300 text-neutral-400 hover:text-white hover:bg-[#0a0a0b] hover:border-[#0a0a0b] flex items-center justify-center text-base leading-none transition-all duration-150 {{ $prominent ? '' : 'opacity-0 group-hover:opacity-100' }}"
            data-position="{{ $position }}"
            title="Add a block">+</button>
        @if ($prominent)
            <span class="text-neutral-400 text-xs">Add your first block</span>
        @endif
    </div>

    <div class="inserter-menu hidden absolute z-30 left-1/2 -translate-x-1/2 {{ $prominent ? 'top-full mt-2' : 'top-full mt-1' }} bg-white rounded-xl border border-black/[0.06] shadow-lg p-2 grid grid-cols-2 gap-1 w-64">
        @foreach ($blockTypes as $key => $label)
            <a href="{{ $createUrl }}?type={{ $key }}&position={{ $position }}"
               class="text-xs font-medium text-[#0a0a0b] bg-neutral-50 hover:bg-neutral-100 rounded-lg px-2 py-2 text-center transition-colors duration-150">
                {{ $label }}
            </a>
        @endforeach
    </div>
</div>