@props([
    'title',
])

@php
    $titleId = 'info-modal-title-' . \Illuminate\Support\Str::slug($title);
@endphp

<span x-data="{ infoModalOpen: false }" class="inline-block align-middle">
    <button
        type="button"
        @click="infoModalOpen = true"
        aria-haspopup="dialog"
        class="info-modal-trigger inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-avrio-green hover:bg-green-50"
    >
        <svg viewBox="0 0 20 20" fill="none" class="h-3.5 w-3.5" aria-hidden="true">
            <circle cx="10" cy="10" r="9" stroke="currentColor" stroke-width="1.5" />
            <line x1="10" y1="9" x2="10" y2="14.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
            <circle cx="10" cy="6" r="0.9" fill="currentColor" />
        </svg>
        <span class="sr-only">Več informacij: {{ $title }}</span>
    </button>

    <div
        x-show="infoModalOpen"
        x-cloak
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        @keydown.escape.window="infoModalOpen = false"
        class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
    >
        <div
            x-show="infoModalOpen"
            x-trap.inert.noscroll="infoModalOpen"
            x-transition:enter="transition ease-out duration-300 transform"
            x-transition:enter-start="opacity-0 scale-95"
            x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-200 transform"
            x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-95"
            @click.outside="infoModalOpen = false"
            class="info-modal-panel w-full max-w-lg rounded-lg bg-white p-6 shadow-xl"
            role="dialog"
            aria-modal="true"
            aria-labelledby="{{ $titleId }}"
        >
            <div class="mb-4 flex items-start justify-between gap-4">
                <h3 id="{{ $titleId }}" class="text-sm font-semibold text-gray-700 uppercase">{{ $title }}</h3>
                <button
                    type="button"
                    @click="infoModalOpen = false"
                    class="shrink-0 text-gray-400 hover:text-gray-600"
                    aria-label="Zapri"
                >
                    <svg viewBox="0 0 20 20" fill="none" class="h-5 w-5" aria-hidden="true">
                        <line x1="4" y1="4" x2="16" y2="16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                        <line x1="16" y1="4" x2="4" y2="16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                    </svg>
                </button>
            </div>

            <div class="space-y-2 text-sm leading-relaxed text-gray-600">
                {{ $slot }}
            </div>

            <div class="mt-6 text-right">
                <button
                    type="button"
                    @click="infoModalOpen = false"
                    class="base-button zelen-outline rounded-md border border-avrio-green px-4 py-1.5 text-sm font-medium text-avrio-green hover:bg-green-50"
                >
                    Zapri
                </button>
            </div>
        </div>
    </div>
</span>