templates/Theme/Produit/Service/Article/articlesblog.html.twig line 1

Open in your IDE?
  1. {% extends "Theme/Users/User/layoutbase.html.twig" %}
  2. {% block meta %}
  3.     {{ parent() }}
  4.     <meta name="keywords" content="{{ site }}, "/>
  5.     <meta name="author" content="Noel Kenfack"/>
  6.     <meta name="description" content="{{ site }}" />
  7. {% endblock %}
  9. {% block title %}
  10.     {{ parent() }} - Détails du service ..
  11. {% endblock %}
  13. {% block stylesheets %}
  14.     {{ parent() }}
  15. {% endblock %}
  17. {% block userblog_body %}
  19.   <style>
  20.     {# End Breadcrumb #}
  21.     {# :root {
  22.   --swiper-pagination-color: #fff;
  23.   --swiper-pagination-bullet-inactive-color: #fff;
  24.  } #}
  25.   /*  CARDS */
  27. .testing-one {
  28.   /*border: 1px solid #0000003f;*/
  29.   box-shadow: 2px 2px 2px 2px rgba(46, 61, 73, 0.2);
  30.   width: 100%;
  31.   border-radius: 10px;
  32.   padding: 20px;
  33.   margin-bottom: 20px;
  34.   padding-bottom: 50px;
  35. }
  37. .testing-one:hover {
  38.   box-shadow: 2px 4px 8px 2px rgba(46, 61, 73, 0.2);
  39. }
  41. .testing-one:hover .articleTitle {
  42.   text-decoration: underline;
  43.   color: rgba(12, 145, 228, 0.96);
  44. }
  46. .img {
  47.   float: left;
  48.   height: auto;
  49.   width: 300px;
  50.   margin-right: 50px;
  51.   margin-left: none;
  52. }
  54. .article-description {
  55.     padding-top: 20px;
  56. }
  58. a {
  59.   text-decoration: none;
  60. }
  62. .articleTitle {
  63.   font-size: 25px;
  64.   color: black;
  65. }
  68. .btn-home {
  69.   font-family: "Barlow", sans-serif;
  70.   font-weight: 700;
  71.   font-size: 18px;
  72.   padding: 15px 40px;
  73.   background: #fff;
  74.   border: none;
  75.   cursor: pointer;
  76.   transition: 0.4s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
  77.   position: relative;
  78.   z-index: 2;
  79.   border-radius: 50px;
  80.   overflow: hidden;
  81. }
  82. .btn-home:after {
  83.   content: "";
  84.   position: absolute;
  85.   transition: 0.4s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
  86. }
  88. .btn-4 {
  89.   color: #252D4A;
  90.   border: 2px solid currentColor;
  91. }
  92. .btn-4:after {
  93.   border: solid #5568AA;
  94.   border-width: 0 2px 2px 0;
  95.   display: inline-block;
  96.   padding: 4px;
  97.   transform: rotate(-45deg) translateY(-48%);
  98.   top: 48%;
  99.   right: 27%;
  100.   opacity: 0;
  101.   visibility: hidden;
  102.   z-index: -1;
  103. }
  104. .btn-4:hover, .btn-4:focus {
  105.   color: #5568AA;
  106.   border: 2px solid transparent;
  107.   padding: 15px 70px;
  108. }
  109. .btn-4:hover:after, .btn-4:focus:after {
  110.   opacity: 1;
  111.   visibility: visible;
  112.   right: 18%;
  113. }
  114. .btn-4:focus {
  115.   border-color: currentColor;
  116. }
  117. .btn-4:hover{
  118.   box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  119. }
  120. .img-card {
  121.   float: left;
  122.   height: 200px;
  123.   width: 300px;
  124.   margin-right: 50px;
  125.   margin-top: 10px;
  126.   margin-left: none;
  127. }
  129. {# css indice sections  #}
  130.     .section-head.center.wt-small-separator-outer {
  131.         margin-bottom: 50px;
  132.         text-align: left;
  133.     }
  134.     .section-head {
  135.         position: relative;
  136.     }
  137.     .site-text-primary, .wt-small-separator {
  138.         color: #ea130e;
  139.     }
  140.     .wt-small-separator {
  141.         font-family: "Heebo", sans-serif;
  142.         text-transform: uppercase;
  143.         letter-spacing: 1px;
  144.         padding-right: 40px;
  145.         font-size: 26px;
  146.         line-height: 26px;
  147.         margin-bottom: 15px;
  148.         position: relative;
  149.         display: inline-block;
  150.         font-weight: 700;
  151.     }
  152.     .section-head.center .wt-small-separator div.sep-leaf-left {
  153.         position: relative;
  154.     }
  155.     .section-head.center .wt-small-separator div.sep-leaf-left:before, .section-head.center .wt-small-separator div.sep-leaf-left:after {
  156.         background-color: #ea130e;
  157.     }
  158.     .section-head.center .wt-small-separator div.sep-leaf-left:before {
  159.         right: -20px;
  160.         width: 10px;
  161.     }
  162.     .section-head.center .wt-small-separator div.sep-leaf-left:before, .section-head.center .wt-small-separator div.sep-leaf-left:after {
  163.         position: absolute;
  164.         content: '';
  165.         height: 22px;
  166.         bottom: 0px;
  167.         top: 0px;
  168.         transform: skew(-20deg);
  169.     }
  170.     .section-head.center .wt-small-separator div.sep-leaf-left:after {
  171.         right: -27px;
  172.         width: 4px;
  173.     }
  174.     .section-head.center.wt-small-separator-outer h2 {
  175.         max-width: 630px;
  176.         margin: 0px auto;
  177.     }
  178. </style>
  180. <!-- page title -->
  181. {# <section class="page-title-section overlay">
  182.   <div class="container">
  183.     <div class="row">
  184.       <div class="col-md-12">
  185.         {% if aboutBlog != null %}
  186.         <h2 style="color: #fff;">
  187.           {{ aboutBlog.title }}
  188.         </h2>
  189.         <p class="text-lighten">{{ aboutBlog.valeur }}</p>
  190.         {% else %}
  191.         <h2 style="color: #fff;">
  192.             {{ site }} est l'agence qu'il vous faut pour la modernisation de votre entreprise !
  193.           </h2>
  194.           <p class="text-lighten">Avez-vous d'autres questions? Ne vous inquiétez pas, il n'y a pas de questions idiotes. Remplissez simplement le formulaire ci-dessous et nous vous répondrons dans les plus brefs délais.</p>
  195.         {% endif %}
  196.       </div>
  197.     </div>
  198.   </div>
  199. </section> #}
  200. <!-- /page title -->
  202. <!-- CTA Section -->
  203. <section class="cta " style="padding: 1rem 0;">
  204.     <div class="container">
  205.         <div class="section-head center wt-small-separator-outer mt-3 text-center" style="margin-bottom: 0px;">
  206.             <div class="wt-small-separator site-text-primary">
  207.                 <div class="sep-leaf-left"></div>
  208.                 <div>Notre blog</div>
  209.             </div>
  210.         </div>
  211.         <div>Notre blog est une ressource précieuse pour rester informé des dernières tendances en comptabilité, fiscalité et finance. Nous partageons des conseils pratiques, des analyses approfondies et des actualités pour aider nos lecteurs à prendre des décisions éclairées et à optimiser leur gestion financière.</div>
  212.     </div>
  213. </section>
  215. <section class="section-sm">
  216.         <div class="content" style="padding-bottom: 5px;">
  217.             <div class="wrap">
  218.                 <div class="container">
  219.                     <ol class="breadcrumb">
  220.                         <li href="#">
  221.                             <a>Home</a>
  222.                         </li>
  223.                         <li href="#">
  224.                             <a>Blog</a>
  225.                         </li>
  226.                     </ol>
  227.                 </div>
  228.             </div>
  229.         </div>
  230.   </section>
  232.   <div class="container">
  233.     
  234.     <div class="row" style="margin-top: 10px;">
  235.         <!-- Normal Demo-->
  236.         <div class="col-md-4">
  237.             <!-- Post-->
  238.             <div class="post-module">
  239.                 <!-- Thumbnail-->
  240.                 <div class="thumbnail">
  241.                     <div class="date">
  242.                         <div class="day">27</div>
  243.                         <div class="month">Mar</div>
  244.                     </div><img src="{{ asset('templateSyscofie/images/cabinet2.jpg') }}"/>
  245.                 </div>
  246.                 <!-- Post Content-->
  247.                 <div class="post-content">
  248.                     <a href="#"><div class="category">En savoir plus</div></a>
  249.                     <h1 class="title">Conseil en fiscalite des societes et des dirigeants</h1>
  250.                     <h2 class="sub_title" style="font-size: 15px;">Assurer la conformite des declarations fiscales.</h2>
  251.                     <p class="description">Améliorez la gestion de votre activité grâce à nos outils simples et efficaces. Profitez d'une solution complète pour vous concentrer sur votre croissance et atteindre vos objectifs.</p>
  252.                     <div class="post-meta">
  253.                         <span class="timestamp">
  254.                             <i class="bi bi-star-fill"></i>
  255.                             85% de satisfaction
  256.                         </span>
  257.                         <span class="comments">
  258.                             <i class="bi bi-person-check"></i>
  259.                             259 clients suivis
  260.                         </span>
  261.                     </div>
  262.                 </div>
  263.             </div>
  264.         </div>
  265.         <!-- Hover Demo-->
  266.         <div class="col-md-4">
  267.             <!-- Post-->
  268.             <div
  269.                 class="post-module">
  270.                 <!-- Thumbnail-->
  271.                 <div class="thumbnail">
  272.                     <div class="date">
  273.                         <div class="day">27</div>
  274.                         <div class="month">Mar</div>
  275.                     </div><img src="{{ asset('templateSyscofie/images/negociations-commerciales-dans-bureau-moderne.jpg') }}"/>
  276.                 </div>
  277.                 <!-- Post Content-->
  278.                 <div class="post-content">
  279.                     <a href="#"><div class="category">En savoir plus</div></a>
  280.                     <h1 class="title">Calcul et optimisation des impôts et taxes</h1>
  281.                     <h2 class="sub_title" style="font-size: 15px;">Optimiser la fiscalité des entreprises</h2>
  282.                     <p class="description">Simplifiez le calcul et l'optimisation de vos impôts et taxes. Bénéficiez de solutions personnalisées pour réduire vos charges fiscales et maximiser vos économies.</p>
  283.                     <div class="post-meta">
  284.                         <span class="timestamp">
  285.                             <i class="bi bi-star-fill"></i>
  286.                             98% de satisfaction
  287.                         </span>
  288.                         <span class="comments">
  289.                             <i class="bi bi-person-check"></i>
  290.                             134 clients suivis
  291.                         </span>
  292.                     </div>
  293.                 </div>
  294.             </div>
  295.         </div>
  296.         <div class="col-md-4">
  297.             <!-- Post-->
  298.             <div class="post-module">
  299.                 <!-- Thumbnail-->
  300.                 <div class="thumbnail">
  301.                     <div class="date">
  302.                         <div class="day">27</div>
  303.                         <div class="month">Mar</div>
  304.                     </div><img src="{{ asset('templateSyscofie/images/deux-hommes-affaires.jpg') }}"/>
  305.                 </div>
  306.                 <!-- Post Content-->
  307.                 <div class="post-content">
  308.                     <a href="#"><div class="category">En savoir plus</div></a>
  309.                     <h1 class="title">Assistance en cas de contrôle fiscal</h1>
  310.                     <h2 class="sub_title" style="font-size: 15px;">Prévenir les risques de redressements ou de sanctions</h2>
  311.                     <p class="description">Recevez une assistance professionnelle lors de contrôles fiscaux. Notre équipe vous accompagne pour garantir la conformité et défendre vos intérêts, minimisant ainsi les risques et les pénalités.</p>
  312.                     <div class="post-meta">
  313.                         <span class="timestamp">
  314.                             <i class="bi bi-star-fill"></i>
  315.                             89% de satisfaction
  316.                         </span>
  317.                         <span class="comments">
  318.                             <i class="bi bi-person-check"></i>
  319.                             390 clients suivis
  320.                         </span>
  321.                     </div>
  322.                 </div>
  323.             </div>
  324.         </div>
  325.     </div> 
  327.     
  328.     <div class="col-md-12">
  329.       <div class="my-div">
  330.         <section class="testing-one">
  331.           <div class="description2 to-expand">
  332.             <h2 class="article-title">
  333.               <a href="{{ path('produit_service_detail_blog_article') }}" class="toggle-overlay-article articleTitle">
  334.                 Actualités fiscales
  335.               </a>
  336.             </h2>
  338.             
  339.             <div class="img">
  340.               <img class="img-card" src="{{ asset('templateSyscofie/images/homme-affaires-afro-americain.jpg') }}" alt="..."/>
  341.             </div>
  343.             <p class="article-description">
  344.               Restez informé des dernières évolutions fiscales et obtenez des conseils pratiques pour votre déclaration d'impôts.
  345.             </p>
  346.             <div style="margin-bottom: 50px;">
  347.               <a href="{{ path('produit_service_detail_blog_article') }}" class="toggle-overlay-article" style="display: inline-block;">
  348.                 <button class="btn-home btn-4 btn-mulberry">En savoir plus</button>
  349.               </a>
  350.             </div>
  351.           </div></hr>
  352.         </section>
  353.       </div>
  354.     </div>
  356.     <div class="col-md-12">
  357.       <div class="my-div">
  358.         <section class="testing-one">
  359.           <div class="description2 to-expand">
  360.             <h2 class="article-title">
  361.               <a href="#!" class="toggle-overlay-article articleTitle">
  362.                 Études de cas
  363.               </a>
  364.             </h2>
  365.             <div class="img">
  366.               <img class="img-card" src="{{ asset('templateSyscofie/images/business/business-img-6-min.jpg') }}" alt="..."/>
  367.             </div>
  369.             <p class="article-description">
  370.               Examinez des exemples concrets de réussites grâce à une gestion comptable efficace et apprenez des solutions à des problèmes complexes.
  371.             </p>
  372.             <div style="margin-bottom: 20px;">
  373.               <a href="#!" class="toggle-overlay-article" style="display: inline-block;">
  374.                 <button class="btn-home btn-4 btn-mulberry">En savoir plus</button>
  375.               </a>
  376.             </div>
  377.           </div></hr>
  378.         </section>
  379.       </div>
  380.     </div>
  382.     <div class="col-md-12">
  383.       <div class="my-div">
  384.         <section class="testing-one">
  385.           <div class="description2 to-expand">
  386.             <h2 class="article-title">
  387.               <a href="#!" class="toggle-overlay-article articleTitle">
  388.                 Les bases de la comptabilité
  390.               </a>
  391.             </h2>
  392.             <div class="img">
  393.               <img class="img-card" src="{{ asset('templateSyscofie/images/business/business-img-5-min.jpg') }}" alt="..."/>
  394.             </div>
  396.             <p class="article-description">
  397.               Découvrez les principes fondamentaux de la comptabilité, y compris les notions clés et les types de documents à connaître.
  398.             </p>
  399.             <div style="margin-bottom: 50px;">
  400.               <a href="#!" class="toggle-overlay-article" style="display: inline-block;">
  401.                 <button class="btn-home btn-4 btn-mulberry">En savoir plus</button>
  402.               </a>
  403.             </div>
  404.           </div></hr>
  405.         </section>
  406.       </div>
  407.     </div>
  409.     <div class="col-md-12">
  410.       <div class="my-div">
  411.         <section class="testing-one">
  412.           <div class="description2 to-expand">
  413.             <h2 class="article-title">
  414.               <a href="#!" class="toggle-overlay-article articleTitle">
  415.                 Comptabilité pour les travailleurs indépendants
  416.               </a>
  417.             </h2>
  418.             <div class="img">
  419.               <img class="img-card" src="{{ asset('templateSyscofie/images/portfolio-details-img-5-min.jpg') }}" alt="..."/>
  420.             </div>
  422.             <p class="article-description">
  423.               Explorez les spécificités de la comptabilité pour freelances, y compris la facturation et la gestion des dépenses.
  424.             </p>
  425.             <div style="margin-bottom: 50px;">
  426.               <a href="#!" class="toggle-overlay-article" style="display: inline-block;">
  427.                 <button class="btn-home btn-4 btn-mulberry">En savoir plus</button>
  428.               </a>
  429.             </div>
  430.           </div></hr>
  431.         </section>
  432.       </div>
  433.     </div>
  435.     <div class="col-md-12">
  436.       <div class="my-div">
  437.         <section class="testing-one">
  438.           <div class="description2 to-expand">
  439.             <h2 class="article-title">
  440.               <a href="#!" class="toggle-overlay-article articleTitle">
  441.                 Outils et logiciels comptables
  442.               </a>
  443.             </h2>
  444.             <div class="img">
  445.               <img class="img-card" src="{{ asset('templateSyscofie/images/hero-bg-2-min.jpg') }}" alt="..."/>
  446.             </div>
  448.             <p class="article-description">
  449.               Comparez les meilleures solutions logicielles de comptabilité et découvrez comment les utiliser pour simplifier vos tâches.
  450.             </p>
  451.             <div style="margin-bottom: 50px;">
  452.               <a href="#!" class="toggle-overlay-article" style="display: inline-block;">
  453.                 <button class="btn-home btn-4 btn-mulberry">En savoir plus</button>
  454.               </a>
  455.             </div>
  456.           </div></hr>
  457.         </section>
  458.       </div>
  459.     </div>
  460.   </div>
  462.   <!-- ======= Breadcrumbs ======= -->
  463.     {# <div class="breadcrumbs">
  464.         <nav>
  465.             <div class="container">
  466.                 <div class="row"> #}
  467.                     {# <div class="col-md-6">
  468.                         <nav>
  469.                             <ol>
  470.                             <li><a href="{{ path('users_user_accueil') }}">Accueil</a></li>
  471.                             <li>Blog</li>
  472.                             {% if typearticle != null %}
  473.                             <li>{{ typearticle.name }}</li>
  474.                             {% endif %}
  475.                             </ol>
  476.                         </nav>
  477.                     </div> #}
  478.                     {# <div class="col-md-6">
  479.                         <form class="search-select-form" >
  480.                             <input id="filter-select-input" style="height: 45px; padding: 7px 15px;" placeholder="Filtrer par catégorie" list=text_editors>
  481.                             <button type="button" class="filter-select" style="height: 45px; background-color: #2fa84b; color: #fff;">▼</button>
  482.                             <datalist id="text_editors">
  483.                                 <select multiple size=8 class="select-input">
  484.                                     {% for article in type_article %}
  485.                                     <option value="{{ article.name }}" data-value="{{ path('produit_service_blog_pagine', {'type': article.id, 'page': page}) }}">{{ article.name }}</option>
  486.                                     {% endfor %}
  487.                                     <option value="Tous les articles" data-value="{{ path('produit_service_blog_pagine', {'type': 0, 'page': 1}) }}">Tous les articles</option>
  488.                                 </select>
  489.                             </datalist>
  490.                         </form>
  491.                     </div> #}
  492.                   {# </div>
  493.             </div>
  494.         </nav>
  495.     </div><!-- End Breadcrumbs --> #}
  497.     <!-- ======= Blog Section ======= -->
  498.     {# <section id="blog" class="blog">
  499.       <div class="container" data-aos="fade-up">
  501.         <div class="row gy-4 posts-list">
  503.         {% for article in liste_article %}
  504.         <div class="col-xl-4 col-md-6">
  505.             <article>
  507.             <div class="post-img">
  508.                 <img src="{% if article.imgarticle != null  %}{{ vich_uploader_asset(article.imgarticle) }}{% else %}{{ asset('template/assets/img/blog/blog-3.jpg') }}{% endif %}" alt="" class="img-fluid">
  509.             </div>
  510.             <p class="post-category">{{ article.typearticle.name }}</p>
  511.             <h2 class="title">
  512.                 <a href="{{ path('produit_service_description_article_blog', {'id': article.id }) }}">{{ article.title }}</a>
  513.             </h2>
  515.             <div class="d-flex align-items-center">
  516.                 <img src="{{ asset('template/images/co.png') }}" alt="" class="img-fluid post-author-img flex-shrink-0">
  517.                 <div class="post-meta">
  518.                 <p class="post-author-list">{{ article.user.name(50) }}</p>
  519.                 <p class="post-date">
  520.                     <time datetime="2022-01-01">{{ article.createdAt|date('d') }} {{ article.createdAt|date('m') }} {{ article.createdAt|date('Y') }}</time>
  521.                 </p>
  522.                 </div>
  523.             </div>
  525.             </article>
  526.         </div><!-- End post list item -->
  527.         {% else %}
  528.         <div class="col-xl-12 col-md-12">
  529.             <article style="background: #fff; min-height: 500px; padding-top: 150px;">
  530.               <h3 class="text-center">Aucune donnée.</h3>
  531.             </article>
  532.         </div><!-- End post list item -->
  533.         {% endfor %}
  535.         </div><!-- End blog posts list --> #}
  538.         {# {% if nombrepage > 0 %}
  539.                         
  540.             {% if page > 1 and page <= nombrepage %}
  541.             {% set pagepre = page - 1 %}
  542.             {% else %}
  543.                 {% set pagepre = nombrepage %}
  544.             {% endif %}
  546.             {% if page < nombrepage %}
  547.                 {% set pagesuiv = page + 1 %}
  548.             {% else %}
  549.                 {% set pagesuiv =  1 %}
  550.             {% endif %}
  552.             {% if nombrepage < 5 %}
  553.                 {% set debut = 1 %}
  554.                 {% set fin = nombrepage %}
  555.             {% else %}
  556.                 {% if page > 2 and page < (nombrepage - 2) %}
  557.                     {% set debut = page - 2 %}
  558.                     {% if page + 2 >= nombrepage %}
  559.                         {% set fin = nombrepage %}
  560.                     {% else %}
  561.                         {% set fin = page + 2 %}
  562.                     {% endif %}
  563.                 {% else %}
  564.                     {% if page <= 2 %}
  565.                         {% if page == 1 %}
  566.                             {% set debut = 1 %}
  567.                             {% set fin = page + 3 %}
  568.                         {% else %}
  569.                             {% set debut = 1 %}
  570.                             {% set fin = page + 2 %}
  571.                         {% endif %}
  572.                     {% else %}
  573.                         {% set debut = page - 2 %}
  574.                         {% if page + 2 >= nombrepage %}
  575.                             {% set fin = nombrepage %}
  576.                         {% else %}
  577.                             {% set fin = page + 2 %}
  578.                         {% endif %}
  579.                     {% endif %}
  580.                 {% endif %}
  581.                 
  582.             {% endif %}
  583.             
  585.             <div class="blog-pagination">
  586.                 <ul class="justify-content-center">
  587.                     <li><a href="{{ path('produit_service_blog_pagine', {'type': type, 'page': 1 }) }}" title="Première page"><span class="bi bi-arrow-left"></span></a></li>
  588.                     <li><a href="{{ path('produit_service_blog_pagine', {'type': type, 'page': pagepre }) }}" title="Page précedente"><span class="bi bi-chevron-compact-left" ></span></a></li>
  589.                     {% for p in debut..fin %}
  590.                     <li class="page {% if p == page %}active{% endif %}"><a href="{{ path('produit_service_blog_pagine', {'type': type, 'page': p }) }}">{{ p }}</a></li>
  591.                     {% endfor %}
  592.                     <li><a href="{{ path('produit_service_blog_pagine', {'type': type, 'page': pagesuiv }) }}"  title="Page suivante"><span class="bi bi-chevron-compact-right"></span></a></li>
  593.                     <li><a href="{{ path('produit_service_blog_pagine', {'type': type, 'page': nombrepage }) }}" title="Dernière page"><span class="bi bi-arrow-right"></span></a></li>
  594.                 </ul>
  595.             </div>
  596.             
  597.             {% else %}
  599.             <div class="blog-pagination">
  600.                 <ul class="justify-content-center">
  601.                     <li><a  href="{{ path('produit_service_blog_pagine', {'type': type, 'page': page }) }}" title="Première page"><span class="fa fa-fast-backward"></span></a></li>
  602.                     <li><a href="{{ path('produit_service_blog_pagine', {'type': type, 'page': page }) }}" title="Page précedente"><span class="fa fa-step-backward"></span></a></li>
  603.                     
  604.                     <li><a href="{{ path('produit_service_blog_pagine', {'type': type, 'page': 1 }) }}" class="page active">1</a></li>
  605.                     
  606.                     <li><a href="{{ path('produit_service_blog_pagine', {'type': type, 'page': page }) }}"  title="Page suivante"><span class="fa fa-step-forward" style="font-size: 13px;"></span></a></li>
  607.                     <li><a href="{{ path('produit_service_blog_pagine', {'type': type, 'page': page }) }}" title="Dernière page"><span class="fa fa-fast-forward" style="font-size: 13px;"></span></a></li>
  608.                 </ul>
  609.             </div>
  610.             {% endif %}
  612.       </div>
  613.     </section><!-- End Blog Section --> #}
  615.   </main><!-- End #main -->
  617.   <div class="text-center" style="margin-top: 60px; margin-bottom: 60px;">
  618.     {# {% if nombrepage > 0 %}
  620.         {% if page > 1 and page <= nombrepage %}
  621.             {% set pagepre = page - 1 %}
  622.         {% else %}
  623.             {% set pagepre = nombrepage %}
  624.         {% endif %}
  626.         {% if page < nombrepage %}
  627.             {% set pagesuiv = page + 1 %}
  628.         {% else %}
  629.             {% set pagesuiv =  1 %}
  630.         {% endif %}
  632.         {% if nombrepage < 5 %}
  633.             {% set debut = 1 %}
  634.             {% set fin = nombrepage %}
  635.         {% else %}
  636.             {% if page > 2 and page < (nombrepage - 2) %}
  637.                 {% set debut = page - 2 %}
  638.                 {% if page + 2 >= nombrepage %}
  639.                     {% set fin = nombrepage %}
  640.                 {% else %}
  641.                     {% set fin = page + 2 %}
  642.                 {% endif %}
  643.             {% else %}
  644.                 {% if page <= 2 %}
  645.                     {% if page == 1 %}
  646.                         {% set debut = 1 %}
  647.                         {% set fin = page + 3 %}
  648.                     {% else %}
  649.                         {% set debut = 1 %}
  650.                         {% set fin = page + 2 %}
  651.                     {% endif %}
  652.                 {% else %}
  653.                     {% set debut = page - 2 %}
  654.                     {% if page + 2 >= nombrepage %}
  655.                         {% set fin = nombrepage %}
  656.                     {% else %}
  657.                         {% set fin = page + 2 %}
  658.                     {% endif %}
  659.                 {% endif %}
  660.             {% endif %}
  662.         {% endif %} #}
  664.         {# <div class="btn-group mb-4 text-center" role="group" aria-label="Basic example">
  665.             <a href="#" title="Première page" class="btn btn-outline-primary mx-2">
  666.                 <span><i class="bi bi-chevron-double-left"></i></span>
  667.             </a>
  668.             <a href="#" title="Page précedente" class="btn btn-outline-primary mx-2">
  669.                 <span><i class="bi bi-chevron-left"></i></span>
  670.             </a> #}
  671.             {# {% for p in debut..fin %}
  672.                 <a href="#" value="{{ p }}" class="btn btn-outline-primary mx-2 {% if p == page %}active{% endif %}">{{ p }}</a>
  673.             </li> #}
  674.         {# {% endfor %} #}
  675.         {# <a href="#" title="Page suivante" class="btn btn-outline-primary mx-2">
  676.             <span><i class="bi bi-chevron-right"></i></span>
  677.         </a>
  678.         <a href="#" title="Dernière page" class="btn btn-outline-primary mx-2">
  679.             <span><i class="bi bi-chevron-double-right"></i></spam>
  680.         </a>
  681.     </div>
  682.     <div class="clearfix"></div> #}
  683. {# {% else %} #}
  684.     <div class="btn-group mb-4 text-center" role="group" aria-label="Basic example">
  685.         <a href="#" title="Première page" class="btn btn-outline-primary mx-2">
  686.             <span><i class="bi bi-chevron-double-left"></i></span>
  687.         </a>
  688.         <a href="#" title="Page précedente" class="btn btn-outline-primary mx-2">
  689.             <span><i class="bi bi-chevron-left"></i></span>
  690.         </a>
  692.         <a href="#" class="btn btn-outline-primary mx-2 active" style="margin: 0px 0px;">1</a>
  694.         <a href="#" title="Page suivante" class="btn btn-outline-primary mx-2">
  695.             <span><i class="bi bi-chevron-right"></i></span>
  696.         </a>
  697.         <a href="#" title="Dernière page" class="btn btn-outline-primary mx-2">
  698.             <span><i class="bi bi-chevron-double-right"></i></spam>
  699.         </a>
  700.     </div>
  701. </div>
  703.     <script>
  704.     var swiperFade = new Swiper(".swiperFade", {
  705.     loop: true,
  706.     effect: 'fade',
  707.     navigation: {
  708.       nextEl: ".swiper-button-next",
  709.       prevEl: ".swiper-button-prev"
  710.     },
  711.     pagination: {
  712.       el: ".swiper-pagination",
  713.     },
  714.     });
  716.     var swiperVertical = new Swiper(".swiperVertical", {
  717.       loop: true,
  718.       effect: 'fade',
  719.       direction: "vertical",
  720.       pagination: {
  721.         el: ".swiper-pagination",
  722.         clickable: true,
  723.       }
  724.     });
  726.     var swiperEffect = new Swiper(".swiperEffect", {
  727.       loop: true,
  728.       effect: "cards",
  729.       grabCursor: true,
  730.       navigation: {
  731.         nextEl: ".swiper-button-next",
  732.         prevEl: ".swiper-button-prev"
  733.       },
  734.       pagination: {
  735.         el: ".swiper-pagination",
  736.       },
  737.     });
  738. </script>
  740. {% endblock %}
  742. {% block javascripttemplate %}
  744. button = document.querySelector('button.filter-select');
  745. datalist = document.querySelector('datalist#text_editors');
  746. select = document.querySelector('select.select-input');
  747. options = select.options;
  749. /* on arrow button click, show/hide the DDL*/
  750. button.addEventListener('click', toggle_ddl);
  752. function toggle_ddl() {
  753.   if (datalist.style.display === '') {
  754.     datalist.style.display = 'block';
  755.     this.textContent = "▲";
  756.     /* If input already has a value, select that option from DDL */
  757.     var val = input.value;
  758.     for (var i = 0; i < options.length; i++){
  759.       if (options[i].text === val){
  760.         select.selectedIndex = i;
  761.         break;
  762.       }
  763.     }
  764.   } else hide_select();
  765. }
  767. /* when user selects an option from DDL, write it to text field */
  768. select.addEventListener('change', fill_input);
  770. function fill_input() {
  771.   input.value = options[this.selectedIndex].value;
  772.   //alert(options[this.selectedIndex].getAttribute('data-value'))
  773.   document.location.href= ''+options[this.selectedIndex].getAttribute('data-value');
  774.   hide_select();
  775. }
  777. /* when user wants to type in text field, hide DDL */
  778. input = document.querySelector('input#filter-select-input');
  779. input.addEventListener('focus', hide_select);
  781. function hide_select() {
  782.   datalist.style.display = '';
  783.   button.textContent = "▼";
  784. }
  785. input.addEventListener('change', change_select);
  787. function change_select(){
  788.     var val = input.value;
  789.     for (var i = 0; i < options.length; i++) {
  790.       if (options[i].text === val) {
  791.         //alert(options[i].getAttribute('data-value'))
  792.         document.location.href= ''+options[i].getAttribute('data-value');
  793.         break;
  794.       }
  795.     }
  796. }
  797. {% endblock %}