@php
    $id = $id ?? 'sl-modal';
    $title = $title ?? '';
    $description = $description ?? null;
    $widthClass = $widthClass ?? 'max-w-3xl';
    $panelClass = $panelClass ?? '';
    $bodyClass = $bodyClass ?? '';
    $closeOnBackdrop = $closeOnBackdrop ?? true;
    $closeLabel = $closeLabel ?? 'Fechar modal';
    $footer = $footer ?? null;
@endphp

<div id="{{ $id }}" class="sl-modal" data-modal aria-hidden="true" hidden>
    @if ($closeOnBackdrop)
        <button type="button" class="sl-modal__backdrop" data-modal-close tabindex="-1" aria-label="{{ $closeLabel }}"></button>
    @else
        <div class="sl-modal__backdrop"></div>
    @endif

    <div class="sl-modal__dialog {{ $widthClass }} {{ $panelClass }}" role="dialog" aria-modal="true" aria-labelledby="{{ $id }}-title">
        <div class="sl-modal__panel">
            <div class="sl-modal__header">
                <div class="sl-modal__header-copy">
                    <h2 id="{{ $id }}-title">{{ $title }}</h2>
                    @if ($description)
                        <p>{{ $description }}</p>
                    @endif
                </div>

                <button type="button" class="sl-modal__close" data-modal-close aria-label="{{ $closeLabel }}">
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M6 6l12 12M18 6L6 18" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </svg>
                </button>
            </div>

            <div class="sl-modal__body {{ $bodyClass }}">
                {{ $slot }}
            </div>

            @if (trim((string) $footer) !== '')
                <div class="sl-modal__footer">
                    {{ $footer }}
                </div>
            @endif
        </div>
    </div>
</div>