<!-- Portfolio -->
<section>

  <div class="block">
    <h3 class="title is-2  m-4 m-1-mobile has-text-centered is-size-4-mobile">Boutique</h3>
    <!-- <div class="columns">
      <div class="column is-3 is-flex is-justify-content-center"><h3 class="title is-2  m-4 m-1-mobile is-size-4-mobile">Boutique</h3></div>
      <div class="column"></div>
      <div class="column is-3 is-flex is-justify-content-center">
        <span class="">
          <div class="select is-primary is-light m-4 m-1-mobile">
            <select>
              <option>categorie</option>
              {% for categorie in  categories %}
              <option>{{categorie.title}}</option>
              {% endfor %}
            </select>
          </div>
        </span>
      </div>
    </div> -->
    
    

  </div>






  <div class="container ">
    <!-- Start Carousel -->


    <div class="owl-carousel3 owl-theme">
      {% for produit in produits %}
      <div class="item">

        <div class="card mx-3">
          <div class="card-image" style="background-color: rgb(236, 234, 207); ">
            <figure class="image is-4by3">
              <img src="{{produit.image.url}}" alt="Placeholder image">
            </figure>

          </div>
          <div class="card-content">
            <div class="media">
              <!-- <div class="media-left">
        <figure class="image is-48x48">
          <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image">
        </figure>
      </div> -->
              <div class="media-content">
                <p class="title is-4 has-text-centered">{{produit.title}} </p>
                <p style="color:#0c3444 ;" class="subtitle is-5 has-text-centered">{{produit.price}} <b style="color: #0c3444;">f</b></p>
                <p class="is-flex is-justify-content-center"><span  class="tag is-primary is-light is-rounded is-normal">{{produit.categorie}}</span></p>
                <p class="mt-2 is-flex is-justify-content-center">
                  <a target="_blank" href="https://wa.me/+330623773717?text=Je%20suis%20intéressé%20par%20votre%20produit%20{{produit.title}}%20%20price:{{produit.price}}%20f" class="button is-success is-rounded">Contacter via whatsapp</a>
                </p>
              </div>
            </div>

          </div>
        </div>

      </div>
      {% endfor %}
    </div>

  </div>


  <script type="text/javascript">

    function openImg() {
      document.getElementById('samadefaut').className += " is-active";
    }

    $(document).ready(function () {
      $('.owl-carousel3').owlCarousel({
        loop: true,
        autoPlay: 15000,
        margin: 10,
        nav: true,
        items: 3,
        responsive: {
          0: {
            items: 1,
            loop: true
          },
          600: {
            items: 3,
            loop: true
          },
          1000: {
            items: 2,
            loop: true
          }
        }
      })
    });
  </script>

</section>