{% load static  %}
{% include 'base.html' %}
<div class="container">
<div class="bg0 flex-wr-sb-c p-rl-20 p-tb-8">
<div class="f2-s-1 p-r-30 size-w-0 m-tb-6 flex-wr-s-c">
<span class="text-uppercase cl2 p-r-8" style="font-weight: bold;">
Tendences maintenant:
</span>
<span class="dis-inline-block cl2 slide100-txt pos-relative size-w-0" data-in="fadeInDown" data-out="fadeOutDown">
{% for article in lastest %}
<span class="dis-inline-block slide100-txt-item animated visible-false">
{{ article.titre }}
</span>
{% endfor %}
</span>
</div>
<div class="pos-relative size-a-2 bo-1-rad-22 of-hidden bocl11 m-tb-6">
<input class="f1-s-1 cl6 plh9 s-full p-l-25 p-r-45" type="text" name="search" id="search" placeholder="Search">
<button class="flex-c-c size-a-1 ab-t-r fs-20 cl2 hov-cl10 trans-03" id="research" onclick="search()">
<i class="zmdi zmdi-search"></i>
</button>
</div>
</div>
</div>

<section class="bg0">
<div class="container">
<div class="row m-rl--1">
<div class="col-md-6 p-rl-1 p-b-2">
<div class="bg-img1 size-a-3 how1 pos-relative" style="background-image: url({{ laune.image.url}});">
<a href="{{ laune.pdf.url }}" class="dis-block how1-child1 trans-03"></a>
<div class="flex-col-e-s s-full p-rl-25 p-tb-20">

</div>
</div>
</div>
<div class="col-md-6 p-rl-1">
<div class="row m-rl--1">
{% for article in lastest%}
{%if forloop.first %}
<div class="col-12 p-rl-1 p-b-2">
<div class="bg-img1 size-a-4 how1 pos-relative" style="background-image: url({{ article.banner.url }});">
<a href="{% url 'detailsarticle' categorie=article.categorie.name article_slug=article.slug %}" class="dis-block how1-child1 trans-03"></a>
<div class="flex-col-e-s s-full p-rl-25 p-tb-24">
<a href="{% url 'categorie' categorie_slug=article.categorie.slug   page=1 count=configuration.pagesize %}" class="dis-block how1-child2 f1-s-2 cl0 bo-all-1 bocl0 hov-btn1 trans-03 p-rl-5 p-t-2">
{{ article.categorie.name }}
</a>
<h3 class="how1-child2 m-t-14">
<a href="{% url 'detailsarticle' categorie=article.categorie.name article_slug=article.slug %}" class="how-txt1 size-a-7 f1-l-2 cl0 hov-cl10 trans-03">
{{ article.titre }}
</a>
</h3>
</div>
</div>
</div>
{% else %}
<div class="col-sm-6 p-rl-1 p-b-2">
<div class="bg-img1 size-a-5 how1 pos-relative" style="background-image: url({{ article.banner.url }});">
<a href="{% url 'detailsarticle' categorie=article.categorie.name article_slug=article.slug %}" class="dis-block how1-child1 trans-03"></a>
<div class="flex-col-e-s s-full p-rl-25 p-tb-20">
<a href="{% url 'categorie' categorie_slug=article.categorie.slug   page=1 count=configuration.pagesize %}" class="dis-block how1-child2 f1-s-2 cl0 bo-all-1 bocl0 hov-btn1 trans-03 p-rl-5 p-t-2">
  {{ article.categorie.name }}
</a>
<h3 class="how1-child2 m-t-14">
<a href="{% url 'detailsarticle' categorie=article.categorie.name article_slug=article.slug %}" class="how-txt1 size-h-1 f1-m-1 cl0 hov-cl10 trans-03">
  {{ article.titre }}
</a>
</h3>
</div>
</div>
</div>
{% endif %}
{%  endfor %}
</div>
</div>
</div>
</div>
</section>
{% if todayarticles.exists %}
<section class="bg0 p-t-70">
  <div class="container">
  <div class="row justify-content-center">
    <div class="col-md-10 col-lg-12">
      <div class="p-b-20">
      <div class="tab01 p-b-20">
      <div class="tab01-head how2 how2-cl2 bocl12 flex-s-c m-r-10 m-r-0-sr991">
      
      <h3 class="f1-m-2 cl10 tab01-title">
        AUJOURD’HUI 
      </h3>
      
      <ul class="nav nav-tabs" role="tablist">
      
      <li class="nav-item-more dropdown dis-none">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
      <i class="fa fa-ellipsis-h"></i>
      </a>
      <ul class="dropdown-menu">
      </ul>
      </li>
      </ul>
      
      <a href="{% url 'today' page=1 count=configuration.pagesize %}" class="tab01-link f1-s-1 cl9 hov-cl10 trans-03">
      Tout voir
      <i class="fs-12 m-l-5 fa fa-caret-right"></i>
      </a>
      </div>

      <div class="tab-content p-t-35">
        <div class="tab-pane fade show active" id="tab3-1" role="tabpanel">
            <div class="modern-articles-grid">
                {% for article in todayarticles %}
                    {% include 'components/article-card.html' with article=article show_excerpt=True is_new=True %}
                {% endfor %}
            </div>
        </div>
    </div>

      </div>
      </div>
      </div>
  </div>
</div>
</section>
{% endif %}
<section class="bg0 p-t-70">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10 col-lg-8">
<div class="p-b-20">

{% for categorie in categories %}
{% if categorie.articles|length > 0 %}
<div class="tab01 p-b-20">
<div class="tab01-head how2 how2-cl2 bocl12 flex-s-c m-r-10 m-r-0-sr991">

