@props(['file', 'urlLihat', 'urlUnduh' => null])
@if (! $file)
    <x-kosong judul="Belum ada dokumen" ikon="fa-file-circle-xmark" />
@else
    <div class="d-flex justify-content-between align-items-center flex-wrap mb-2" style="gap:.5rem">
        <div class="small">
            <i class="far fa-file-{{ $file->pdf() ? 'pdf text-danger' : 'image text-primary' }} mr-1"></i>
            <span class="fw-semibold">{{ $file->nama_file }}</span>
            <span class="teks-redup">· versi {{ $file->versi ?? 1 }} · {{ \App\Support\Tampilan::ukuranFile($file->ukuran_file) }}</span>
        </div>
        <div>
            <a href="{{ $urlLihat }}" target="_blank" rel="noopener" class="btn btn-sm btn-outline-secondary"><i class="fas fa-up-right-from-square mr-1"></i> Buka</a>
            @if ($urlUnduh)<a href="{{ $urlUnduh }}" class="btn btn-sm btn-outline-primary"><i class="fas fa-download mr-1"></i> Unduh</a>@endif
        </div>
    </div>
    <div class="preview-dokumen">
        @if ($file->pdf())
            <iframe src="{{ $urlLihat }}#toolbar=1&view=FitH" title="Preview {{ $file->nama_file }}" loading="lazy"></iframe>
        @else
            <img src="{{ $urlLihat }}" alt="Naskah {{ $file->nama_file }}" loading="lazy">
        @endif
    </div>
@endif