@once
@push('styles')
<style>
    .support-ticket-attachments {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.75rem;
    }
    .support-ticket-attachments--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .support-ticket-attachments--large {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 1rem;
    }
    .support-ticket-attachments--large .support-ticket-attachment__preview--image,
    .support-ticket-attachments--large .support-ticket-attachment__preview-link {
        min-height: 150px;
    }
    .support-ticket-attachments--large .support-ticket-attachment__preview img {
        height: 150px;
    }
    .support-ticket-attachment {
        border: 1px solid #e5e7eb;
        border-radius: 0.65rem;
        overflow: hidden;
        background: #f8fafc;
    }
    .support-ticket-attachment__preview {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100px;
        padding: 0;
        background: #f1f5f9;
        overflow: hidden;
    }
    .support-ticket-attachment__preview--image {
        min-height: 110px;
    }
    .support-ticket-attachment__preview-link {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 110px;
    }
    .support-ticket-attachment__preview img {
        display: block;
        width: 100%;
        height: 110px;
        object-fit: cover;
    }
    .support-ticket-attachment__icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1.35rem;
        font-weight: 700;
        text-transform: uppercase;
    }
    .support-ticket-attachment__icon--0 { background: #22c55e; }
    .support-ticket-attachment__icon--1 { background: #3b82f6; }
    .support-ticket-attachment__icon--2 { background: #8b5cf6; }
    .support-ticket-attachment__icon--3 { background: #f59e0b; }
    .support-ticket-attachment__footer {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.55rem 0.65rem;
        background: #fff;
        border-top: 1px solid #e5e7eb;
    }
    .support-ticket-attachment__name {
        flex: 1 1 auto;
        min-width: 0;
        color: #334155;
        font-size: 0.75rem;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .support-ticket-attachment__download {
        flex: 0 0 auto;
        color: #64748b;
        font-size: 0.875rem;
        line-height: 1;
    }
    .support-ticket-attachment__download:hover {
        color: #0f172a;
    }
</style>
@endpush
@endonce

@if ($attachmentLinks !== [])
    <div class="support-ticket-attachments{{ !empty($compact) ? ' support-ticket-attachments--compact' : '' }}{{ !empty($large) ? ' support-ticket-attachments--large' : '' }}">
        @foreach ($attachmentLinks as $index => $link)
            @php
                $basename = preg_replace('/^.*[\\\\\\/]/', '', $link['name']);
                $initial = strtoupper(mb_substr($basename, 0, 1) ?: '?');
                $isImage = (bool) preg_match('/\.(jpe?g|png|gif|webp|bmp|svg)$/i', $basename);
            @endphp
            <div class="support-ticket-attachment">
                <div class="support-ticket-attachment__preview{{ $isImage ? ' support-ticket-attachment__preview--image' : '' }}">
                    @if ($isImage)
                        <a href="{{ $link['url'] }}" class="support-ticket-attachment__preview-link" target="_blank" rel="noopener" title="View {{ $link['name'] }}">
                            <img src="{{ $link['url'] }}" alt="{{ $link['name'] }}" loading="lazy">
                        </a>
                    @else
                        <span class="support-ticket-attachment__icon support-ticket-attachment__icon--{{ $index % 4 }}">{{ $initial }}</span>
                    @endif
                </div>
                <div class="support-ticket-attachment__footer">
                    <span class="support-ticket-attachment__name" title="{{ $link['name'] }}">{{ $link['name'] }}</span>
                    <a href="{{ $link['url'] }}" class="support-ticket-attachment__download" download title="Download {{ $link['name'] }}" aria-label="Download {{ $link['name'] }}">
                        <i class="fas fa-download"></i>
                    </a>
                </div>
            </div>
        @endforeach
    </div>
@endif