<form
    method="POST"
    action="{{ $action }}"
    enctype="multipart/form-data"
    x-data="{ previews: [] }"
    class="mt-6 space-y-5 rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900"
>
    @csrf
    @if ($method !== 'POST')
        @method($method)
    @endif
    <div>
        <label class="text-sm font-bold text-slate-700 dark:text-slate-200">Category</label>
        <select name="community_category_id" required class="mt-1 w-full rounded-lg border-blue-100 bg-white text-sm dark:border-blue-900 dark:bg-slate-950 dark:text-white">
            @foreach ($categories as $category)
                <option value="{{ $category->id }}" @selected(old('community_category_id', $post?->community_category_id) == $category->id)>{{ $category->name }}</option>
            @endforeach
        </select>
        @error('community_category_id') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
    </div>
    <div>
        <label class="text-sm font-bold text-slate-700 dark:text-slate-200">Title</label>
        <input name="title" value="{{ old('title', $post?->title) }}" placeholder="Optional title" class="mt-1 w-full rounded-lg border-blue-100 bg-white text-sm dark:border-blue-900 dark:bg-slate-950 dark:text-white">
        @error('title') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
    </div>
    <div>
        <label class="text-sm font-bold text-slate-700 dark:text-slate-200">Post</label>
        <textarea name="body" rows="10" placeholder="Write your trade review, setup explanation, question, or leave blank if you only want to share images." class="mt-1 w-full rounded-lg border-blue-100 bg-white text-sm dark:border-blue-900 dark:bg-slate-950 dark:text-white">{{ old('body', $post?->body) }}</textarea>
        @error('body') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
    </div>

    @if ($post?->images?->isNotEmpty())
        <div>
            <p class="text-sm font-bold text-slate-700 dark:text-slate-200">Current images</p>
            @include('community.partials.image-grid', [
                'images' => $post->images,
                'post' => $post,
                'deleteRouteName' => 'community.posts.images.destroy',
                'deletable' => true,
            ])
        </div>
    @endif

    <div>
        <label class="text-sm font-bold text-slate-700 dark:text-slate-200">Images</label>
        <p class="mt-1 text-xs font-semibold text-slate-500 dark:text-slate-400">Upload up to 5 images total. Allowed: JPG, JPEG, PNG, WebP. Maximum: 3MB each.</p>
        <input
            type="file"
            name="images[]"
            accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp"
            multiple
            class="mt-3 w-full rounded-lg border border-blue-100 bg-white px-3 py-2 text-sm text-slate-700 file:mr-4 file:rounded-lg file:border-0 file:bg-blue-600 file:px-4 file:py-2 file:text-sm file:font-bold file:text-white dark:border-blue-900 dark:bg-slate-950 dark:text-slate-200"
            @change="
                previews = [];
                [...$event.target.files].slice(0, 5).forEach(file => previews.push(URL.createObjectURL(file)));
            "
        >
        @error('images') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
        @error('images.*') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror

        <div x-show="previews.length" class="mt-4 grid gap-3 sm:grid-cols-2 md:grid-cols-3">
            <template x-for="preview in previews" :key="preview">
                <img :src="preview" alt="Preview" class="aspect-video rounded-lg border border-blue-100 object-cover dark:border-blue-900/50">
            </template>
        </div>
    </div>

    <div class="flex flex-wrap gap-3">
        <button class="rounded-lg bg-blue-600 px-5 py-3 text-sm font-black text-white hover:bg-blue-700">Save Post</button>
        <a href="{{ route('community.index') }}" class="rounded-lg border border-blue-100 px-5 py-3 text-sm font-black text-blue-700 dark:border-blue-900 dark:text-blue-300">Cancel</a>
    </div>
</form>
