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

{% block page_title %}ویرایش دسته‌بندی - {{ category.name }}{% 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-edit text-warning"></i> ویرایش دسته‌بندی
        </h4>
        <p class="text-secondary small mb-0">
            ویرایش دسته‌بندی: <span class="fw-bold text-primary">{{ category.name }}</span>
        </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" value="{{ category.name }}" required>
            </div>
            
            <!-- اسلاگ -->
            <div class="mb-3">
                <label class="form-label fw-bold">اسلاگ</label>
                <input type="text" name="slug" class="form-control" value="{{ category.slug }}" dir="ltr">
                <small class="text-danger">تغییر اسلاگ ممکن است باعث شکستن لینک‌ها شود!</small>
            </div>
            
            <!-- آیکون -->
            <div class="mb-3">
                <label class="form-label fw-bold">آیکون</label>
                <input type="text" name="icon" class="form-control" value="{{ category.icon|default('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">{{ category.description|default('') }}</textarea>
            </div>
            
            <hr>
            
            <!-- سئو -->
            <div class="mb-3">
                <label class="form-label fw-bold">عنوان سئو</label>
                <input type="text" name="seo_title" class="form-control" value="{{ category.seo_title|default('') }}">
            </div>
            <div class="mb-3">
                <label class="form-label fw-bold">توضیحات سئو</label>
                <textarea name="seo_description" class="form-control" rows="2">{{ category.seo_description|default('') }}</textarea>
            </div>
            <div class="mb-3">
                <label class="form-label fw-bold">کلمات کلیدی سئو</label>
                <input type="text" name="seo_keywords" class="form-control" value="{{ category.seo_keywords|default('') }}">
            </div>
            
            <hr>
            
            <!-- تصویر فعلی -->
            {% if category.image %}
            <div class="mb-3">
                <label class="form-label fw-bold">تصویر فعلی</label>
                <div>
                    <img src="{{ category.image }}" alt="{{ category.name }}" style="max-height:150px;border-radius:8px;">
                </div>
            </div>
            {% endif %}
            
            <!-- تصویر جدید -->
            <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="{{ category.sort_order|default(0) }}">
            </div>
            
            <!-- وضعیت -->
            <div class="mb-3">
                <div class="form-check">
                    <input type="checkbox" name="is_active" class="form-check-input" {% if category.is_active %}checked{% endif %}>
                    <label class="form-check-label">فعال</label>
                </div>
            </div>
            
            <!-- اطلاعات آماری -->
            <div class="bg-light p-3 rounded-3 mb-3">
                <small class="text-muted d-block">تاریخ ایجاد: {{ category.created_at|persian_date }}</small>
                <small class="text-muted d-block">تعداد خطاها: {{ category.errors.count()|persian_numbers }}</small>
            </div>
            
            <!-- دکمه‌ها -->
            <button type="submit" class="btn btn-warning 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 %}