@extends('layouts.app')

@section('title', 'Image Manager')

@section('content')
    <header class="border-b border-slate-200 bg-white">
        <div class="mx-auto flex max-w-7xl flex-col gap-4 px-4 py-4 sm:px-6 lg:flex-row lg:items-center lg:justify-between lg:px-8">
            <div class="flex items-center gap-3">
                <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-teal-600 text-sm font-bold text-white">
                    IM
                </div>
                <div>
                    <p class="text-xs font-semibold uppercase tracking-normal text-teal-700">{{ config('app.name', 'Image Manager') }}</p>
                    <h1 class="text-2xl font-semibold tracking-normal text-slate-950">Image Manager</h1>
                </div>
            </div>

            <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
                <div class="text-sm leading-tight text-slate-600">
                    <p class="font-medium text-slate-900">{{ auth()->user()->name }}</p>
                    <p>{{ auth()->user()->email }}</p>
                </div>
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button
                        type="submit"
                        class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-4 focus:ring-slate-100"
                    >
                        Logout
                    </button>
                </form>
            </div>
        </div>
    </header>

    @php
        $uploadErrors = array_values(array_unique(array_merge(
            $errors->get('images'),
            \Illuminate\Support\Arr::flatten($errors->get('images.*')),
        )));
    @endphp

    <main class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8" x-init="@if ($errors->has('name')) newFolderOpen = true; @endif @if ($uploadErrors) uploadOpen = true; @endif">
        <div class="mb-6 flex justify-end">
            <button
                type="button"
                class="inline-flex items-center justify-center rounded-lg bg-slate-950 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-800 focus:outline-none focus:ring-4 focus:ring-slate-200"
                @click="uploadOpen = true"
            >
                + Upload Images
            </button>
        </div>

        @if ($uploadedImages->isNotEmpty())
            <section class="mb-8 rounded-lg border border-teal-200 bg-teal-50 p-5 shadow-sm">
                <h2 class="text-lg font-semibold text-teal-950">
                    {{ $uploadedImages->count() === 1 ? 'Image uploaded successfully' : $uploadedImages->count().' images uploaded successfully' }}
                </h2>
                <p class="mt-4 text-xs font-semibold uppercase tracking-normal text-teal-800">
                    {{ $uploadedImages->count() === 1 ? 'Public Image URL' : 'Public Image URLs' }}
                </p>
                <ul class="mt-2 space-y-3">
                    @foreach ($uploadedImages as $uploadedImage)
                        <li class="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
                            <div class="min-w-0 flex-1 rounded-lg border border-teal-200 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm">
                                <span class="break-all">{{ $uploadedImage->public_url }}</span>
                            </div>
                            <div class="flex flex-col gap-2 sm:flex-row">
                                <button
                                    type="button"
                                    class="inline-flex items-center justify-center rounded-lg bg-teal-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-teal-700 focus:outline-none focus:ring-4 focus:ring-teal-100"
                                    @click="copyUrl(@js($uploadedImage->public_url))"
                                    x-text="copiedUrl === @js($uploadedImage->public_url) ? 'Copied!' : 'Copy URL'"
                                >Copy URL</button>
                                <a
                                    href="{{ $uploadedImage->public_url }}"
                                    target="_blank"
                                    rel="noopener"
                                    class="inline-flex items-center justify-center rounded-lg border border-teal-300 bg-white px-4 py-2.5 text-sm font-semibold text-teal-800 shadow-sm transition hover:bg-teal-100 focus:outline-none focus:ring-4 focus:ring-teal-100"
                                >
                                    Open Image
                                </a>
                            </div>
                        </li>
                    @endforeach
                </ul>
            </section>
        @endif

        @if ($uploadErrors)
            <section class="mb-8 rounded-lg border border-rose-200 bg-rose-50 p-4 text-sm text-rose-800">
                <p class="font-semibold">Unable to upload images.</p>
                <ul class="mt-2 list-disc space-y-1 pl-5">
                    @foreach ($uploadErrors as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </section>
        @endif

        <div
            x-cloak
            x-show="uploadOpen"
            x-transition.opacity.duration.150ms
            class="fixed inset-0 z-[60] flex items-center justify-center bg-slate-950/70 p-4"
            @click.self="uploadOpen = false"
            role="dialog"
            aria-modal="true"
        >
        <section class="max-h-[92vh] w-full max-w-3xl overflow-y-auto rounded-lg border border-slate-200 bg-white p-5 shadow-xl sm:p-6">
            <div class="mb-5 flex items-start justify-between gap-4">
                <h2 class="text-lg font-semibold text-slate-950">Upload Images</h2>
                <button
                    type="button"
                    class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-slate-300 bg-white text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-4 focus:ring-slate-100"
                    @click="uploadOpen = false"
                    aria-label="Close upload dialog"
                >
                    X
                </button>
            </div>

            <form
                method="POST"
                action="{{ route('images.store') }}"
                enctype="multipart/form-data"
                x-data="uploadForm(@js($currentFolderId), @js(route('images.store-bulk')), @js($maxImagesPerUpload))"
                @submit="uploading = true"
            >
                @csrf
                <input type="hidden" name="folder_id" value="{{ $currentFolderId }}">

                <input
                    x-ref="file"
                    id="images"
                    name="images[]"
                    type="file"
                    multiple
                    accept=".jpg,.jpeg,.png,.webp,.gif,image/jpeg,image/png,image/webp,image/gif"
                    class="sr-only"
                    required
                    @change="handleFileChange"
                >

                <input
                    x-ref="folder"
                    type="file"
                    webkitdirectory
                    directory
                    multiple
                    class="sr-only"
                    @change="handleFolderSelect"
                >

                <div
                    class="flex min-h-72 cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-slate-300 bg-slate-50 p-6 text-center transition hover:border-teal-500 hover:bg-teal-50/50"
                    :class="{ 'border-teal-500 bg-teal-50': isDragging }"
                    @click="! previews.length && $refs.file.click()"
                    @dragover.prevent="isDragging = true"
                    @dragleave.prevent="isDragging = false"
                    @drop.prevent="handleDrop"
                >
                    <div x-show="! previews.length" class="max-w-sm">
                        <div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-lg border border-slate-200 bg-white text-2xl font-semibold text-teal-700">
                            +
                        </div>
                        <p class="text-base font-semibold text-slate-950">Drag & Drop Images Here</p>
                        <p class="my-3 text-sm font-medium text-slate-500">OR</p>
                        <div class="flex flex-wrap items-center justify-center gap-2">
                            <button
                                type="button"
                                class="inline-flex items-center justify-center rounded-lg bg-teal-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-teal-700 focus:outline-none focus:ring-4 focus:ring-teal-100"
                                @click.stop="$refs.file.click()"
                            >
                                Browse Images
                            </button>
                            <button
                                type="button"
                                class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-4 focus:ring-slate-100 disabled:cursor-not-allowed disabled:opacity-60"
                                :disabled="folderUploading"
                                @click.stop="$refs.folder.click()"
                            >
                                Upload Folder
                            </button>
                        </div>
                        <p class="mt-4 text-xs text-slate-500">JPG, PNG, WEBP, or GIF. Maximum size 10MB each, up to {{ $maxImagesPerUpload }} images at a time.</p>

                        <div x-cloak x-show="folderUploading" class="mt-4 rounded-lg border border-slate-200 bg-white px-4 py-3 text-left text-sm text-slate-700">
                            <p x-text="folderStatus"></p>
                            <div class="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-slate-200">
                                <div
                                    class="h-full rounded-full bg-teal-600 transition-all"
                                    :style="`width: ${folderTotal ? Math.round((folderDone / folderTotal) * 100) : 0}%`"
                                ></div>
                            </div>
                        </div>
                    </div>

                    <div x-cloak x-show="previews.length" class="w-full text-left">
                        <div class="mb-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                            <div>
                                <p class="text-xs font-semibold uppercase tracking-normal text-slate-500">Preview</p>
                                <h3 class="text-lg font-semibold text-slate-950" x-text="previews.length === 1 ? '1 image selected' : `${previews.length} images selected`"></h3>
                                <p class="text-sm text-slate-600" x-text="`Total size: ${totalSize}`"></p>
                            </div>
                            <div class="flex flex-col gap-2 sm:flex-row">
                                <button
                                    type="button"
                                    class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-4 focus:ring-slate-100"
                                    @click.stop="$refs.file.click()"
                                >
                                    Change Images
                                </button>
                                <button
                                    type="button"
                                    class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-4 focus:ring-slate-100"
                                    @click.stop="clearFiles"
                                >
                                    Cancel
                                </button>
                            </div>
                        </div>

                        <p
                            x-cloak
                            x-show="previews.length > maxFiles"
                            class="mb-3 rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-800"
                            x-text="`You can upload up to ${maxFiles} images at a time. Please remove ${previews.length - maxFiles}.`"
                        ></p>

                        <ul class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
                            <template x-for="(preview, index) in previews" :key="preview.url">
                                <li class="relative overflow-hidden rounded-lg border border-slate-200 bg-white">
                                    <img :src="preview.url" alt="" class="h-32 w-full bg-slate-50 object-contain">
                                    <div class="border-t border-slate-200 px-2 py-1.5">
                                        <p class="truncate text-xs font-semibold text-slate-900" x-text="preview.name" :title="preview.name"></p>
                                        <p class="text-xs text-slate-500" x-text="`${preview.type} · ${preview.size}`"></p>
                                    </div>
                                    <button
                                        type="button"
                                        class="absolute right-1.5 top-1.5 inline-flex h-7 w-7 items-center justify-center rounded-md border border-slate-300 bg-white/90 text-xs font-semibold text-slate-700 shadow-sm transition hover:bg-white focus:outline-none focus:ring-4 focus:ring-slate-100"
                                        :aria-label="`Remove ${preview.name}`"
                                        @click.stop="removeFile(index)"
                                    >X</button>
                                </li>
                            </template>
                        </ul>
                    </div>
                </div>

                <div class="mt-5 flex justify-end">
                    <button
                        type="submit"
                        class="inline-flex w-full items-center justify-center rounded-lg bg-slate-950 px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-800 focus:outline-none focus:ring-4 focus:ring-slate-200 disabled:cursor-not-allowed disabled:bg-slate-400 sm:w-auto"
                        :disabled="! previews.length || previews.length > maxFiles || uploading"
                        x-text="uploading ? 'Uploading...' : (previews.length > 1 ? `Upload ${previews.length} Images` : 'Upload Image')"
                    >Upload Image</button>
                </div>
            </form>
        </section>
        </div>

        <section class="mt-8 rounded-lg border border-slate-200 bg-white p-5 shadow-sm sm:p-6">
            <div class="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <nav class="flex flex-wrap items-center gap-1 text-sm" aria-label="Folder breadcrumb">
                    <a
                        href="{{ route('images.index', ['q' => $search]) }}"
                        class="rounded-md px-2 py-1 font-medium {{ $currentFolder ? 'text-slate-600 hover:bg-slate-100' : 'bg-slate-950 text-white' }}"
                        @click="rememberScroll()"
                    >
                        Home
                    </a>
                    @foreach ($breadcrumbs as $crumb)
                        <span class="text-slate-400" aria-hidden="true">/</span>
                        <a
                            href="{{ route('images.index', ['folder' => $crumb->id, 'q' => $search]) }}"
                            class="rounded-md px-2 py-1 font-medium {{ $crumb->id === $currentFolderId ? 'bg-slate-950 text-white' : 'text-slate-600 hover:bg-slate-100' }}"
                            @click="rememberScroll()"
                        >
                            {{ $crumb->name }}
                        </a>
                    @endforeach
                </nav>

                <button
                    type="button"
                    class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-4 focus:ring-slate-100"
                    @click="newFolderOpen = true"
                >
                    + New Folder
                </button>
            </div>

            @if ($subfolders->isNotEmpty())
                <div
                    class="mb-6"
                    :class="viewMode === 'grid'
                        ? 'grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6'
                        : 'divide-y divide-slate-200 overflow-hidden rounded-lg border border-slate-200'"
                >
                    @foreach ($subfolders as $subfolder)
                        <div
                            class="group relative overflow-hidden border-slate-200 bg-slate-50 transition hover:border-teal-400 hover:bg-teal-50/60"
                            :class="viewMode === 'grid' ? 'rounded-lg border' : 'bg-white hover:bg-slate-50'"
                        >
                            <a
                                href="{{ route('images.index', ['folder' => $subfolder->id]) }}"
                                class="flex items-center gap-2"
                                :class="viewMode === 'grid' ? 'px-3 py-3' : 'px-3 py-2 sm:px-4'"
                                @click="rememberScroll()"
                            >
                                <span class="text-lg" aria-hidden="true">📁</span>
                                <span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-900">{{ $subfolder->name }}</span>
                                <span class="shrink-0 rounded-full bg-slate-200 px-2 py-0.5 text-xs font-semibold text-slate-700">{{ $subfolder->images_count }}</span>
                            </a>
                            <button
                                type="button"
                                class="items-center justify-center rounded-md bg-white text-xs font-semibold text-rose-700 shadow-sm"
                                :class="viewMode === 'grid'
                                    ? 'absolute right-1 top-1 hidden h-6 w-6 group-hover:flex'
                                    : 'absolute right-2 top-1/2 hidden h-6 w-6 -translate-y-1/2 border border-rose-200 group-hover:flex sm:right-3'"
                                aria-label="Delete folder {{ $subfolder->name }}"
                                @click="confirmDeleteFolder({ name: @js($subfolder->name), action: @js(route('folders.destroy', $subfolder)) })"
                            >
                                X
                            </button>
                        </div>
                    @endforeach
                </div>
            @endif

            <div class="mb-5 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
                <div>
                    <h2 class="text-lg font-semibold text-slate-950">My Images</h2>
                    <p class="mt-1 text-sm text-slate-500">Storage Used: {{ $storageUsed }}</p>
                </div>

                <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
                    <div class="inline-flex items-center rounded-lg border border-slate-300 bg-white p-1 shadow-sm" role="group" aria-label="Change view">
                        <button
                            type="button"
                            class="inline-flex items-center justify-center rounded-md px-3 py-1.5 text-sm font-semibold transition"
                            :class="viewMode === 'grid' ? 'bg-slate-950 text-white' : 'text-slate-600 hover:bg-slate-100'"
                            @click="setViewMode('grid')"
                            aria-label="Grid view"
                            :aria-pressed="viewMode === 'grid'"
                        >
                            Grid
                        </button>
                        <button
                            type="button"
                            class="inline-flex items-center justify-center rounded-md px-3 py-1.5 text-sm font-semibold transition"
                            :class="viewMode === 'list' ? 'bg-slate-950 text-white' : 'text-slate-600 hover:bg-slate-100'"
                            @click="setViewMode('list')"
                            aria-label="List view"
                            :aria-pressed="viewMode === 'list'"
                        >
                            List
                        </button>
                    </div>

                    <form method="GET" action="{{ route('images.index') }}" class="flex w-full flex-col gap-2 sm:flex-row lg:w-auto">
                    <label for="q" class="sr-only">Search images</label>
                    <input
                        id="q"
                        name="q"
                        type="search"
                        value="{{ $search }}"
                        placeholder="Search images..."
                        class="min-w-0 rounded-lg border border-slate-300 bg-white px-3 py-2.5 text-sm text-slate-950 shadow-sm outline-none transition focus:border-teal-600 focus:ring-4 focus:ring-teal-100 sm:w-72"
                    >
                    <button
                        type="submit"
                        class="inline-flex items-center justify-center rounded-lg bg-slate-950 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-800 focus:outline-none focus:ring-4 focus:ring-slate-200"
                    >
                        Search
                    </button>
                    @if ($search !== '')
                        <a
                            href="{{ route('images.index') }}"
                            class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-4 focus:ring-slate-100"
                        >
                            Clear
                        </a>
                    @endif
                    </form>
                </div>
            </div>

            @if ($images->count())
                <div
                    x-cloak
                    x-show="viewMode === 'list'"
                    class="hidden items-center gap-3 border-b border-slate-200 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-slate-500 sm:flex sm:px-4"
                >
                    <span class="w-10 shrink-0"></span>
                    <span class="min-w-0 flex-1">Name</span>
                    <span class="w-20 shrink-0 text-right">Size</span>
                    <span class="hidden w-28 shrink-0 text-right md:block">Uploaded</span>
                    <span class="hidden w-40 shrink-0 lg:block">Folder</span>
                    <span class="w-32 shrink-0 text-right">Actions</span>
                </div>

                <div
                    :class="viewMode === 'grid'
                        ? 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5'
                        : 'divide-y divide-slate-200 overflow-hidden rounded-lg border border-slate-200'"
                >
                    @foreach ($images as $image)
                        @php
                            $previewPayload = [
                                'name' => $image->original_name,
                                'url' => $image->public_url,
                                'size' => $image->human_size,
                                'uploaded' => $image->created_at->format('M j, Y'),
                            ];
                        @endphp

                        <template x-if="viewMode === 'grid'">
                            <article class="overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
                                <button
                                    type="button"
                                    class="block aspect-[4/3] w-full shrink-0 bg-slate-100"
                                    @click="openPreview(@js($previewPayload))"
                                    aria-label="Preview {{ $image->original_name }}"
                                >
                                    <img
                                        src="{{ $image->public_url }}"
                                        alt="{{ $image->original_name }}"
                                        class="h-full w-full object-cover"
                                        loading="lazy"
                                    >
                                </button>

                                <div class="min-w-0 flex-1 p-4">
                                    <div class="min-w-0">
                                        <h3 class="truncate text-sm font-semibold text-slate-950" title="{{ $image->original_name }}">
                                            {{ $image->original_name }}
                                        </h3>
                                        <p class="mt-1 text-sm text-slate-500">{{ $image->human_size }}</p>
                                        <p class="text-sm text-slate-500">Uploaded {{ $image->created_at->format('M j, Y') }}</p>

                                        <form method="POST" action="{{ route('images.move', $image) }}" class="mt-3">
                                            @csrf
                                            @method('PATCH')
                                            <input type="hidden" name="q" value="{{ $search }}">
                                            <input type="hidden" name="folder" value="{{ $currentFolderId }}">
                                            <label for="move-folder-grid-{{ $image->id }}" class="sr-only">Move to folder</label>
                                            <select
                                                id="move-folder-grid-{{ $image->id }}"
                                                name="folder_id"
                                                class="w-full rounded-lg border border-slate-300 bg-white px-2 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-teal-600 focus:ring-4 focus:ring-teal-100"
                                                onchange="this.form.submit()"
                                            >
                                                <option value="" {{ $image->folder_id === null ? 'selected' : '' }}>Home (no folder)</option>
                                                @foreach ($folderOptions as $option)
                                                    <option value="{{ $option['id'] }}" {{ $image->folder_id === $option['id'] ? 'selected' : '' }}>{{ $option['label'] }}</option>
                                                @endforeach
                                            </select>
                                        </form>
                                    </div>

                                    <div class="mt-4 grid gap-2">
                                        <button
                                            type="button"
                                            class="inline-flex items-center justify-center rounded-lg bg-teal-600 px-3 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-teal-700 focus:outline-none focus:ring-4 focus:ring-teal-100"
                                            @click="copyUrl(@js($image->public_url))"
                                            x-text="copiedUrl === @js($image->public_url) ? 'Copied!' : 'Copy URL'"
                                        >Copy URL</button>

                                        <div class="grid grid-cols-2 gap-2">
                                            <button
                                                type="button"
                                                class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-4 focus:ring-slate-100"
                                                @click="openPreview(@js($previewPayload))"
                                            >
                                                Preview
                                            </button>
                                            <button
                                                type="button"
                                                class="inline-flex items-center justify-center rounded-lg border border-rose-200 bg-white px-3 py-2 text-sm font-semibold text-rose-700 shadow-sm transition hover:bg-rose-50 focus:outline-none focus:ring-4 focus:ring-rose-100"
                                                @click="confirmDelete({ name: @js($image->original_name), action: @js(route('images.destroy', $image, ['q' => $search, 'folder' => $currentFolderId])) })"
                                            >
                                                Delete
                                            </button>
                                        </div>

                                        <a
                                            href="{{ $image->public_url }}"
                                            target="_blank"
                                            rel="noopener"
                                            class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-4 focus:ring-slate-100"
                                        >
                                            Open Image
                                        </a>
                                    </div>
                                </div>
                            </article>
                        </template>

                        <template x-if="viewMode === 'list'">
                            <article class="flex items-center gap-3 bg-white px-3 py-2 transition hover:bg-slate-50 sm:px-4">
                                <button
                                    type="button"
                                    class="block h-10 w-10 shrink-0 overflow-hidden rounded-md bg-slate-100"
                                    @click="openPreview(@js($previewPayload))"
                                    aria-label="Preview {{ $image->original_name }}"
                                >
                                    <img
                                        src="{{ $image->public_url }}"
                                        alt=""
                                        class="h-full w-full object-cover"
                                        loading="lazy"
                                    >
                                </button>

                                <div class="min-w-0 flex-1">
                                    <h3 class="truncate text-sm font-medium text-slate-950" title="{{ $image->original_name }}">
                                        {{ $image->original_name }}
                                    </h3>
                                    <p class="truncate text-xs text-slate-500 sm:hidden">
                                        {{ $image->human_size }} · {{ $image->created_at->format('M j, Y') }}
                                    </p>
                                </div>

                                <span class="hidden w-20 shrink-0 text-right text-sm text-slate-500 sm:block">{{ $image->human_size }}</span>
                                <span class="hidden w-28 shrink-0 text-right text-sm text-slate-500 md:block">{{ $image->created_at->format('M j, Y') }}</span>

                                <form method="POST" action="{{ route('images.move', $image) }}" class="hidden w-40 shrink-0 lg:block">
                                    @csrf
                                    @method('PATCH')
                                    <input type="hidden" name="q" value="{{ $search }}">
                                    <input type="hidden" name="folder" value="{{ $currentFolderId }}">
                                    <label for="move-folder-list-{{ $image->id }}" class="sr-only">Move to folder</label>
                                    <select
                                        id="move-folder-list-{{ $image->id }}"
                                        name="folder_id"
                                        class="w-full truncate rounded-lg border border-slate-300 bg-white px-2 py-1.5 text-xs text-slate-900 shadow-sm outline-none transition focus:border-teal-600 focus:ring-4 focus:ring-teal-100"
                                        onchange="this.form.submit()"
                                    >
                                        <option value="" {{ $image->folder_id === null ? 'selected' : '' }}>Home (no folder)</option>
                                        @foreach ($folderOptions as $option)
                                            <option value="{{ $option['id'] }}" {{ $image->folder_id === $option['id'] ? 'selected' : '' }}>{{ $option['label'] }}</option>
                                        @endforeach
                                    </select>
                                </form>

                                <div class="flex w-32 shrink-0 items-center justify-end gap-1">
                                    <button
                                        type="button"
                                        class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-slate-300 bg-white text-slate-600 shadow-sm transition hover:bg-slate-100 focus:outline-none focus:ring-4 focus:ring-slate-100"
                                        @click="copyUrl(@js($image->public_url))"
                                        :aria-label="copiedUrl === @js($image->public_url) ? 'Copied' : 'Copy URL'"
                                        :title="copiedUrl === @js($image->public_url) ? 'Copied!' : 'Copy URL'"
                                    ><span aria-hidden="true" x-text="copiedUrl === @js($image->public_url) ? '✓' : '🔗'"></span></button>
                                    <a
                                        href="{{ $image->public_url }}"
                                        target="_blank"
                                        rel="noopener"
                                        class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-slate-300 bg-white text-slate-600 shadow-sm transition hover:bg-slate-100"
                                        aria-label="Open image"
                                        title="Open Image"
                                    ><span aria-hidden="true">↗</span></a>
                                    <button
                                        type="button"
                                        class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-rose-200 bg-white text-rose-700 shadow-sm transition hover:bg-rose-50 focus:outline-none focus:ring-4 focus:ring-rose-100"
                                        @click="confirmDelete({ name: @js($image->original_name), action: @js(route('images.destroy', $image, ['q' => $search, 'folder' => $currentFolderId])) })"
                                        aria-label="Delete image"
                                        title="Delete"
                                    ><span aria-hidden="true">🗑</span></button>
                                </div>
                            </article>
                        </template>
                    @endforeach
                </div>

                <div class="mt-6">
                    {{ $images->links() }}
                </div>
            @else
                <div class="rounded-lg border border-dashed border-slate-300 bg-white px-6 py-12 text-center shadow-sm">
                    <h3 class="text-base font-semibold text-slate-950">No images uploaded yet.</h3>
                    <p class="mt-2 text-sm text-slate-500">Upload your first image above and its public URL will appear here.</p>
                </div>
            @endif
        </section>
    </main>

    <div
        x-cloak
        x-show="preview"
        x-transition.opacity.duration.150ms
        class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 p-4"
        @click.self="closePreview()"
        role="dialog"
        aria-modal="true"
    >
        <div class="max-h-[92vh] w-full max-w-5xl overflow-y-auto rounded-lg bg-white shadow-xl">
            <div class="flex items-start justify-between gap-4 border-b border-slate-200 px-4 py-3 sm:px-5">
                <div class="min-w-0">
                    <h2 class="truncate text-base font-semibold text-slate-950" x-text="preview?.name"></h2>
                    <p class="mt-1 text-sm text-slate-500">
                        <span x-text="preview?.size"></span>
                        <span aria-hidden="true"> | </span>
                        <span x-text="preview?.uploaded"></span>
                    </p>
                </div>
                <button
                    type="button"
                    class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-slate-300 bg-white text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-4 focus:ring-slate-100"
                    @click="closePreview()"
                    aria-label="Close preview"
                >
                    X
                </button>
            </div>

            <div class="p-4 sm:p-5">
                <div class="flex max-h-[62vh] items-center justify-center rounded-lg bg-slate-100">
                    <img :src="preview?.url" :alt="preview?.name" class="max-h-[62vh] w-auto max-w-full object-contain">
                </div>

                <div class="mt-5">
                    <p class="text-xs font-semibold uppercase tracking-normal text-slate-500">Public Image URL</p>
                    <div class="mt-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-800">
                        <span class="break-all" x-text="preview?.url"></span>
                    </div>
                    <div class="mt-4 flex flex-col gap-2 sm:flex-row">
                        <button
                            type="button"
                            class="inline-flex items-center justify-center rounded-lg bg-teal-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-teal-700 focus:outline-none focus:ring-4 focus:ring-teal-100"
                            @click="copyUrl(preview.url)"
                            x-text="copiedUrl === preview?.url ? 'Copied!' : 'Copy URL'"
                        >Copy URL</button>
                        <a
                            :href="preview?.url"
                            target="_blank"
                            rel="noopener"
                            class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-4 focus:ring-slate-100"
                        >
                            Open Image
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div
        x-cloak
        x-show="deleteTarget"
        x-transition.opacity.duration.150ms
        class="fixed inset-0 z-[60] flex items-center justify-center bg-slate-950/70 p-4"
        @click.self="closeDelete()"
        role="dialog"
        aria-modal="true"
    >
        <form :action="deleteTarget ? deleteTarget.action : '#'" method="POST" class="w-full max-w-md rounded-lg bg-white p-5 shadow-xl">
            @csrf
            @method('DELETE')

            <h2 class="text-lg font-semibold text-slate-950">Delete this image?</h2>
            <p class="mt-2 text-sm text-slate-600">
                Deleting this image will permanently remove it and the public URL will stop working.
            </p>
            <p class="mt-4 truncate rounded-lg bg-slate-100 px-3 py-2 text-sm font-medium text-slate-800" x-text="deleteTarget?.name"></p>

            <div class="mt-5 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
                <button
                    type="button"
                    class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-4 focus:ring-slate-100"
                    @click="closeDelete()"
                >
                    Cancel
                </button>
                <button
                    type="submit"
                    class="inline-flex items-center justify-center rounded-lg bg-rose-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-rose-700 focus:outline-none focus:ring-4 focus:ring-rose-100"
                >
                    Delete Image
                </button>
            </div>
        </form>
    </div>

    <div
        x-cloak
        x-show="newFolderOpen"
        x-transition.opacity.duration.150ms
        class="fixed inset-0 z-[60] flex items-center justify-center bg-slate-950/70 p-4"
        @click.self="newFolderOpen = false"
        role="dialog"
        aria-modal="true"
    >
        <form method="POST" action="{{ route('folders.store') }}" class="w-full max-w-md rounded-lg bg-white p-5 shadow-xl">
            @csrf
            <input type="hidden" name="parent_id" value="{{ $currentFolderId }}">

            <h2 class="text-lg font-semibold text-slate-950">New folder</h2>
            <p class="mt-2 text-sm text-slate-600">
                @if ($currentFolder)
                    This folder will be created inside "{{ $currentFolder->name }}".
                @else
                    This folder will be created at the top level.
                @endif
            </p>

            <label for="folder-name" class="mt-4 block text-xs font-semibold uppercase tracking-normal text-slate-500">Folder name</label>
            <input
                id="folder-name"
                name="name"
                type="text"
                value="{{ old('name') }}"
                required
                autofocus
                class="mt-2 w-full rounded-lg border border-slate-300 bg-white px-3 py-2.5 text-sm text-slate-950 shadow-sm outline-none transition focus:border-teal-600 focus:ring-4 focus:ring-teal-100"
            >
            @error('name')
                <p class="mt-2 text-sm text-rose-700">{{ $message }}</p>
            @enderror

            <div class="mt-5 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
                <button
                    type="button"
                    class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-4 focus:ring-slate-100"
                    @click="newFolderOpen = false"
                >
                    Cancel
                </button>
                <button
                    type="submit"
                    class="inline-flex items-center justify-center rounded-lg bg-slate-950 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-800 focus:outline-none focus:ring-4 focus:ring-slate-200"
                >
                    Create Folder
                </button>
            </div>
        </form>
    </div>

    <div
        x-cloak
        x-show="deleteFolderTarget"
        x-transition.opacity.duration.150ms
        class="fixed inset-0 z-[60] flex items-center justify-center bg-slate-950/70 p-4"
        @click.self="closeDeleteFolder()"
        role="dialog"
        aria-modal="true"
    >
        <form :action="deleteFolderTarget ? deleteFolderTarget.action : '#'" method="POST" class="w-full max-w-md rounded-lg bg-white p-5 shadow-xl">
            @csrf
            @method('DELETE')

            <h2 class="text-lg font-semibold text-slate-950">Delete this folder?</h2>
            <p class="mt-2 text-sm text-slate-600">
                This will permanently delete this folder, all of its subfolders, and every image inside them. This cannot be undone.
            </p>
            <p class="mt-4 truncate rounded-lg bg-slate-100 px-3 py-2 text-sm font-medium text-slate-800" x-text="deleteFolderTarget?.name"></p>

            <div class="mt-5 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
                <button
                    type="button"
                    class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-4 focus:ring-slate-100"
                    @click="closeDeleteFolder()"
                >
                    Cancel
                </button>
                <button
                    type="submit"
                    class="inline-flex items-center justify-center rounded-lg bg-rose-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-rose-700 focus:outline-none focus:ring-4 focus:ring-rose-100"
                >
                    Delete Folder
                </button>
            </div>
        </form>
    </div>
@endsection