{% 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 %}
{% if page.blog_art %}
	{% for item in page.blog_art %}
		<div class="card mb-2" style="background-color: rgba(250,250,250,0.88);" >
			<div class="card-header">
				<a class="text-dark text-decoration-none" href="{% url 'blog_play' item.b_titre_slugify %}"><h2>{{item.b_titre}}</h2></a>
			</div>
			<div class="card-body">
			<p class="card-text">
			<a class="text-dark text-decoration-none" href="{% url 'blog_play' item.b_titre_slugify %}">
				{% if item.b_description_img != "" %}<p><img src="{{item.b_description_img}}"></p>{% endif %}
				{{item.b_description|safe}}
			</a>
			</p>
			</div>
			<div class="card-footer">
				Publié, il y'a {{item.b_publdate|timesince }} {% if item.b_cat.all %} | {%for cat in item.b_cat.all %}<a class="text-dark text-decoration-none" href="{% url 'blog_tag' cat.cb_titre_slgify %}">{{ cat.cb_titre }}</a>{% if not forloop.last %}, {% endif %}{% endfor %}{% endif %}
			</div>
		</div>
	{% endfor %}
{% 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 %}
	<p class="card-text">
	<nav aria-label="...">
		<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 }}"> << </a>
				</li>
			{% else %}
				<li class="page-item disabled">
					<span class="page-link"> << </span>
				</li>
			{% endif %}
			{% for nb_page in page.blog_art.nbpage %}
				{% if page.blog_art.number == forloop.counter %}
					<li class="page-item active" aria-current="page"><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 }}"> >> </a>
				</li>
			{% else %}
				<li class="page-item disabled">
					<span class="page-link"> >> </span>
				</li>
			{% endif %}
		</ul>
	</nav>
	<p>
	{% 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 %}