@props([
    'src',
    'alt' => '',
    'title' => null,
    'modalId' => 'admin-image-lightbox',
])

@php
    $modalTitle = $title ?? __('Imagem');
    $modalDomId = preg_replace('/[^a-zA-Z0-9_-]/', '', (string) $modalId) ?: 'admin-image-lightbox';
@endphp

<div {{ $attributes->merge(['class' => 'admin-image-lightbox']) }}>
    <button type="button"
            class="admin-image-lightbox__trigger btn p-0 border-0 bg-transparent text-start"
            data-bs-toggle="modal"
            data-bs-target="#{{ $modalDomId }}"
            aria-label="{{ __('Ampliar imagem') }}">
        <span class="admin-image-lightbox__frame">
            <img src="{{ $src }}"
                 alt="{{ $alt }}"
                 class="admin-image-lightbox__thumb"
                 loading="lazy"
                 decoding="async">
            <span class="admin-image-lightbox__overlay" aria-hidden="true">
                <i class="fa-solid fa-up-right-and-down-left-from-center fa-lg mb-1"></i>
                <span class="small fw-semibold">{{ __('Ampliar') }}</span>
            </span>
        </span>
    </button>

    <div class="modal fade"
         id="{{ $modalDomId }}"
         tabindex="-1"
         aria-labelledby="{{ $modalDomId }}-label"
         aria-hidden="true">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content admin-image-lightbox__modal border-0 bg-black text-white">
                <div class="modal-header admin-image-lightbox__header border-0 flex-shrink-0 py-2 px-3">
                    <h2 class="modal-title fs-6 mb-0 text-truncate flex-grow-1 me-2" id="{{ $modalDomId }}-label">{{ $modalTitle }}</h2>
                    <button type="button"
                            class="btn btn-outline-light btn-sm rounded-circle admin-image-lightbox__close flex-shrink-0"
                            data-bs-dismiss="modal"
                            aria-label="{{ __('Fechar') }}">
                        <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                    </button>
                </div>
                <div class="modal-body admin-image-lightbox__viewer p-0">
                    <figure class="admin-image-lightbox__figure mb-0">
                        <img src="{{ $src }}"
                             alt="{{ $alt }}"
                             class="admin-image-lightbox__preview"
                             decoding="async">
                    </figure>
                </div>
            </div>
        </div>
    </div>
</div>

@once
    <link rel="stylesheet" href="{{ asset('pmar/css/admin/mobiangra/image-lightbox.css') }}?v=4">
@endonce