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

{% block title %}افزودن کلمه کلیدی سئو | {{ site_name }}{% endblock %}

{% block admin_content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3">
            <i class="fas fa-plus-circle text-primary me-2"></i>
            افزودن کلمه کلیدی جدید
        </h1>
        <a href="{{ url_for('admin_seo_keywords') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-right me-2"></i> بازگشت
        </a>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <form method="POST" action="{{ url_for('admin_seo_keywords_add') }}">
                        <div class="mb-3">
                            <label class="form-label">کلمه کلیدی <span class="text-danger">*</span></label>
                            <input type="text" name="keyword" class="form-control" placeholder="مثال: ابزارآلات صنعتی" required>
                            <small class="text-muted">این کلمه کلیدی برای تولید صفحه سئو استفاده می‌شود</small>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">دسته‌بندی مرتبط</label>
                            <select name="category_id" class="form-select">
                                <option value="">بدون دسته‌بندی</option>
                                {% for category in categories %}
                                    <option value="{{ category.id }}">{{ category.name }}</option>
                                {% endfor %}
                            </select>
                            <small class="text-muted">محصولات این دسته‌بندی در صفحه سئو نمایش داده می‌شوند</small>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">عنوان صفحه سئو</label>
                            <input type="text" name="seo_title" class="form-control" placeholder="عنوان صفحه سئو">
                            <small class="text-muted">اگر خالی بماند، به صورت خودکار تولید می‌شود</small>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">توضیحات متا</label>
                            <textarea name="seo_description" class="form-control" rows="3" placeholder="توضیحات متا برای صفحه سئو"></textarea>
                            <small class="text-muted">حداکثر ۱۵۰ کاراکتر</small>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">محتوای صفحه سئو</label>
                            <textarea name="seo_content" class="form-control" rows="6" placeholder="محتوای صفحه سئو (با تگ‌های HTML)"></textarea>
                            <small class="text-muted">می‌توانید از تگ‌های HTML برای فرمت‌دهی استفاده کنید</small>
                        </div>
                        
                        <div class="mb-3">
                            <div class="form-check">
                                <input type="checkbox" name="is_active" class="form-check-input" id="is_active" checked>
                                <label class="form-check-label" for="is_active">فعال</label>
                            </div>
                        </div>
                        
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-2"></i> ذخیره و تولید صفحه سئو
                        </button>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white py-3">
                    <h5 class="mb-0"><i class="fas fa-info-circle text-primary me-2"></i> راهنما</h5>
                </div>
                <div class="card-body">
                    <p class="small text-muted">با افزودن کلمه کلیدی، به صورت خودکار:</p>
                    <ul class="small text-muted">
                        <li>✅ صفحه سئو اختصاصی ایجاد می‌شود</li>
                        <li>✅ محصولات مرتبط به صفحه متصل می‌شوند</li>
                        <li>✅ اسلاگ یکتا تولید می‌شود</li>
                        <li>✅ متا تگ‌ها بهینه می‌شوند</li>
                    </ul>
                    <div class="alert alert-info">
                        <i class="fas fa-lightbulb me-2"></i>
                        <span class="small">پیشنهاد: از کلمات کلیدی با حجم جستجوی بالا استفاده کنید</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}