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

{% block exted_menu %}
{% for cat in page.blog_cat %}
	<li class="nav-item"><a class="nav-link" href="{% url 'blog_tag' cat.cb_titre_slgify %}">{{cat.cb_titre}}</a></li>
{% endfor %}
<li class="nav-item"><a class="nav-link" href="{% url 'blog_tag' 'all' %}">Tous les articles</a></li>
{% endblock %}

{% block main %}
<style>
/* Styles modernes pour les articles */
.blog-card {
	background: white;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	transition: all 0.3s ease;
	margin-bottom: 2rem;
}

.blog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.blog-card-image {
	width: 100%;
	height: 280px;
	object-fit: cover;
	object-position: center;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	display: block;
}

.blog-card-image-container {
	width: 100%;
	max-height: 400px;
	overflow: hidden;
	position: relative;
	background: #f7fafc;
	display: flex;
	align-items: center;
	justify-content: center;
}

.blog-card-image-container img {
	max-width: 100%;
	max-height: 400px;
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: center;
	transition: transform 0.3s ease;
}

.blog-card:hover .blog-card-image-container img {
	transform: scale(1.02);
}

.blog-card-content {
	padding: 2rem;
}

.blog-card-title {
	font-size: 1.75rem;
	font-weight: 700;
	color: #1a202c;
	margin-bottom: 1rem;
	line-height: 1.3;
}

.blog-card-title:hover {
	color: #667eea;
}

.blog-card-description {
	font-size: 1.05rem;
	line-height: 1.7;
	color: #4a5568;
	margin-bottom: 1.5rem;
}

.blog-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 1rem;
	border-top: 1px solid #e2e8f0;
	font-size: 0.9rem;
	color: #718096;
}

