{% 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>
/* Style pour les articles avec miniatures à gauche */
.article-card {
	background-color: rgba(250,250,250,0.88);
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 1.5rem;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	transition: box-shadow 0.3s ease;
}

.article-card:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Pagination - Style gris foncé */
.pagination .page-link {
	color: #343a40;
	border-color: #343a40;
	background-color: white;
	font-weight: 500;
}

.pagination .page-link:hover {
	color: white;
	background-color: #343a40;
	border-color: #343a40;
}

.pagination .page-item.active .page-link {
	background-color: #343a40;
	border-color: #343a40;
	color: white;
}

.pagination .page-item.disabled .page-link {
	color: #6c757d;
	background-color: #e9ecef;
	border-color: #dee2e6;
}

.article-row {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

.article-image-container {
	position: relative;
	width: 280px;
	min-width: 280px;
	overflow: hidden;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.article-image-container::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 60px;
	background: linear-gradient(to right, rgba(250,250,250,0) 0%, rgba(250,250,250,0.88) 100%);
	pointer-events: none;
}

.article-image-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.article-image-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	font-size: 2rem;
	font-weight: bold;
}

.article-content {
	flex: 1;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
}

.article-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: #1a202c;
	margin-bottom: 1rem;
	text-decoration: none;
}

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

.article-description {
	color: #4a5568;
	line-height: 1.6;
	margin-bottom: 1rem;
	flex: 1;
}

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

.article-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.article-category {
	display: inline-block;
	padding: 0.5rem 1rem;
	background: #343a40;
	color: white;
	border-radius: 4px;
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.2s;
	border: none;
}

.article-category:hover {
	background: #23272b;
	color: white;
	text-decoration: none;
}

/* Responsive */
@media (max-width: 768px) {
	.article-row {
		flex-direction: column;
	}
	
	.article-image-container {
		width: 100%;
		height: 200px;
	}
	
	.article-image-container::after {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 40px;
		background: linear-gradient(to bottom, rgba(250,250,250,0) 0%, rgba(250,250,250,0.88) 100%);
	}
	
	.article-content {
		padding: 1rem;
	}
	
	.article-title {
		font-size: 1.3rem;
	}
}
</style>

{% if page.blog_art %}
	{% for item in page.blog_art %}
		<article class="article-card">
			<div class="article-row">
				<!-- Miniature à gauche -->
				<div class="article-image-container">
					{% if item.b_description_img %}
						<a href="{% url 'blog_play' item.b_titre_slugify %}">
							<img src="{{item.b_description_img}}" alt="{{item.b_titre}}">
						</a>
					{% else %}
						<div class="article-image-placeholder">
							<i class="fas fa-file-alt"></i>
						</div>
					{% endif %}
				</div>
				
				<!-- Contenu à droite -->
				<div class="article-content">
					<a href="{% url 'blog_play' item.b_titre_slugify %}" class="article-title text-decoration-none">
						<h2 class="article-title">{{item.b_titre}}</h2>
					</a>
					
					<div class="article-description">
						{{item.b_description|safe|truncatewords_html:40}}
					</div>
					
					<div class="article-footer">
						<div class="article-meta">
							<span>
								<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="article-category">
										{{ cat.cb_titre }}
									</a>
								{% endfor %}
							{% endif %}
						</div>
						<span class="text-muted">
							<i class="far fa-eye"></i> {{item.b_reading}}
						</span>
					</div>
				</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" style="background-color: rgba(250,250,250,0.88);" >
