{% extends 'base.html' %}
{% load static %}

{% block title %}{{ article.meta_title|default:article.title }} | دکتر علی جعفری{% endblock %}

{% block extra_head %}
    <!-- SEO Meta Tags -->
    <meta name="description" content="{{ article.meta_description|default:article.summary|truncatechars:160 }}">
    <meta name="keywords" content="{{ article.meta_keywords|default:article.category }}">
    <meta name="author" content="دکتر علی جعفری">
    <meta name="robots" content="index, follow">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="article">
    <meta property="og:title" content="{{ article.title }}">
    <meta property="og:description" content="{{ article.summary|truncatechars:160 }}">
    <meta property="og:image" content="{{ request.scheme }}://{{ request.get_host }}{{ article.image.url }}">
    <meta property="og:url" content="{{ request.build_absolute_uri }}">
    <meta property="og:site_name" content="دکتر علی جعفری | جراح مغز و اعصاب">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ article.title }}">
    <meta name="twitter:description" content="{{ article.summary|truncatechars:160 }}">
    <meta name="twitter:image" content="{{ request.scheme }}://{{ request.get_host }}{{ article.image.url }}">

    <!-- Canonical -->
    <link rel="canonical" href="{{ request.build_absolute_uri }}">

    <!-- JSON-LD Structured Data (خیلی مهم برای AI و گوگل) -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Article",
        "headline": "{{ article.title|escapejs }}",
        "description": "{{ article.summary|truncatechars:160|escapejs }}",
        "image": "{{ request.scheme }}://{{ request.get_host }}{{ article.image.url }}",
        "author": {
            "@type": "Person",
            "name": "دکتر علی جعفری",
            "jobTitle": "متخصص جراحی مغز و اعصاب، فلوشیپ جراحی‌های قاعده جمجمه",
            "url": "{{ request.scheme }}://{{ request.get_host }}{% url 'about' %}"
        },
        "publisher": {
            "@type": "Organization",
            "name": "دکتر علی جعفری",
            "logo": {
                "@type": "ImageObject",
                "url": "{{ request.scheme }}://{{ request.get_host }}{% static 'images/logo.png' %}"
            }
        },
        "datePublished": "{{ article.created_at|date:'c' }}",
        "dateModified": "{{ article.updated_at|date:'c' }}",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "{{ request.build_absolute_uri }}"
        }
    }
    </script>
{% endblock %}

{% block content %}
<!-- Breadcrumb -->
<nav class="breadcrumb-nav">
    <div class="container">
        <ol class="breadcrumb">
            <li><a href="{% url 'home' %}">خانه</a></li>
            <li><a href="{% url 'articles' %}">مقالات</a></li>
            <li class="active">{{ article.title|truncatechars:50 }}</li>
        </ol>
    </div>
</nav>

<article class="article-detail">
    <div class="container">
        <div class="article-detail-wrapper">

            <!-- هدر مقاله -->
            <header class="article-header">
                {% if article.category %}
                <span class="article-category">{{ article.category }}</span>
                {% endif %}
                <h1 class="article-title">{{ article.title }}</h1>
                <div class="article-meta">
                    <span><i class="fas fa-user-md"></i> دکتر علی جعفری</span>
                    <span><i class="fas fa-calendar-alt"></i> {{ article.created_at|date:"j F Y" }}</span>
                    {% if article.updated_at != article.created_at %}
                    <span><i class="fas fa-sync-alt"></i> به‌روزرسانی: {{ article.updated_at|date:"j F Y" }}</span>
                    {% endif %}
                </div>
            </header>

            <!-- تصویر شاخص -->
            <div class="article-featured-image">
                <img src="{{ article.image.url }}" alt="{{ article.title }}" loading="eager">
            </div>

            <!-- محتوای مقاله -->
            <div class="article-body">
                {{ article.content|safe }}
            </div>

            <!-- CTA پایین مقاله -->
            <div class="article-cta">
                <div class="cta-content">
                    <h3>نیاز به مشاوره تخصصی دارید؟</h3>
                    <p>برای دریافت نوبت و مشاوره با دکتر علی جعفری در تماس باشید</p>
                    <div class="cta-buttons">
                        <a href="tel:09351708842" class="btn btn-dark">
                            <i class="fas fa-phone-alt"></i>
                            ۰۹۳۵۱۷۰۸۸۴۲
                        </a>
                        <a href="https://wa.me/989201369919" target="_blank" class="btn btn-outline-dark">
                            <i class="fab fa-whatsapp"></i>
                            واتساپ
                        </a>
                    </div>
                </div>
            </div>

            <!-- بازگشت -->
            <div class="article-footer">
                <a href="{% url 'articles' %}" class="back-link">
                    <i class="fas fa-arrow-right"></i>
                    بازگشت به لیست مقالات
                </a>
            </div>

        </div>
    </div>
</article>
{% endblock %}