<h3 class="f1-m-2 cl10 tab01-title">
{{ categorie.categorie.name }}
</h3>

<ul class="nav nav-tabs" role="tablist">

<li class="nav-item-more dropdown dis-none">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-ellipsis-h"></i>
</a>
<ul class="dropdown-menu">
</ul>
</li>
</ul>

<a href="{% url 'categorie' categorie_slug=categorie.categorie.slug page=1 count=configuration.pagesize %}" class="tab01-link f1-s-1 cl9 hov-cl10 trans-03">
Tout voir
<i class="fs-12 m-l-5 fa fa-caret-right"></i>
</a>
</div>

<div class="tab-content p-t-35">
<div class="tab-pane fade show active" id="tab3-1" role="tabpanel">
  <div class="modern-articles-grid">
    {% for article in categorie.articles %}
      {% include 'components/article-card.html' with article=article show_excerpt=True %}
    {% endfor %}
  </div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
<div class="col-md-10 col-lg-4">
<div class="p-l-10 p-rl-0-sr991 p-b-20">
<div>
<div class="how2 how2-cl4 flex-s-c">
<h3 class="f1-m-2 cl3 tab01-title">
Articles Populaires
</h3>
</div>
<ul class="p-t-35">
{% for article in mostpopular %}
<li class="flex-wr-sb-s p-b-22">
<div class="size-a-8 flex-c-c borad-3 size-a-8 bg9 f1-m-4 cl0 m-b-6">
{{ forloop.counter }}
</div>
<a href="{% url 'detailsarticle' categorie=article.categorie.name article_slug=article.slug %}" class="size-w-3 f1-s-7 cl3 hov-cl10 trans-03">
{{ article.titre}}
</a>
</li>
{% endfor %}
</ul>
</div>
<div>
{% if configuration.publicite == True %}
{% if publicite.image.url != None %}
<div class="publicite-container">
  <a href="{{ publicite.image.url }}" class="publicite-wrapper">
    <img src="{{ publicite.image.url }}" alt="Publicité" loading="lazy">
  </a>
</div>
{% endif%}
{% endif %}
</div>
<div class="p-t-50">
  <div class="how2 how2-cl4 flex-s-c">
  <h3 class="f1-m-2 cl3 tab01-title">
  Restez connecté
  </h3>
  </div>
  <ul class="p-t-35">
  <li class="flex-wr-sb-c p-b-20">
  <a href="{{ configuration.facebook }}" class="size-a-8 flex-c-c borad-3 size-a-8 bg-facebook fs-16 cl0 hov-cl0">
  <span class="fab fa-facebook-f"></span>
  </a>
  <div class="size-w-3 flex-wr-sb-c">
  <span class="f1-s-8 cl3 p-r-20">
    @fdesdemocrates
  </span>
  </div>
  </li>
  <li class="flex-wr-sb-c p-b-20">
  <a href="{{ configuration.twitter }}" class="size-a-8 flex-c-c borad-3 size-a-8 bg-twitter fs-16 cl0 hov-cl0">
    <i class="fa-brands fa-x-twitter"></i>
  </a>
  <div class="size-w-3 flex-wr-sb-c">
  <span class="f1-s-8 cl3 p-r-20">
    @fdesdemocrates
  </span>
  </div>
  </li>
  <li class="flex-wr-sb-c p-b-20">
  <a href="{{ configuration.instagram }}" class="size-a-8 flex-c-c borad-3 size-a-8 bg-youtube fs-16 cl0 hov-cl0">
  <span class="fab fa-instagram"></span>
  </a>
  <div class="size-w-3 flex-wr-sb-c">
  <span class="f1-s-8 cl3 p-r-20">
  @fdesdemocrates
  </span>
  </div>
  </li>
  <li class="flex-wr-sb-c p-b-20">
    <a href="{{ configuration.linkedin }}" class="size-a-8 flex-c-c borad-3 size-a-8 bg-facebook fs-16 cl0 hov-cl0">
    <span class="fab fa-linkedin"></span>
    </a>
    <div class="size-w-3 flex-wr-sb-c">
    <span class="f1-s-8 cl3 p-r-20">
      @fdesdemocrates
    </span>
    </div>
    <li class="flex-wr-sb-c p-b-20">
      <a href="#" class="size-a-8 flex-c-c borad-3 size-a-8 bg-facebook fs-16 cl0 hov-cl0">
      <span class="fas fa-map-marker-alt"></span>
      </a>
      <div class="size-w-3 flex-wr-sb-c">
      <span class="f1-s-8 cl3 p-r-20">
        {{ configuration.emplacement }}
      </span>
      </div>
      </li>
    </li>
  </ul>
  </div>
  </div>

</div>
</div>
</div>
</section>

<div class="container">
<div class="flex-c-c">
<a href="#">
  {% if configuration.banner != ''    %}
<img class="max-w-full" src="{{ configuration.logo.url }}" alt="IMG">
{% endif %}
</a>
</div>
</div>

<section class="bg0 p-t-60 p-b-35">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10 col-lg-12 p-b-20">
<div class="modern-section-header">
<h3 class="modern-section-header__title">
<i class="fas fa-newspaper"></i> Articles Récents
</h3>
<a href="{% url 'articles' page=1 count=configuration.pagesize %}" class="modern-section-header__link">
    Tout voir <i class="fas fa-arrow-right"></i>
</a>
</div>
<div class="modern-articles-grid">
{% for article in longlastest %}
    {% include 'components/article-card.html' with article=article show_excerpt=True show_author=True %}
{% endfor%}
</div>
</div>

</section>

{% include 'footer.html' %}