{% extends "base.html" %}

{% block title %}{{ category.seo_title|default(category.name ~ ' | راهنمای خطاهای دوو') }}{% endblock %}
{% block description %}{{ category.seo_description|default('راهنمای کامل خطاهای ' ~ category.name ~ ' دوو - عیب‌یابی و رفع مشکلات') }}{% endblock %}
{% block keywords %}{{ category.seo_keywords|default('خطاهای ' ~ category.name ~ ', عیب‌یابی ' ~ category.name ~ ', تعمیرات ' ~ category.name) }}{% endblock %}

{% block content %}

<!-- ============================================================
   بخش 1: هدر دسته‌بندی
   ============================================================ -->
<section class="container py-3 py-md-4" data-aos="fade-up">
    <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('errors_home') }}">راهنمای خطاها</a></li>
            <li class="breadcrumb-item active">{{ category.name }}</li>
        </ol>
    </nav>
</section>

<!-- ============================================================
   بخش 2: اطلاعات دسته‌بندی
   ============================================================ -->
<section class="container" data-aos="fade-up">
    <div class="row g-4 align-items-center">
        <div class="col-lg-8">
            <div class="d-flex align-items-center gap-3 mb-2">
                <div class="rounded-circle d-flex align-items-center justify-content-center" 
                     style="width:clamp(60px, 8vw, 80px);height:clamp(60px, 8vw, 80px);
                            background:linear-gradient(135deg,#c41e3a,#8b0000);flex-shrink:0;">
                    <i class="{{ category.icon|default('fas fa-wrench') }}" style="font-size:clamp(1.8rem, 3vw, 2.5rem);color:#fff;"></i>
                </div>
                <div>
                    <h1 class="fw-bold mb-0" style="font-size:clamp(1.8rem, 3.5vw, 2.8rem);">
                        {{ category.name }}
                    </h1>
                    <div class="d-flex flex-wrap gap-2 mt-1">
                        <span class="badge bg-danger">{{ errors|length|persian_numbers }} خطا</span>
                        {% set self_fix_count = errors|selectattr('can_self_fix')|list|length %}
                        {% if self_fix_count > 0 %}
                        <span class="badge bg-success">
                            <i class="fas fa-check-circle"></i> {{ self_fix_count|persian_numbers }} قابل رفع
                        </span>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% if category.description %}
            <p class="text-secondary" style="font-size:clamp(0.95rem, 1.1vw, 1.05rem);">
                {{ category.description }}
            </p>
            {% endif %}
        </div>
        <div class="col-lg-4 text-center">
            <div class="p-3" style="background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:16px;color:#fff;">
                <i class="fas fa-phone-volume fa-fade" style="color:#f5c518;font-size:1.5rem;"></i>
                <h6 class="mt-1">نیاز به کمک دارید؟</h6>
                <a href="tel:{{ settings.phone1|default('02155551234')|replace(' ', '')|replace('-', '') }}" 
                   class="btn btn-warning btn-sm rounded-pill" style="color:#1a1a2e;font-weight:700;">
                    <i class="fas fa-phone"></i> تماس بگیرید
                </a>
            </div>
        </div>
    </div>
</section>

<!-- ============================================================
   بخش 3: فیلتر و جستجو در دسته‌بندی
   ============================================================ -->
<section class="container py-3" data-aos="fade-up">
    <div class="card border-0 shadow-sm" style="border-radius:16px;overflow:hidden;">
        <div class="card-body p-3 p-md-4">
            <form action="{{ url_for('error_search') }}" method="GET" class="row g-2 g-md-3 align-items-end">
                <input type="hidden" name="category" value="{{ category.slug }}">
                <div class="col-md-8">
                    <label class="form-label fw-bold small"><i class="fas fa-search"></i> جستجو در {{ category.name }}</label>
                    <input type="text" name="q" class="form-control" placeholder="مثلاً: خنک نمی‌کند..." value="{{ request.args.get('q', '') }}">
                </div>
                <div class="col-md-4">
                    <button type="submit" class="btn btn-danger w-100 rounded-pill">
                        <i class="fas fa-search"></i> جستجو
                    </button>
                </div>
            </form>
            
            <!-- فیلترهای سریع -->
            <div class="mt-3 d-flex flex-wrap gap-2">
                <span class="text-secondary small fw-bold me-1">فیلتر:</span>
                <a href="{{ url_for('error_category_detail', slug=category.slug) }}" 
                   class="btn btn-sm btn-outline-secondary rounded-pill {% if not request.args.get('self_fix') %}active{% endif %}">
                    همه
                </a>
                <a href="{{ url_for('error_category_detail', slug=category.slug) }}?self_fix=1" 
                   class="btn btn-sm btn-outline-success rounded-pill {% if request.args.get('self_fix') %}active{% endif %}">
                    <i class="fas fa-check-circle"></i> قابل رفع
                </a>
                <a href="{{ url_for('error_category_detail', slug=category.slug) }}?difficulty=easy" 
                   class="btn btn-sm btn-outline-info rounded-pill {% if request.args.get('difficulty') == 'easy' %}active{% endif %}">
                    <i class="fas fa-smile"></i> آسان
                </a>
                <a href="{{ url_for('error_category_detail', slug=category.slug) }}?difficulty=medium" 
                   class="btn btn-sm btn-outline-warning rounded-pill {% if request.args.get('difficulty') == 'medium' %}active{% endif %}">
                    <i class="fas fa-meh"></i> متوسط
                </a>
                <a href="{{ url_for('error_category_detail', slug=category.slug) }}?difficulty=hard" 
                   class="btn btn-sm btn-outline-danger rounded-pill {% if request.args.get('difficulty') == 'hard' %}active{% endif %}">
                    <i class="fas fa-frown"></i> سخت
                </a>
            </div>
        </div>
    </div>