.blog-meta {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.blog-category-badge {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	background: #667eea;
	color: white;
	border-radius: 20px;
	font-size: 0.85rem;
	text-decoration: none;
	transition: background 0.2s;
}

.blog-category-badge:hover {
	background: #764ba2;
	color: white;
}

.blog-date {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.blog-date i {
	color: #cbd5e0;
}

/* Responsive */
@media (max-width: 768px) {
	.blog-card-image-container {
		max-height: 250px;
	}
	
	.blog-card-image-container img {
		max-height: 250px;
	}
	
	.blog-card-content {
		padding: 1.5rem;
	}
	
	.blog-card-title {
		font-size: 1.5rem;
	}
}
</style>

{% if page.blog_art %}
	{% for item in page.blog_art %}
		<article class="blog-card">
			<a href="{% url 'blog_play' item.b_titre_slugify %}" class="text-decoration-none">
				{% if item.b_description_img %}
					<div class="blog-card-image-container">
						<img src="{{item.b_description_img}}" alt="{{item.b_titre}}">
					</div>
				{% else %}
					<div class="blog-card-image d-flex align-items-center justify-content-center">
						<h3 class="text-white text-center px-4">{{item.b_titre}}</h3>
					</div>
				{% endif %}
			</a>
			
			<div class="blog-card-content">
				<a href="{% url 'blog_play' item.b_titre_slugify %}" class="text-decoration-none">
					<h2 class="blog-card-title">{{item.b_titre}}</h2>
				</a>
				
				<div class="blog-card-description">
					{{item.b_description|safe|truncatewords_html:50}}
				</div>
				
				<div class="blog-card-footer">
					<div class="blog-meta">
						<span class="blog-date">
							<i class="far fa-clock"></i>
							{{item.b_publdate|timesince}}
						</span>
						
						{% if item.b_cat.all %}
							{% for cat in item.b_cat.all %}
								<a href="{% url 'blog_tag' cat.cb_titre_slgify %}" class="blog-category-badge">
									{{ cat.cb_titre }}
								</a>
							{% endfor %}
						{% endif %}
					</div>
					
					<span class="text-muted">
						<i class="far fa-eye"></i> {{item.b_reading}}
					</span>
				</div>
			</div>
		</article>
	{% endfor %}
{% else %}
	<div class="alert alert-info">
		<i class="fas fa-info-circle"></i> Aucun article trouvé.
	</div>
{% endif %}
{% endblock %}

{% block right_panel %}
{% if page.p_right != "" %}
<div class="card shadow-sm" style="background-color: rgba(250,250,250,0.95); border-radius: 12px;">
<div class="card-body">
	<!-- Recherche -->
	<h5 class="mb-3"><i class="fas fa-search"></i> Rechercher</h5>
	<form action="" method="get">
		<div class="row align-items-center">
			<div class="col-lg-8 col-sm-12">
				{{page.blog_search|crispy}}
			</div>
			<div class="col mt-sm-1">
				<input type="submit" class="btn btn-primary w-100" value="Rechercher">
			</div>
		</div>
	</form>
	
	<hr class="my-4">
	
	<!-- Pagination -->
	{% if page.blog_art.paginator.num_pages != 1 %}
	<nav aria-label="Pagination">
		<ul class="pagination justify-content-center">
			{% if page.blog_art.has_previous %}
				<li class="page-item">
					<a class="page-link" href="?page={{ page.blog_art.previous_page_number }}">
						<i class="fas fa-chevron-left"></i>
					</a>
				</li>
			{% endif %}
			
			{% for nb_page in page.blog_art.nbpage %}
				{% if page.blog_art.number == forloop.counter %}
					<li class="page-item active">
						<span class="page-link">{{forloop.counter}}</span>
					</li>
				{% else %}
					<li class="page-item">
						<a class="page-link" href="?page={{forloop.counter}}">{{forloop.counter}}</a>
					</li>
				{% endif %}
			{% endfor %}
			
			{% if page.blog_art.has_next %}
				<li class="page-item">
					<a class="page-link" href="?page={{ page.blog_art.next_page_number }}">
						<i class="fas fa-chevron-right"></i>
					</a>
				</li>
			{% endif %}
		</ul>
	</nav>
	<hr class="my-4">
	{% endif %}
	
	<!-- Catégories -->
	<h5 class="mb-3"><i class="fas fa-tags"></i> Catégories</h5>
	<div class="d-flex flex-wrap gap-2 mb-4">
		{% for cat in page.blog_cat %}
			<a href="{% url 'blog_tag' cat.cb_titre_slgify %}" class="btn btn-outline-primary btn-sm">
				{{cat.cb_titre}}
			</a>
		{% endfor %}
		
		{% if page.blog_filter == True %}
			<a href="{% url 'blog_index' %}" class="btn btn-outline-danger btn-sm">
				<i class="fas fa-times"></i> Retirer les filtres
			</a>
		{% else %}
			<a href="{% url 'blog_tag' 'all' %}" class="btn btn-outline-dark btn-sm">
				Tous les articles
			</a>
		{% endif %}
	</div>
	
	<hr class="my-4">
	
	<!-- Top 10 -->
	<h5 class="mb-3"><i class="fas fa-fire"></i> Articles Populaires</h5>
	<div class="list-group list-group-flush">
		{% for item in page.blog_top10 %}
			<a href="{% url 'blog_play' item.b_titre_slugify %}" 
			   class="list-group-item list-group-item-action border-0 px-0">
				<div class="d-flex align-items-start">
					<span class="badge bg-primary rounded-pill me-2">{{forloop.counter}}</span>
					<span class="flex-grow-1">{{item.b_titre|truncatechars:45}}</span>
				</div>
			</a>
		{% endfor %}
	</div>
	
	{% if page.retour %}
	<hr class="my-4">
	<a href="{% url page.retour %}" class="btn btn-outline-secondary w-100">
		<i class="fas fa-arrow-left"></i> Retour
	</a>
	{% endif %}
</div>
</div>
{% endif %}
{% endblock %}