{% extends "admin/layout.html" %}

{% block page_title %}ایجاد دسته‌بندی خطا{% endblock %}

{% block content %}

<div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
    <div>
        <h4 class="fw-bold mb-0">
            <i class="fas fa-folder-plus text-primary"></i> ایجاد دسته‌بندی خطا
        </h4>
        <p class="text-secondary small mb-0">ثبت دسته‌بندی جدید برای خطاهای لوازم خانگی دوو</p>
    </div>
    <a href="{{ url_for('admin_errors') }}" class="btn btn-secondary btn-sm rounded-pill">
        <i class="fas fa-arrow-right"></i> بازگشت
    </a>
</div>

<form method="POST" enctype="multipart/form-data">
    <div class="card border-0 shadow-sm" style="border-radius:16px;overflow:hidden;">
        <div class="card-body p-4">
            
            <!-- نام -->
            <div class="mb-3">
                <label class="form-label fw-bold">نام دسته‌بندی <span class="text-danger">*</span></label>
                <input type="text" name="name" class="form-control" placeholder="مثلاً: یخچال، لباسشویی، پکیج" required>
            </div>
            
            <!-- اسلاگ -->
            <div class="mb-3">
                <label class="form-label fw-bold">اسلاگ</label>
                <input type="text" name="slug" class="form-control" placeholder="مثلاً: refrigerator" dir="ltr">
                <small class="text-muted">اگر خالی بماند، به صورت خودکار تولید می‌شود</small>
            </div>
            
            <!-- آیکون -->
            <div class="mb-3">
                <label class="form-label fw-bold">آیکون</label>
                <input type="text" name="icon" class="form-control" placeholder="fa-solid fa-wrench" value="fa-solid fa-wrench">
                <small class="text-muted"><a href="https://fontawesome.com/icons" target="_blank">مشاهده آیکون‌های Font Awesome</a></small>
            </div>
            
            <!-- توضیحات -->
            <div class="mb-3">
                <label class="form-label fw-bold">توضیحات</label>
                <textarea name="description" class="form-control" rows="3" placeholder="توضیحات کامل دسته‌بندی..."></textarea>
            </div>
            
            <hr>
            
            <!-- سئو -->
            <div class="mb-3">
                <label class="form-label fw-bold">عنوان سئو</label>
                <input type="text" name="seo_title" class="form-control" placeholder="عنوان برای موتورهای جستجو">
            </div>
            <div class="mb-3">
                <label class="form-label fw-bold">توضیحات سئو</label>
                <textarea name="seo_description" class="form-control" rows="2" placeholder="توضیحات برای موتورهای جستجو"></textarea>
            </div>
            <div class="mb-3">
                <label class="form-label fw-bold">کلمات کلیدی سئو</label>
                <input type="text" name="seo_keywords" class="form-control" placeholder="کلمات کلیدی، جدا شده با کاما">
            </div>
            
            <hr>
            
            <!-- تصویر -->
            <div class="mb-3">
                <label class="form-label fw-bold">تصویر</label>
                <input type="file" name="image" class="form-control" accept="image/*">
            </div>
            
            <!-- ترتیب -->
            <div class="mb-3">
                <label class="form-label fw-bold">ترتیب نمایش</label>
                <input type="number" name="sort_order" class="form-control" value="0">
                <small class="text-muted">اعداد کوچکتر، بالاتر نمایش داده می‌شوند</small>
            </div>
            
            <!-- وضعیت -->
            <div class="mb-3">
                <div class="form-check">
                    <input type="checkbox" name="is_active" class="form-check-input" checked>
                    <label class="form-check-label">فعال</label>
                </div>
            </div>
            
            <!-- دکمه‌ها -->
            <button type="submit" class="btn btn-primary rounded-pill px-4">
                <i class="fas fa-save"></i> ایجاد دسته‌بندی
            </button>
            <a href="{{ url_for('admin_errors') }}" class="btn btn-secondary rounded-pill px-4">
                <i class="fas fa-arrow-right"></i> بازگشت
            </a>
        </div>
    </div>
</form>

<style>
    .form-label {
        font-size: 0.85rem;
        font-weight: 600;
    }
    .form-control {
        border-radius: 8px;
        padding: 10px 14px;
        border: 1px solid #dee2e6;
    }
    .form-control:focus {
        border-color: #c41e3a;
        box-shadow: 0 0 0 3px rgba(196,30,58,0.1);
    }
    hr {
        border-color: rgba(0,0,0,0.06);
        margin: 20px 0;
    }
</style>

{% endblock %}