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

{% block add_meta_description %}
<!-- Métadonnées SEO enrichies pour Open Graph -->
{% if page.seo %}
	<!-- Métadonnées de base -->
	<meta name="description" content="{{ page.seo.description }}">
	{% if page.seo.keywords %}
	<meta name="keywords" content="{{ page.seo.keywords }}">
	{% endif %}
	
	<!-- URL Canonique -->
	{% if page.seo.canonical_url %}
	<link rel="canonical" href="{{ page.seo.canonical_url }}">
	{% endif %}
	
	<!-- Open Graph / Facebook -->
	<meta property="og:type" content="{{ page.seo.og.type }}">
	<meta property="og:title" content="{{ page.seo.og.title }}">
	<meta property="og:description" content="{{ page.seo.og.description }}">
	<meta property="og:url" content="{{ page.seo.og.url }}">
	<meta property="og:image" content="{{ page.seo.og.image }}">
	<meta property="og:image:alt" content="{{ page.seo.image_alt }}">
	<meta property="og:image:width" content="{{ page.seo.og.image_width }}">
	<meta property="og:image:height" content="{{ page.seo.og.image_height }}">
	<meta property="og:image:type" content="{{ page.seo.og.image_type }}">
	<meta property="og:site_name" content="{{ page.seo.og.site_name }}">
	<meta property="og:locale" content="{{ page.seo.og.locale }}">
	
	{% if page.seo.og.type == 'article' %}
		{% if page.seo.og.article_published_time %}
		<meta property="article:published_time" content="{{ page.seo.og.article_published_time }}">
		{% endif %}
		{% if page.seo.og.article_modified_time %}
		<meta property="article:modified_time" content="{{ page.seo.og.article_modified_time }}">
		{% endif %}
		{% if page.seo.og.article_author %}
		<meta property="article:author" content="{{ page.seo.og.article_author }}">
		{% endif %}
		{% if page.seo.og.article_section %}
		<meta property="article:section" content="{{ page.seo.og.article_section }}">
		{% endif %}
	{% endif %}
	
	<!-- Twitter Card -->
	<meta name="twitter:card" content="{{ page.seo.twitter.card }}">
	<meta name="twitter:title" content="{{ page.seo.twitter.title }}">
	<meta name="twitter:description" content="{{ page.seo.twitter.description }}">
	<meta name="twitter:image" content="{{ page.seo.twitter.image }}">
	<meta name="twitter:image:alt" content="{{ page.seo.image_alt }}">
	{% if page.seo.twitter.site %}
	<meta name="twitter:site" content="{{ page.seo.twitter.site }}">
	{% endif %}
	{% if page.seo.twitter.creator %}
	<meta name="twitter:creator" content="{{ page.seo.twitter.creator }}">
	{% endif %}
	
	<!-- Schema.org JSON-LD -->
	{% if page.seo_json %}
	<script type="application/ld+json">
	{{ page.seo_json|safe }}
	</script>
	{% endif %}
{% endif %}
{% endblock %}

{% block main %}

<div class="card-body">
{% if page.blog_art %}
	{% for item in page.blog_art %}
		<p class="card-text">{{item.b_contenu|safe}}</p>
		
		<!-- Boutons de partage social -->
		{% include 'blog/social_share.html' with article_title=item.b_titre article_url=request.build_absolute_uri %}
		
		<!-- 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;
			padding: 12px 24px;
			border-radius: 50px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.3);
			font-weight: 600;
			transition: all 0.3s ease;
			text-decoration: none;
		}
		
		.btn-edit-article:hover {
			transform: translateY(-3px);
			box-shadow: 0 6px 20px rgba(0,0,0,0.4);
		}
		
		.btn-edit-article i {
			margin-right: 8px;
		}
		
		@media (max-width: 768px) {
			.btn-edit-article {
				bottom: 20px;
				right: 20px;
				padding: 10px 20px;
				font-size: 0.9rem;
			}
		}
		</style>
		{% endif %}
	{% endfor %}
{% endif %}
</div>
{% endblock %}

{% block right_panel %}
<div class="card" style="background-color: rgba(250,250,250,0.88);" >
<div class="card-body">
	
	{% for item in page.blog_art %}
	{% if item.b_description_img != "" %}
		<p><img src="{{item.b_description_img}}"></p>
		<h4> Indroduction </h4>
		<p>{{item.b_description|safe|urlize}}</p>
		<p class="card-text">{{page.p_right|safe|urlize}}</p>
	{% endif %}
	<p>
		<b>Nombre de Lectures </b>: {{item.b_reading}}<br>
		<b>Date de mise en ligne </b>: {{item.b_publdate|date:"m N Y à H:i"}}
	</p>
	<h4> Les Catégories </h4>
	<p>
		{% for cat in item.b_cat.all %}
			<a href="{% url 'blog_tag' cat.cb_titre_slgify %}" class="btn btn-dark mb-2" tabindex="-1" role="button" aria-disabled="true">{{cat.cb_titre}}</a>
		{% endfor %}
	{% endfor %}
	</p>

	{% if page.retour %}
		<p class="card-text">
			<a href="{% url page.retour %}" class="btn btn-dark mb-2" tabindex="-1" role="button" aria-disabled="true"><i class="fas fa-undo-alt"></i> Retour</a>
		</p>
	{% endif %}
</div>
</div>
{% endblock %}