@model AsadiTools.Pages.Admin.Blog.BlogPostInput

@{
    var cls = "w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500";
}

<div class="space-y-5">
    <div>
        <label class="text-sm font-medium text-gray-700 mb-1.5 block">عنوان مقاله <span class="text-red-500">*</span></label>
        <input asp-for="Title" class="@cls" placeholder="مثال: راهنمای تعمیر فرز برقی" />
        <span asp-validation-for="Title" class="text-red-500 text-xs"></span>
    </div>

    <div>
        <label class="text-sm font-medium text-gray-700 mb-1.5 block">اسلاگ (URL)</label>
        <input asp-for="Slug" class="@cls" dir="ltr" placeholder="carbon-brush-guide (خودکار از عنوان)" />
        <p class="text-xs text-gray-400 mt-1">URL صفحه: /blog/اسلاگ — اگر خالی بماند از عنوان ساخته می‌شود</p>
    </div>

    <div>
        <label class="text-sm font-medium text-gray-700 mb-1.5 block">چکیده (برای لیست بلاگ)</label>
        <textarea asp-for="Excerpt" rows="2" class="@cls resize-none" placeholder="خلاصه کوتاه مقاله..."></textarea>
    </div>

    <div>
        <label class="text-sm font-medium text-gray-700 mb-1.5 block">توضیح متا (SEO)</label>
        <textarea asp-for="MetaDescription" rows="2" class="@cls resize-none" placeholder="توضیح برای گوگل (حداکثر ۱۶۰ کاراکتر)..."></textarea>
    </div>

    <div>
        <label class="text-sm font-medium text-gray-700 mb-1.5 block">آدرس تصویر شاخص (URL)</label>
        <input asp-for="FeaturedImage" class="@cls" dir="ltr" placeholder="https://..." />
    </div>

    <div>
        <label class="text-sm font-medium text-gray-700 mb-1.5 block">برچسب‌ها (با کاما جدا شوند)</label>
        <input asp-for="Tags" class="@cls" placeholder="تعمیر فرز,کاربن,دیوالت" />
    </div>

    <div>
        <label class="text-sm font-medium text-gray-700 mb-1.5 block">محتوا (HTML) <span class="text-red-500">*</span></label>
        <textarea asp-for="Content" rows="20" class="@cls resize-y font-mono text-xs leading-relaxed" dir="auto"
                  placeholder="<h2>عنوان بخش</h2>&#10;<p>متن مقاله...</p>"></textarea>
        <p class="text-xs text-gray-400 mt-1">محتوا به صورت HTML نوشته شود. از تگ‌های h2، h3، p، ul، li، strong استفاده کنید.</p>
        <span asp-validation-for="Content" class="text-red-500 text-xs"></span>
    </div>

    <div class="flex items-center gap-3 p-4 bg-gray-50 rounded-xl border border-gray-100">
        <input asp-for="IsPublished" type="checkbox" class="w-4 h-4 rounded accent-blue-600" />
        <div>
            <label asp-for="IsPublished" class="font-medium text-gray-800 text-sm cursor-pointer">انتشار فوری</label>
            <p class="text-xs text-gray-400">اگر تیک بزنید، مقاله بلافاصله در سایت نمایش داده می‌شود.</p>
        </div>
    </div>
</div>