{% 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-edit text-warning"></i> ویرایش صفحه سئو
        </h4>
        <p class="text-secondary small mb-0">{{ page.title|truncate(40) }}</p>
    </div>
    <a href="{{ url_for('admin_seo_pages') }}" 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="title" class="form-control" value="{{ page.title }}" required>
            </div>
            
            <!-- اسلاگ -->
            <div class="mb-3">
                <label class="form-label fw-bold">اسلاگ <span class="text-danger">*</span></label>
                <input type="text" name="slug" class="form-control" value="{{ page.slug }}" dir="ltr" required>
                <small class="text-danger">تغییر اسلاگ باعث شکستن لینک‌ها می‌شود!</small>
            </div>
            
            <!-- خلاصه -->
            <div class="mb-3">
                <label class="form-label fw-bold">خلاصه</label>
                <textarea name="summary" class="form-control" rows="2">{{ page.summary|default('') }}</textarea>
            </div>
            
            <!-- محتوا -->
            <div class="mb-3">
                <label class="form-label fw-bold">محتوا <span class="text-danger">*</span></label>
                <textarea name="content" class="form-control" rows="10">{{ page.content }}</textarea>
            </div>
            
            <hr>
            
            <!-- سئو -->
            <div class="mb-3">
                <label class="form-label fw-bold">عنوان سئو</label>
                <input type="text" name="seo_title" class="form-control" value="{{ page.seo_title|default('') }}">
            </div>
            <div class="mb-3">
                <label class="form-label fw-bold">توضیحات سئو</label>
                <textarea name="seo_description" class="form-control" rows="2">{{ page.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="{{ page.seo_keywords|default('') }}">
            </div>
            
            <hr>
            
            <!-- تصویر -->
            {% if page.main_image %}
            <div class="mb-3">
                <label class="form-label fw-bold">تصویر فعلی</label>
                <div><img src="{{ page.main_image }}" 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="main_image" class="form-control" accept="image/*">
            </div>
            
            <!-- وضعیت -->
            <div class="mb-3">
                <div class="form-check">
                    <input type="checkbox" name="is_active" class="form-check-input" {% if page.is_active %}checked{% endif %}>
                    <label class="form-check-label">فعال</label>
                </div>
            </div>
            
            <!-- دکمه‌ها -->
            <button type="submit" class="btn btn-warning rounded-pill px-4">
                <i class="fas fa-save"></i> بروزرسانی
            </button>
            <a href="{{ url_for('admin_seo_pages') }}" class="btn btn-secondary rounded-pill px-4">
                <i class="fas fa-arrow-right"></i> بازگشت
            </a>
        </div>
    </div>
</form>

<style>
    .form-label { font-weight: 600; font-size: 0.85rem; }
    .form-control { border-radius: 8px; padding: 10px 14px; }
    .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 %}