{{-- Detalhes da Mídia Selecionada na Galeria --}}
<div class="gallery-segment" id="gallery-detail-segment-{{ $pickerId }}" style="display: none;">
    <h5 class="gallery-segment-title"><i class="bi bi-info-circle me-1"></i> Mídia Selecionada</h5>
    <div class="row g-3 align-items-start">
        {{-- Preview + Ações de Imagem --}}
        <div class="col-md-4 col-12">
            <div class="media-detail-preview-box text-center p-3 bg-light rounded border">
                {{-- Preview de imagem --}}
                <img id="detail-preview-img-{{ $pickerId }}" src="" class="img-fluid mx-auto d-none" style="max-height: 130px; border-radius: 4px;">
                {{-- Preview PDF --}}
                <div id="detail-preview-pdf-{{ $pickerId }}" class="d-none text-danger py-3">
                    <i class="bi bi-file-earmark-pdf display-4"></i>
                </div>
                {{-- Preview Áudio --}}
                <div id="detail-preview-audio-{{ $pickerId }}" class="d-none text-info py-3">
                    <i class="bi bi-file-earmark-music display-4"></i>
                </div>
                {{-- Preview Planilha --}}
                <div id="detail-preview-spreadsheet-{{ $pickerId }}" class="d-none text-success py-3">
                    <i class="bi bi-file-earmark-excel display-4"></i>
                </div>

                {{-- Ações de edição de imagem (visível apenas para imagens) --}}
                <div id="detail-image-actions-{{ $pickerId }}" class="d-none mt-2 d-flex gap-1 justify-content-center">
                    <button type="button" class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center gap-1" id="btn-detail-rotate-{{ $pickerId }}" title="Rotacionar 90° no sentido horário">
                        <i class="bi bi-arrow-clockwise"></i> Rotacionar
                    </button>
                    <button type="button" class="btn btn-outline-primary btn-sm d-inline-flex align-items-center gap-1" id="btn-detail-crop-{{ $pickerId }}">
                        <i class="bi bi-crop"></i> Recortar
                    </button>
                </div>
            </div>
        </div>

        {{-- Formulário de metadados + ações --}}
        <div class="col-md-8 col-12 position-relative">
            <input type="hidden" id="detail-media-id-{{ $pickerId }}">
            <input type="hidden" id="detail-media-url-{{ $pickerId }}">
            <input type="hidden" id="detail-media-mime-{{ $pickerId }}">

            <div class="mb-2" id="detail-group-alt-{{ $pickerId }}">
                <label for="detail-media-alt-{{ $pickerId }}" class="form-label fw-bold small mb-1">Texto Alternativo</label>
                <input type="text" id="detail-media-alt-{{ $pickerId }}" class="form-control form-control-sm" placeholder="Descrição para acessibilidade">
            </div>
            <div class="mb-2">
                <label for="detail-media-desc-{{ $pickerId }}" class="form-label fw-bold small mb-1">Descrição / Legenda</label>
                <input type="text" id="detail-media-desc-{{ $pickerId }}" class="form-control form-control-sm" placeholder="Nome ou legenda da mídia">
            </div>

            {{-- Feedback de operação --}}
            <div id="detail-operating-feedback-{{ $pickerId }}" class="d-none alert alert-info py-2 px-3 small mb-2">
                <i class="bi bi-arrow-repeat me-1"></i> <span id="detail-operating-text-{{ $pickerId }}">Processando...</span>
            </div>

            {{-- Botões de ação --}}
            <div class="d-flex flex-wrap align-items-center gap-2 mt-3">
                <button type="button" class="btn btn-outline-warning btn-sm d-inline-flex align-items-center gap-1" id="btn-archive-detail-{{ $pickerId }}">
                    <i class="bi bi-archive-fill"></i> <span>Arquivar</span>
                </button>
                <a href="#" target="_blank" class="btn btn-outline-info btn-sm d-inline-flex align-items-center gap-1" id="btn-download-detail-{{ $pickerId }}">
                    <i class="bi bi-download"></i> Baixar
                </a>
                <div class="ms-auto d-flex gap-1">
                    <button type="button" class="btn btn-outline-secondary btn-sm" id="btn-cancel-detail-{{ $pickerId }}">Cancelar</button>
                    <button type="button" class="btn btn-primary btn-sm fw-bold d-inline-flex align-items-center gap-1" id="btn-confirm-selection-{{ $pickerId }}">
                        <i class="bi bi-check-lg"></i> Confirmar Escolha
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Cropper inline — centralizado abaixo de todo o segmento de detalhe --}}
    <div id="detail-cropper-wrapper-{{ $pickerId }}" class="row mt-2" style="display: none;">
        <div class="col-12">
            <div class="d-flex flex-column align-items-center">
                <div style="max-height: 250px; overflow: hidden; background: #eee; border-radius: 4px; border: 1px solid #ddd; max-width: 100%;">
                    <img id="detail-cropper-image-{{ $pickerId }}" style="max-width: 100%; display: block; margin: 0 auto;">
                </div>
                <div class="d-flex gap-2 justify-content-center mt-2">
                    <button type="button" class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center gap-1" id="btn-detail-crop-rotate-{{ $pickerId }}">
                        <i class="bi bi-arrow-clockwise"></i> Rotacionar
                    </button>
                    <button type="button" class="btn btn-outline-danger btn-sm" id="btn-detail-crop-cancel-{{ $pickerId }}">Cancelar</button>
                    <button type="button" class="btn btn-success btn-sm fw-bold d-inline-flex align-items-center gap-1" id="btn-detail-crop-apply-{{ $pickerId }}">
                        <i class="bi bi-check-lg"></i> Aplicar Recorte
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>