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

{% block add_meta_description %}
<!-- Inclusion des métadonnées SEO avancées pour les articles -->
{% include 'seo_meta.html' %}
{% endblock %}

{% block main %}

<div class="card-body">
{% if page.blog_art %}
	{% for item in page.blog_art %}
		<!-- Fil d'Ariane visible pour l'utilisateur -->
		<nav aria-label="breadcrumb" style="background: transparent; padding: 0;">
			<ol class="breadcrumb" style="background: transparent; padding: 0.5rem 0;">
				<li class="breadcrumb-item"><a href="{% url 'core_index' %}">Accueil</a></li>
				<li class="breadcrumb-item"><a href="{% url 'blog_index' %}">Blog</a></li>
				{% if item.b_cat.all %}
					{% for cat in item.b_cat.all|slice:":1" %}
						<li class="breadcrumb-item"><a href="{% url 'blog_tag' cat.cb_titre_slgify %}">{{ cat.cb_titre }}</a></li>
					{% endfor %}
				{% endif %}
				<li class="breadcrumb-item active" aria-current="page">{{ item.b_titre|truncatechars:50 }}</li>
			</ol>
		</nav>
		
		<!-- Article avec optimisations SEO -->
		<article itemscope itemtype="https://schema.org/BlogPosting">
			<!-- Métadonnées invisibles pour les moteurs de recherche -->
			<meta itemprop="headline" content="{{ item.b_titre }}">
			<meta itemprop="description" content="{{ item.b_description|striptags|truncatechars:160 }}">
			{% if item.b_description_img %}
			<meta itemprop="image" content="{{ item.b_description_img }}">
			{% endif %}
			{% if item.b_publdate %}
			<meta itemprop="datePublished" content="{{ item.b_publdate|date:'c' }}">
			<meta itemprop="dateModified" content="{{ item.b_publdate|date:'c' }}">
			{% endif %}
			
			<!-- Contenu principal de l'article -->
			<div itemprop="articleBody">
				<p class="card-text">{{item.b_contenu|safe}}</p>
			</div>
		</article>
		
		<!-- Bouton d'édition flottant pour les admins -->
		{% if user.is_staff %}
		<a href="/admin/blog/blog/{{item.id}}/change/" 
		   class="btn btn-warning btn-edit-article" 
		   target="_blank"
		   title="Modifier cet article">
			<i class="fas fa-edit"></i> Modifier
		</a>
		
		<style>
		.btn-edit-article {
			position: fixed;
			bottom: 30px;
			right: 30px;
			z-index: 1000;