@props([
    'documents' => null,
])
<table class="table mb-0">
    @if ($documents->hasPages())
        <caption>
            {{ $documents->links('pagination::bootstrap-5') }}
        </caption>
    @endif
    <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col">@lang('images.document')</th>
            <th scope="col">@lang('images.images')</th>
            <th scope="col">@lang('images.noOfImages')</th>
            <th scope="col">@lang('document.favourite')</th>
            <th scope="col">@lang('document.action')</th>
        </tr>
    </thead>
    <tbody>
        @forelse ($documents as $document)
            <tr class="align-middle">
                <th scope="row" class="file-type"><i class="an an-browser"></i></th>
                <td>{{ $document->name }}</td>
                <td>
                    <ul class="document-image m-0 p-0">
                        @foreach ($document->requests->first()->media as $image)
                            <li><a data-fslightbox="gallery-{{ $document->id }}" href="{{ $image->getFullUrl() }}"><img
                                        src="{{ $image->getFullUrl() }}" /></a></li>
                        @endforeach
                    </ul>
                </td>
                <td>{{ $document->no_of_images }}</td>
                <td class="fav @if ($document->is_favourite == 1) fav-active @endif">
                    <a href="{{ route('document.favouriteAction', ['document' => $document->id]) }}">
                        <i class="an an-star-alt"></i>
                    </a>
                </td>
                <td>
                    <div class="dropdown">
                        <a type="button" id="actionDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="an an-ellipsis-v"></i>
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="actionDropdown">
                            @foreach ($document->requests->first()->media as $image)
                                <li>
                                    <a type="button" class="dropdown-item download-image"
                                        data-filename="{{ Str::slug($document->name . ' ' . $loop->iteration) }}.png"
                                        data-download="{{ $image->getFullUrl() }}"
                                        href="{{ route('document.deleteDocument', ['document' => $document->id]) }}">
                                        <i class="an an-download"></i>
                                        {{ Str::slug($document->name . ' ' . $loop->iteration) }}.png
                                    </a>
                                </li>
                            @endforeach
                            <li>
                                <a class="dropdown-item"
                                    href="{{ route('document.deleteDocument', ['document' => $document->id]) }}">
                                    <i class="an an-trash"></i> @lang('common.delete')
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item"
                                    href="{{ route('document.index', ['document_id' => $document->id]) }}">
                                    <i class="an an-write"></i> @lang('common.edit')
                                </a>
                            </li>
                        </ul>
                    </div>
                </td>
            </tr>
        @empty
            <tr>
                <td class="text-center" colspan="20">@lang('document.noDocuments')</td>
            </tr>
        @endforelse
    </tbody>
</table>