@php
    $publishedAt = old('published_at', isset($blogPost) && $blogPost->published_at ? $blogPost->published_at->format('Y-m-d\TH:i') : '');
@endphp

<div class="admin-grid">
    <div class="admin-card">
        <p class="admin-section-title">Post identity</p>
        <div class="mt-4 admin-form-grid admin-form-grid--two">
            <div class="admin-field">
                <label for="blog-post-title">Title</label>
                <input id="blog-post-title" type="text" name="title" value="{{ old('title', $blogPost->title ?? '') }}" required>
            </div>
            <div class="admin-field">
                <label for="blog-post-slug">Slug</label>
                <input id="blog-post-slug" type="text" name="slug" value="{{ old('slug', $blogPost->slug ?? '') }}" required>
            </div>
            <div class="admin-field">
                <label for="blog-post-badge">Badge</label>
                <input id="blog-post-badge" type="text" name="badge" value="{{ old('badge', $blogPost->badge ?? '') }}" placeholder="GA4">
            </div>
            <div class="admin-field">
                <label for="blog-post-reading-time">Reading time</label>
                <input id="blog-post-reading-time" type="text" name="reading_time" value="{{ old('reading_time', $blogPost->reading_time ?? '') }}" placeholder="5 min read">
            </div>
            <div class="admin-field">
                <label for="blog-post-sort-order">Sort order</label>
                <input id="blog-post-sort-order" type="number" min="0" name="sort_order" value="{{ old('sort_order', $blogPost->sort_order ?? 0) }}">
                <p class="admin-field__hint">Lower numbers appear first when dates are the same.</p>
            </div>
            <div class="admin-field">
                <label for="blog-post-published-at">Publish date</label>
                <input id="blog-post-published-at" type="datetime-local" name="published_at" value="{{ $publishedAt }}">
            </div>
        </div>
    </div>

    <div class="admin-grid admin-grid--two">
        <div class="admin-card">
            <p class="admin-section-title">Publishing</p>
            <div class="mt-4 grid gap-4">
                <label class="inline-flex items-center gap-3 text-sm font-medium text-slate-700">
                    <input type="checkbox" name="is_published" value="1" class="h-4 w-4 rounded border-slate-300 text-[#14599E] focus:ring-[#14599E]" @checked(old('is_published', $blogPost->is_published ?? true))>
                    <span>Published on the public blog</span>
                </label>

                <label class="inline-flex items-center gap-3 text-sm font-medium text-slate-700">
                    <input type="checkbox" name="is_featured" value="1" class="h-4 w-4 rounded border-slate-300 text-[#14599E] focus:ring-[#14599E]" @checked(old('is_featured', $blogPost->is_featured ?? false))>
                    <span>Feature this article on the blog landing page</span>
                </label>
            </div>
        </div>

        <div class="admin-card">
            <p class="admin-section-title">Featured image</p>
            <div class="mt-4">
                @include('admin.partials.media-picker', [
                    'label' => 'Blog post image',
                    'name' => 'featured_image_media_id',
                    'fieldId' => 'blog-post-featured-image',
                    'value' => old('featured_image_media_id', $blogPost->featured_image_media_id ?? null),
                    'hint' => 'Used on the featured post card and single article page.',
                ])
            </div>
        </div>
    </div>

    <div class="admin-card">
        <p class="admin-section-title">Excerpt</p>
        <div class="mt-4 admin-form-grid">
            <div class="admin-field">
                <label for="blog-post-excerpt">Short summary</label>
                <textarea id="blog-post-excerpt" name="excerpt" rows="4">{{ old('excerpt', $blogPost->excerpt ?? '') }}</textarea>
                <p class="admin-field__hint">Shown on the blog listing and used as a fallback SEO description.</p>
            </div>
        </div>
    </div>

    <div class="admin-card">
        <p class="admin-section-title">Article content</p>
        <div class="mt-4 admin-form-grid">
            <div class="admin-field">
                <label for="blog-post-content">Content</label>
                @include('admin.partials.rich-text-editor', [
                    'id' => 'blog-post-content',
                    'name' => 'content',
                    'value' => old('content', $blogPost->content ?? ''),
                ])
            </div>
        </div>
    </div>

    <div class="admin-card">
        <p class="admin-section-title">SEO</p>
        <div class="mt-4 admin-form-grid admin-form-grid--two">
            <div class="admin-field md:col-span-2">
                <label for="blog-post-seo-title">SEO title</label>
                <input id="blog-post-seo-title" type="text" name="seo_title" value="{{ old('seo_title', $blogPost->seo_title ?? '') }}">
            </div>
            <div class="admin-field md:col-span-2">
                <label for="blog-post-seo-description">SEO description</label>
                <textarea id="blog-post-seo-description" name="seo_description" rows="4">{{ old('seo_description', $blogPost->seo_description ?? '') }}</textarea>
            </div>
        </div>
    </div>
</div>
