@extends('admin.layouts.app')

@section('title', 'Media Browser')
@section('subtitle', 'Pick a site image visually and send it back to the editor form.')

@section('content')
    <div class="admin-card">
        <form method="GET" class="admin-form-grid admin-form-grid--two">
            <input type="hidden" name="target" value="{{ request('target') }}">
            <input type="hidden" name="preview" value="{{ request('preview') }}">
            <input type="hidden" name="label" value="{{ request('label') }}">

            <div class="admin-field">
                <label for="browser-search">Search</label>
                <input id="browser-search" type="text" name="search" value="{{ request('search') }}" placeholder="File name or alt text">
            </div>
            <div class="admin-field">
                <label for="browser-category">Category</label>
                <select id="browser-category" name="category">
                    <option value="">All categories</option>
                    @foreach(['branding', 'hero', 'service-image', 'service-icon', 'trusted-logo', 'feature-icon', 'benefit-icon', 'image', 'document'] as $category)
                        <option value="{{ $category }}" @selected(request('category') === $category)>{{ ucfirst(str_replace('-', ' ', $category)) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="flex gap-3">
                <button type="submit" class="admin-button">Search media</button>
                <a href="{{ route('admin.media.browser', request()->only(['target', 'preview', 'label'])) }}" class="admin-button admin-button--secondary">Reset</a>
            </div>
        </form>

        <div class="mt-6 admin-media-grid">
            @forelse($media as $item)
                @include('admin.media.partials.card', ['item' => $item, 'mode' => 'picker'])
            @empty
                <div class="admin-empty">No media found for the current filters.</div>
            @endforelse
        </div>

        <div class="mt-6">
            {{ $media->links() }}
        </div>
    </div>
@endsection
