{% extends 'base.html.twig' %}

{% block title %}{{ article.title }} - Actualités | App Dépannage Info{% endblock %}

{% block head_meta %}
    {# Meta Description : 150-160 caractères max, propre et concise #}
    <meta name="description" content="{{ article.content|striptags|slice(0, 160) }}">
    
    {# Meta Keywords : Utile, on utilise la catégorie et les mots clés du titre #}
    <meta name="keywords" content="dépannage, informatique, {{ article.category.name|default('technologie') }}, {{ article.title|lower|split(' ')|join(', ') }}">

    <meta property="og:type" content="article">
    <meta property="og:url" content="{{ url('app_actualites_show', {'slug': article.slug}) }}">
    <meta property="og:title" content="{{ article.title }} - App Dépannage Info">
    <meta property="og:description" content="{{ article.content|striptags|slice(0, 250) }}">
    {% if article.image %}
        {# L'URL doit être ABSOLUE pour les réseaux sociaux #}
        <meta property="og:image" content="{{ absolute_url(asset(article.image)) }}"> 
    {% endif %}
    <meta property="article:published_time" content="{{ article.createdAt|date('c') }}" />
    <meta property="og:site_name" content="Dépannage Informatique 18">
    
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="{{ url('app_actualites_show', {'slug': article.slug}) }}">
    <meta name="twitter:title" content="{{ article.title }} - App Dépannage Info">
    <meta name="twitter:description" content="{{ article.content|striptags|slice(0, 250) }}">
    {% if article.image %}
        <meta name="twitter:image" content="{{ absolute_url(asset(article.image)) }}">
    {% endif %}
    <meta name="twitter:creator" content="@TonCompteTwitter"> {# IMPORTANT: Remplacer par ton @Twitter #}
    
    {# 3. Micro-format Schema.org (JSON-LD) pour les Rich Snippets #}
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Article",
      "headline": "{{ article.title }}",
      "image": [
        {% if article.image %}
          "{{ absolute_url(asset(article.image)) }}"
        {% else %}
          "{{ absolute_url(asset('images/hero-img.webp')) }}"
        {% endif %}
      ],
      "datePublished": "{{ article.createdAt|date('Y-m-d\\TH:i:sP') }}",
      "dateModified": "{{ article.updatedAt|default(article.createdAt)|date('Y-m-d\\TH:i:sP') }}",
      "author": {
        "@type": "Person",
        "name": "{{ article.author }}"
      },
      "publisher": {
        "@type": "Organization",
        "name": "App Dépannage Informatique 18",
        "logo": {
          "@type": "ImageObject",
          "url": "{{ absolute_url(asset('images/faviconPI.webp')) }}"
        }
      },
      "description": "{{ article.content|striptags|slice(0, 250) }}"
    }
    </script>
{% endblock %}

{% block body %}
<div class="container-fluid py-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <article class="card border-0 shadow-sm mb-4">
                    {% if article.image %}
                    <div class="card-img-top-container">
                        <img src="{{ article.image | imagine_filter('article_full') }}" 
                             alt="{{ article.title }}" 
                             class="card-img-top article-image"
                    </div>
                    {% endif %}
                    
                    <div class="card-body p-4">
                        <div class="article-header mb-4">
                            <h1 class="article-title h2 mb-3 text-primary">{{ article.title }}</h1>
                            
                            <div class="article-meta d-flex flex-wrap align-items-center gap-3 mb-3">
                                <div class="d-flex align-items-center text-muted">
                                    <i class="bi bi-person-fill me-2"></i>
                                    <span>{{ article.author }}</span>
                                </div>
                                <div class="d-flex align-items-center text-muted">
                                    <i class="bi bi-calendar3 me-2"></i>
                                    {# Utilisation de la balise <time> pour une meilleure sémantique de la date #}
                                    <time datetime="{{ article.createdAt|date('Y-m-d') }}">
                                        <span>{{ article.createdAt|date('d/m/Y à H:i') }}</span>
                                    </time>
                                </div>
                                {% if article.category %}
                                <div class="d-flex align-items-center">
                                    <span class="badge bg-primary">{{ article.category.name }}</span>
                                </div>
                                {% endif %}
                            </div>
                        </div>

                        <div class="article-content">
                            <div class="content-text">
                                {{ article.content|nl2br }}
                            </div>
                        </div>
                    </div>
                </article>

                <div class="d-flex justify-content-start align-items-center mb-4">
                    <a href="{{ path('app_actualites') }}" class="btn btn-outline-primary">
                        <i class="bi bi-arrow-left me-2"></i>Retour aux actualités
                    </a>
                </div>
            </div>
            
            {# ... (Sidebar sans changement) ... #}

            <div class="col-lg-4">
                <div class="sticky-top" style="top: 2rem;">
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-body p-4">
                            <h5 class="card-title text-primary mb-3">À propos de l'auteur</h5>
                            <div class="author-info">
                                <div class="author-avatar mb-3">
                                    <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center" 
                                         style="width: 60px; height: 60px; font-size: 1.5rem;">
                                        <i class="bi bi-person-fill"></i>
                                    </div>
                                </div>
                                <h6 class="author-name mb-2">{{ article.author }}</h6>
                                <p class="text-muted small mb-0">
                                    Expert en informatique et technologies, passionné par l'innovation et l'assistance technique.
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="card border-0 shadow-sm">
                        <div class="card-body p-4">
                            <h5 class="card-title text-primary mb-3">
                                <i class="bi bi-clock-history me-2"></i>Articles récents
                            </h5>
                            <div class="recent-articles">
                                <p class="text-muted small mb-0">
                                    <i class="bi bi-info-circle me-2"></i>
                                    Découvrez nos derniers articles et actualités technologiques.
                                </p>
                                <a href="{{ path('app_actualites') }}" class="btn btn-primary btn-sm mt-3">
                                    Voir tous les articles
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<style>
.article-image {
    border-radius: 0.5rem 0.5rem 0 0;
}

.article-content .content-text {
    line-height: 1.8;
    font-size: 1.1rem;
}

.article-content .content-text h1,
.article-content .content-text h2,
.article-content .content-text h3 {
    color: #0d6efd;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.article-content .content-text p {
    margin-bottom: 1.5rem;
}

.article-content .content-text ul,
.article-content .content-text ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.article-content .content-text blockquote {
    border-left: 4px solid #0d6efd;
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: #6c757d;
}

.article-meta {
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 1rem;
}

@media (max-width: 768px) {
    .article-meta {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
}
</style>
{% endblock %}