</section>

<!-- ============================================================
   بخش 4: لیست خطاها
   ============================================================ -->
<section class="container py-3 py-md-4" data-aos="fade-up">
    {% if errors %}
        <div class="row g-3 g-md-4">
            {% for error in errors %}
            <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="{{ loop.index * 50 }}">
                <a href="{{ url_for('error_detail', slug=error.slug) }}" class="text-decoration-none">
                    <div class="error-card">
                        <div class="d-flex align-items-start gap-3">
                            <div class="error-icon flex-shrink-0">
                                <i class="fas fa-exclamation"></i>
                            </div>
                            <div class="flex-grow-1">
                                <div class="d-flex flex-wrap align-items-center gap-1">
                                    <h6 class="fw-bold mb-0" style="font-size:clamp(0.85rem, 1vw, 0.95rem);">
                                        {{ error.error_title|truncate(30) }}
                                    </h6>
                                    {% if error.can_self_fix %}
                                    <span class="badge-self-fix"><i class="fas fa-check-circle"></i> قابل رفع</span>
                                    {% endif %}
                                    {% if error.is_featured %}
                                    <span class="badge bg-warning text-dark" style="font-size:0.55rem;">
                                        <i class="fas fa-star"></i>
                                    </span>
                                    {% endif %}
                                </div>
                                <p class="text-secondary small mb-1" style="font-size:0.7rem;">
                                    {{ error.error_description|truncate(45) }}
                                </p>
                                <div class="d-flex flex-wrap align-items-center gap-2">
                                    <span class="badge-difficulty {{ error.difficulty_level|default('medium') }}" style="font-size:0.55rem;">
                                        {% if error.difficulty_level == 'easy' %}
                                            <i class="fas fa-smile"></i> آسان
                                        {% elif error.difficulty_level == 'medium' %}
                                            <i class="fas fa-meh"></i> متوسط
                                        {% else %}
                                            <i class="fas fa-frown"></i> سخت
                                        {% endif %}
                                    </span>
                                    {% if error.estimated_time %}
                                    <span class="text-secondary" style="font-size:0.6rem;">
                                        <i class="fas fa-clock"></i> {{ error.estimated_time|persian_numbers }} دقیقه
                                    </span>
                                    {% endif %}
                                    <span class="text-secondary" style="font-size:0.6rem;">
                                        <i class="fas fa-eye"></i> {{ error.view_count|default(0)|persian_numbers }}
                                    </span>
                                    {% if error.error_code %}
                                    <span class="badge bg-secondary" style="font-size:0.5rem;">
                                        کد: {{ error.error_code }}
                                    </span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            {% endfor %}
        </div>
        
        <!-- ===== اگر خطایی وجود نداشت ===== -->
        {% else %}
        <div class="text-center py-5">
            <i class="fas fa-inbox" style="font-size:4rem;color:#dee2e6;"></i>
            <h5 class="mt-3 text-secondary">هیچ خطایی در این دسته‌بندی یافت نشد</h5>
            <p class="text-muted">ممکن است خطاها در حال بررسی باشند یا هنوز ثبت نشده‌اند.</p>
            <a href="{{ url_for('errors_home') }}" class="btn btn-outline-danger rounded-pill px-4">
                <i class="fas fa-arrow-right"></i> بازگشت به همه خطاها
            </a>
        </div>
        {% endif %}
</section>

<!-- ============================================================
   بخش 5: آمار دسته‌بندی
   ============================================================ -->
