@php
    $editing = $article->exists;
    $action = $editing ? route('admin.articles.update', $article) : route('admin.articles.store');
@endphp

<x-admin-layout :title="$editing ? 'Edit article' : 'New article'" active="articles">
    <a href="{{ route('admin.articles.index') }}" class="inline-flex items-center gap-2 text-sm text-slate-500 hover:text-brand-600 mb-5"><x-icon name="arrow" class="w-4 h-4 rotate-180"/> Back to articles</a>

    @if ($errors->any())
        <div class="mb-6 rounded-xl bg-red-50 border border-red-200 p-4 text-sm text-red-700">Please correct the errors below.</div>
    @endif

    <form method="POST" action="{{ $action }}" class="grid lg:grid-cols-3 gap-6">
        @csrf
        @if ($editing) @method('PUT') @endif

        <div class="lg:col-span-2 space-y-6">
            <div class="card p-6 space-y-5">
                <x-field name="title" label="Title" required :value="$article->title" />
                <x-field name="slug" label="Slug (optional — auto-generated)" :value="$article->slug" placeholder="auto from title" />
                <div>
                    <label for="excerpt" class="block text-sm font-medium text-slate-ink mb-1.5">Excerpt <span class="text-brand-600">*</span></label>
                    <textarea id="excerpt" name="excerpt" rows="2" required class="w-full rounded-xl border @error('excerpt') border-red-400 @else border-slate-200 @enderror bg-paper px-4 py-3 focus:border-brand-500 focus:ring-0">{{ old('excerpt', $article->excerpt) }}</textarea>
                    @error('excerpt')<p class="text-sm text-red-600 mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label for="body" class="block text-sm font-medium text-slate-ink mb-1.5">Body <span class="text-brand-600">*</span></label>
                    <p class="text-xs text-slate-400 mb-1.5">Blank line separates paragraphs. Start a line with <code>## </code> for a heading.</p>
                    <textarea id="body" name="body" rows="16" required class="w-full rounded-xl border @error('body') border-red-400 @else border-slate-200 @enderror bg-paper px-4 py-3 focus:border-brand-500 focus:ring-0 font-mono text-sm">{{ old('body', $article->body) }}</textarea>
                    @error('body')<p class="text-sm text-red-600 mt-1">{{ $message }}</p>@enderror
                </div>
            </div>
        </div>

        <div class="space-y-6">
            <div class="card p-6 space-y-5">
                <h2 class="font-semibold text-slate-ink">Details</h2>
                <div>
                    <label for="category" class="block text-sm font-medium text-slate-ink mb-1.5">Category</label>
                    <select id="category" name="category" class="w-full rounded-xl border border-slate-200 bg-paper px-4 py-3 focus:border-brand-500 focus:ring-0">
                        @foreach (['Insight', 'News', 'Press'] as $cat)
                            <option value="{{ $cat }}" @selected(old('category', $article->category) === $cat)>{{ $cat }}</option>
                        @endforeach
                    </select>
                </div>
                <x-field name="author" label="Author" :value="$article->author" />
                <x-field name="published_at" type="date" label="Publish date" :value="optional($article->published_at)->format('Y-m-d')" />
            </div>

            <div class="card p-6 space-y-3">
                <h2 class="font-semibold text-slate-ink mb-2">Visibility</h2>
                <label class="flex items-center gap-2 text-sm text-slate-700">
                    <input type="checkbox" name="published" value="1" @checked(old('published', $article->published)) class="rounded border-slate-300 text-brand-500 focus:ring-brand-500"> Published
                </label>
                <label class="flex items-center gap-2 text-sm text-slate-700">
                    <input type="checkbox" name="featured" value="1" @checked(old('featured', $article->featured)) class="rounded border-slate-300 text-brand-500 focus:ring-brand-500"> Featured
                </label>
            </div>

            <button type="submit" class="btn btn-primary w-full">{{ $editing ? 'Save changes' : 'Create article' }}</button>
        </div>
    </form>
</x-admin-layout>
