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

{% block page_title %}پیش‌نمایش سئو{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="stat-card">
            <h5 class="fw-bold mb-4"><i class="fas fa-eye" style="color:#c41e3a;"></i> پیش‌نمایش متا تگ‌ها</h5>
            
            <div class="row g-4">
                <div class="col-md-6">
                    <div class="p-3 bg-light rounded-3">
                        <h6 class="fw-bold">عنوان (Title)</h6>
                        <p class="text-primary">{{ preview.title|default('تنظیم نشده') }}</p>
                        <small class="text-muted">{{ preview.title|length }}/۶۰ کاراکتر</small>
                        <div class="progress mt-1" style="height:5px;">
                            <div class="progress-bar bg-success" style="width:{{ (preview.title|length * 100 / 60)|round|int }}%;"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="p-3 bg-light rounded-3">
                        <h6 class="fw-bold">توضیحات (Description)</h6>
                        <p class="text-secondary">{{ preview.description|default('تنظیم نشده') }}</p>
                        <small class="text-muted">{{ preview.description|length }}/۱۶۰ کاراکتر</small>
                        <div class="progress mt-1" style="height:5px;">
                            <div class="progress-bar bg-success" style="width:{{ (preview.description|length * 100 / 160)|round|int }}%;"></div>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="p-3 bg-light rounded-3">
                        <h6 class="fw-bold">کلمات کلیدی (Keywords)</h6>
                        <p>{{ preview.keywords|default('تنظیم نشده') }}</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="p-3 bg-light rounded-3">
                        <h6 class="fw-bold">Open Graph Title</h6>
                        <p>{{ preview.og_title|default('تنظیم نشده') }}</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="p-3 bg-light rounded-3">
                        <h6 class="fw-bold">Open Graph Description</h6>
                        <p>{{ preview.og_description|default('تنظیم نشده') }}</p>
                    </div>
                </div>
                
                <div class="col-12">
                    <h6 class="fw-bold mt-3">کلمات کلیدی برتر از بانک</h6>
                    <div class="d-flex flex-wrap gap-2">
                        {% for kw in preview.top_keywords %}
                        <span class="badge bg-primary">{{ kw.keyword }}</span>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}