<section class="container py-3" data-aos="fade-up">
    <div class="row g-3">
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm text-center" style="border-radius:16px;">
                <div class="card-body p-3">
                    <div class="stat-number text-danger">{{ errors|length|persian_numbers }}</div>
                    <div class="text-secondary small">مجموع خطاها</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm text-center" style="border-radius:16px;">
                <div class="card-body p-3">
                    <div class="stat-number text-success">{{ errors|selectattr('can_self_fix')|list|length|persian_numbers }}</div>
                    <div class="text-secondary small">قابل رفع توسط کاربر</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm text-center" style="border-radius:16px;">
                <div class="card-body p-3">
                    <div class="stat-number text-warning">{{ errors|selectattr('is_featured')|list|length|persian_numbers }}</div>
                    <div class="text-secondary small">خطاهای برجسته</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm text-center" style="border-radius:16px;">
                <div class="card-body p-3">
                    <div class="stat-number text-primary">{{ errors|sum(attribute='view_count')|default(0)|persian_numbers }}</div>
                    <div class="text-secondary small">مجموع بازدید</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ============================================================
   بخش 6: سایر دسته‌بندی‌ها
   ============================================================ -->
{% if other_categories %}
<section class="container py-3 py-md-4" data-aos="fade-up">
    <div class="card border-0 shadow-sm" style="border-radius:16px;overflow:hidden;">
        <div class="card-body p-3 p-md-4">
            <h5 class="fw-bold mb-3"><i class="fas fa-tags" style="color:#c41e3a;"></i> سایر دسته‌بندی‌ها</h5>
            <div class="d-flex flex-wrap gap-2">
                {% for cat in other_categories %}
                <a href="{{ url_for('error_category_detail', slug=cat.slug) }}" class="text-decoration-none">
                    <span class="badge bg-light text-dark border" style="padding:8px 16px;font-size:0.85rem;transition:0.3s;">
                        <i class="{{ cat.icon|default('fas fa-wrench') }}"></i> {{ cat.name }}
                        <span class="badge bg-secondary text-white ms-1" style="font-size:0.6rem;">{{ cat.errors.count()|persian_numbers }}</span>
                    </span>
                </a>
                {% endfor %}
            </div>
        </div>
    </div>
</section>
{% endif %}

<!-- ============================================================
   بخش 7: CTA تماس
   ============================================================ -->
<section class="container" data-aos="fade-up">
    <div class="cta-section" style="padding:clamp(30px, 5vw, 40px) clamp(15px, 3vw, 30px);
            background:linear-gradient(135deg,#1a1a2e,#16213e);">
        <h2 style="font-size:clamp(1.2rem, 2.5vw, 1.8rem);color:#fff;">
            <i class="fas fa-phone-volume fa-fade" style="color:#f5c518;"></i> 
            نتوانستید خطا را رفع کنید؟
        </h2>
        <p style="font-size:clamp(0.85rem, 1vw, 1rem);color:rgba(255,255,255,0.8);">
            تکنسین‌های مجرب ما در کمتر از ۲ ساعت به محل شما می‌آیند
        </p>
        <a href="tel:{{ settings.phone1|default('02155551234')|replace(' ', '')|replace('-', '') }}" 
           class="btn btn-warning rounded-pill px-4 px-md-5 py-2 py-md-3" 
           style="font-size:clamp(1rem, 1.5vw, 1.1rem);font-weight:700;color:#1a1a2e;">
            <i class="fas fa-phone"></i> {{ settings.phone1|default('۰۲۱-۵۵۵۵-۱۲۳۴') }}
        </a>
        <div class="mt-2">
            <a href="https://wa.me/{{ settings.whatsapp|default('989121234567')|replace(' ', '')|replace('-', '')|replace('۰', '0') }}" 
               target="_blank" class="btn btn-success rounded-pill px-3 px-md-4" style="background:#25d366;font-size:clamp(0.8rem, 1vw, 0.9rem);">
                <i class="fab fa-whatsapp"></i> واتساپ
            </a>
            <a href="https://t.me/{{ settings.telegram|default('daewoo_tehran') }}" 
               target="_blank" class="btn btn-primary rounded-pill px-3 px-md-4" style="background:#0088cc;font-size:clamp(0.8rem, 1vw, 0.9rem);">
                <i class="fab fa-telegram"></i> تلگرام
            </a>
        </div>
    </div>
</section>

<!-- ============================================================
   استایل‌های اختصاصی
   ============================================================ -->
<style>
    .error-card {
        background: #fff;
        border-radius: 16px;
        padding: 18px;
        transition: 0.3s;
        border-right: 4px solid #c41e3a;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    }
    .error-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    }
    .error-card .error-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, #c41e3a, #8b0000);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 0.9rem;
        flex-shrink: 0;
    }
    .error-card .badge-self-fix {
        background: #28a745;
        color: #fff;
        padding: 2px 10px;
        border-radius: 50px;
        font-size: 0.55rem;
    }
    .error-card .badge-difficulty {
        padding: 2px 10px;
        border-radius: 50px;
        font-size: 0.55rem;
    }
    .error-card .badge-difficulty.easy { background: #d4edda; color: #155724; }
    .error-card .badge-difficulty.medium { background: #fff3cd; color: #856404; }
    .error-card .badge-difficulty.hard { background: #f8d7da; color: #721c24; }
    
    .breadcrumb {
        background: transparent;
        padding: 0;
    }
    .breadcrumb-item a {
        color: #c41e3a;
        text-decoration: none;
    }
    .breadcrumb-item a:hover {
        text-decoration: underline;
    }
    .breadcrumb-item.active {
        color: #1a1a2e;
    }
    
    .stat-number {
        font-size: clamp(1.5rem, 2.5vw, 2.2rem);
        font-weight: 900;
        font-feature-settings: "ss02";
    }
    
    .cta-section .btn-warning:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 30px rgba(245,197,24,0.4);
    }
    
    .badge.bg-light:hover {
        background: #c41e3a !important;
        color: #fff !important;
        border-color: #c41e3a !important;
        transform: scale(1.05);
    }
</style>

{% endblock %}