@extends('backend.layouts.app')
@section('title', $title)
@section('content')
    @include('backend.file-manager.partials.edit-alt-text-modal')
    @include('backend.file-manager.partials.file-manager-settings')
    @include('backend.file-manager.partials.delete-selected-modal')

    <div class="row mb-3">
        <div class="col d-flex justify-content-end">
            <button type="button" class="btn bg-transparent border-0" data-bs-toggle="offcanvas"
                data-bs-target="#fileManagerSettings">
                <i class="ri-filter-3-line fs-3"></i>
            </button>
        </div>
    </div>
    <form id="delete-selected-files-form" action="{{ route('admin.file-manager.bulk-delete') }}" method="POST">
        @csrf
        @method('DELETE')

        <div class="row row-cols-3 row-cols-md-4 row-cols-lg-4 row-cols-xl-6">
            @foreach ($media as $item)
                <div class="col mb-2">
                    <div class="card">
                        <div class="card-body position-relative">
                            <div class="position-absolute top-0 end-0">
                                <button type="button" class="btn btn-sm border-none" data-bs-target="#editAltTextModal"
                                    data-bs-toggle="modal" data-media-item="{{ json_encode($item) }}">
                                    <i class="ri-pencil-line"></i>
                                </button>
                            </div>
                            <div class="position-absolute bottom-0 end-0">
                                <div class="form-check">
                                    <input class="form-check-input check-one" id="media-item-{{ $item->id }}" name="media_ids[]" value="{{ $item->id }}"
                                        type="checkbox">
                                </div>
                            </div>
                            <label for="media-item-{{ $item->id }}" class="d-flex justify-content-center align-items-center">
                                <img style="width: 100%; aspect-ratio: 1/1; object-fit: contain;"
                                    src="{{ $item->getFullUrl() }}" alt="{{ $item->file_name }}"
                                    class="img-fluid rounded-2">
                            </label>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        {{ $media->links() }}
    </form>
@endsection