{% extends "base.html" %}

{% block title %}{{ seo_page.meta_title or seo_page.title }} | {{ site_name }}{% endblock %}

{% block meta_description %}{{ seo_page.meta_description or seo_page.description }}{% endblock %}

{% block content %}
<div class="container py-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ url_for('index') }}">خانه</a></li>
            <li class="breadcrumb-item"><a href="{{ url_for('products') }}">محصولات</a></li>
            <li class="breadcrumb-item active">{{ seo_page.title }}</li>
        </ol>
    </nav>

    <div class="row">
        <div class="col-lg-9">
            <!-- ===== محتوای صفحه سئو ===== -->
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-body">
                    <!-- فقط توضیحات (بدون تیتر اضافی) -->
                    {% if seo_page.description %}
                        <p class="lead text-muted">{{ seo_page.description }}</p>
                    {% endif %}
                    <hr>
                    <div class="seo-content">
                        {{ seo_page.content|safe }}
                    </div>
                </div>
            </div>

            <!-- ===== دکمه مشاهده همه محصولات ===== -->
            <div class="text-center mb-4">
                <a href="{{ url_for('products') }}" class="btn btn-primary btn-lg">
                    <i class="fas fa-shopping-bag me-2"></i> مشاهده همه محصولات ابزارآلات صنعتی
                </a>
            </div>

            <!-- ===== محصولات مرتبط ===== -->
            {% if products %}
                <h3 class="h4 mb-3">محصولات ویژه ابزارآلات صنعتی</h3>
                <div class="row">
                    {% for product in products %}
                        <div class="col-md-4 col-sm-6 mb-4">
                            <div class="product-card">
                                <div class="image-wrap">
                                    {% if product.images %}
                                        <img src="{{ product.images[0].image_url }}" alt="{{ product.title }}" loading="lazy">
                                    {% else %}
                                        <img src="{{ url_for('static', filename='images/no-image.png') }}" alt="بدون تصویر" loading="lazy">
                                    {% endif %}
                                    {% if product.discount_percent > 0 %}
                                        <div class="badge-wrap">
                                            <span class="badge-item discount">{{ product.discount_percent }}% تخفیف</span>
                                        </div>
                                    {% endif %}
                                </div>
                                <div class="info">
                                    <div class="title">
                                        <a href="{{ url_for('product_detail', slug=product.slug) }}">{{ product.title }}</a>
                                    </div>
                                    <div class="price-wrap">
                                        <span class="current">{{ product.get_final_price()|persian_price }}</span>
                                        <span class="currency">تومان</span>
                                        {% if product.compare_price and product.compare_price > product.get_final_price() %}
                                            <span class="old">{{ product.compare_price|persian_price }}</span>
                                        {% endif %}
                                    </div>
                                    <button class="add-btn add-to-cart" data-product-id="{{ product.id }}">
                                        <i class="fas fa-shopping-bag"></i> افزودن به سبد
                                    </button>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
                
                <!-- لینک بیشتر -->
                <div class="text-center mt-3">
                    <a href="{{ url_for('products') }}" class="btn btn-outline-primary">
                        <i class="fas fa-arrow-left me-2"></i> مشاهده همه محصولات
                    </a>
                </div>
            {% endif %}
        </div>

        <!-- ===== سایدبار ===== -->
        <div class="col-lg-3">
            <div class="card shadow-sm border-0 sticky-top" style="top: 100px;">
                <div class="card-header bg-white py-3">
                    <h5 class="mb-0"><i class="fas fa-tags text-primary me-2"></i> صفحات مرتبط</h5>
                </div>
                <div class="card-body p-0">
                    {% set other_pages = seo_pages or [] %}
                    {% if other_pages %}
                        <ul class="list-group list-group-flush">
                            {% for page in other_pages %}
                                {% if page.id != seo_page.id %}
                                    <li class="list-group-item">
                                        <a href="{{ url_for('seo_page', slug=page.slug) }}" class="text-decoration-none">
                                            <i class="fas fa-file-alt text-muted me-2"></i>
                                            {{ page.title|truncate(30) }}
                                        </a>
                                    </li>
                                {% endif %}
                            {% endfor %}
                        </ul>
                    {% else %}
                        <div class="text-center py-4">
                            <i class="fas fa-file-alt fa-2x text-muted mb-2 d-block"></i>
                            <p class="text-muted small">صفحه دیگری وجود ندارد</p>
                        </div>
                    {% endif %}
                </div>
            </div>
            
            <!-- لینک سریع به محصولات -->
            <div class="card shadow-sm border-0 mt-3">
                <div class="card-body text-center">
                    <i class="fas fa-box-open fa-2x text-primary mb-2 d-block"></i>
                    <h6 class="mb-2">همه محصولات</h6>
                    <p class="text-muted small">مشاهده و خرید بهترین ابزارآلات صنعتی</p>
                    <a href="{{ url_for('products') }}" class="btn btn-primary btn-sm w-100">
                        <i class="fas fa-arrow-left me-1"></i> مشاهده همه
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.seo-content h2 {
    font-size: 24px;
    margin-top: 30px;
    margin-bottom: 15px;
    color: var(--dark);
}
.seo-content h3 {
    font-size: 20px;
    margin-top: 25px;
    margin-bottom: 10px;
    color: var(--dark);
}
.seo-content p {
    margin-bottom: 15px;
    line-height: 2;
}
.seo-content ul,
.seo-content ol {
    padding-right: 25px;
    margin-bottom: 15px;
}
.seo-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: 15px 0;
}
</style>
{% endblock %}