<div class="card-body">
	<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-success w-100" value="Rechercher">
			</div>
		</div>
	</form>
	<hr>
	{% if page.blog_art.paginator.num_pages != 1 %}
	<nav aria-label="Pagination">
		<ul class="pagination justify-content-center flex-wrap">
			<!-- Bouton Précédent -->
			{% if page.blog_art.has_previous %}
				<li class="page-item">
					<a class="page-link" href="?page={{ page.blog_art.previous_page_number }}" aria-label="Précédent">
						<i class="fas fa-chevron-left"></i>
					</a>
				</li>
			{% else %}
				<li class="page-item disabled">
					<span class="page-link"><i class="fas fa-chevron-left"></i></span>
				</li>
			{% endif %}
			
			<!-- Toujours afficher la page 1 -->
			{% if page.blog_art.number == 1 %}
				<li class="page-item active">
					<span class="page-link">1</span>
				</li>
			{% else %}
				<li class="page-item">
					<a class="page-link" href="?page=1">1</a>
				</li>
			{% endif %}
			
			<!-- Ellipse si on est loin du début -->
			{% if page.blog_art.number > 4 %}
				<li class="page-item disabled">
					<span class="page-link">...</span>
				</li>
			{% endif %}
			
			<!-- Pages autour de la page actuelle -->
			{% for num in page.blog_art.paginator.page_range %}
				{% if num > 1 and num < page.blog_art.paginator.num_pages %}
					{% if num >= page.blog_art.number|add:"-2" and num <= page.blog_art.number|add:"2" %}
						{% if num == page.blog_art.number %}
							<li class="page-item active">
								<span class="page-link">{{ num }}</span>
							</li>
						{% else %}
							<li class="page-item">
								<a class="page-link" href="?page={{ num }}">{{ num }}</a>
							</li>
						{% endif %}
					{% endif %}
				{% endif %}
			{% endfor %}
			
			<!-- Ellipse si on est loin de la fin -->
			{% if page.blog_art.number < page.blog_art.paginator.num_pages|add:"-3" %}
				<li class="page-item disabled">
					<span class="page-link">...</span>
				</li>
			{% endif %}
			
			<!-- Toujours afficher la dernière page (si elle existe et n'est pas 1) -->
			{% if page.blog_art.paginator.num_pages > 1 %}
				{% if page.blog_art.number == page.blog_art.paginator.num_pages %}
					<li class="page-item active">
						<span class="page-link">{{ page.blog_art.paginator.num_pages }}</span>
					</li>
				{% else %}
					<li class="page-item">
						<a class="page-link" href="?page={{ page.blog_art.paginator.num_pages }}">{{ page.blog_art.paginator.num_pages }}</a>
					</li>
				{% endif %}
			{% endif %}
			
			<!-- Bouton Suivant -->
			{% if page.blog_art.has_next %}
				<li class="page-item">
					<a class="page-link" href="?page={{ page.blog_art.next_page_number }}" aria-label="Suivant">
						<i class="fas fa-chevron-right"></i>
					</a>
				</li>
			{% else %}
				<li class="page-item disabled">
					<span class="page-link"><i class="fas fa-chevron-right"></i></span>
				</li>
			{% endif %}
		</ul>
	</nav>
	<hr>
	{% endif %}
	<p class="card-text">{{page.p_right|safe}}</p>
	<h4> <i class="fas fa-tags"></i> Les Catégories </h4>
	<p class="card-text">
	{% for cat in page.blog_cat %}
		<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 %}
	
	{% if page.blog_filter == True %}
		<a href="{% url 'blog_index' %}" class="btn btn-danger mb-2" tabindex="-1" role="button" aria-disabled="true"><i class="fas fa-filter text-white"></i> Retirer les filtres</a>
	{% else %}
		<a href="{% url 'blog_tag' 'all' %}" class="btn btn-dark mb-2" tabindex="-1" role="button" aria-disabled="true">Tous les articles</a>
	{% endif %}

	</p>

	<h4> <i class="fas fa-bomb"></i> Les articles les plus consulté </h4>
	<p class="card-text">
	{% for item in page.blog_top10 %}
		<i class="far fa-play-circle"></i> <a class="text-dark" data-bs-toggle="tooltip" data-bs-placement="top" title="{{item.b_titre}}" href="{% url 'blog_play' item.b_titre_slugify %}">{{item.b_titre|truncatechars:40}}</a><br>
	{% 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>
{% endif %}
{% endblock %}