{% extends "base.html.twig" %}
{% block style %}
  html,
  body,
  header,
  .view {
      height: 100%;
      font-family: Roboto,sans-serif;
  }
  @media (max-width: 740px) {
      html,
      body,
      header,
      .view {
      height: 100vh;
      font-family: Roboto,sans-serif;
      }
  }

  @media (max-width: 740px) {
        .h1-main{
            font-size: 13vw;
        }
    }
{% endblock %}
{% block intro %}
<header>
  <!-- Full Page Intro -->
  <div class="view jarallax" data-jarallax='{"speed": 0.2}' 
    {% if content.image_principale.thumbnails is defined %}
      style="background-image: url('{{ asset(content.image_principale.thumbnails['1920x']) }}'); background-repeat: no-repeat; background-size: cover; background-position: center center;"
    {% else %}
      style="background-color:grey;"
    {% endif %} 
      >
    <!-- Mask & flexbox options-->
    <div class="mask d-flex justify-content-center align-items-center"  style="background-color: rgba(0, 0, 0, 0.3)
    ">
      <!-- Content -->
      <div class="container">
        <!--Grid row-->
        <div class="row">
          <!--Grid column-->
          <div class="col-md-12 white-text text-center">
            <h1 class="display-3 mb-0 pt-md-5 pt-5 white-text font-weight-bold wow fadeInDown h1-main" data-wow-delay="0.3s" style="letter-spacing: 0.05em;">{{ content.title }}
              <a class="indigo-text font-weight-bold"></a>
            </h1>
            <h5 class="text-uppercase pt-md-5 pt-sm-2 pt-5 pb-md-5 pb-sm-3 pb-5 white-text font-weight-bold wow fadeInDown" data-wow-delay="0.3s">{{ content.subtitle }}</h5>
            <div class="wow fadeInDown" data-wow-delay="0.3s">
              <!-- <a href="https://project.lepron.fr/fermecabri/produits.html" class="btn btn-green btn-lg">Nos produits</a> -->
              <!-- <a href="https://project.lepron.fr/fermecabri/elevage.html" class="btn btn-teal btn-lg">Notre elevage</a> -->
            </div>
            <div class="smooth-scroll">
              <a href="#content" class="btn btn-floating btn-large btn-green wow fadeIn waves-effect waves-light animated" data-wow-delay="0.4s" data-offset="100" style="visibility: visible; animation-name: fadeIn; animation-delay: 0.4s;"><i class="fas fa-angle-down" aria-hidden="true"></i></a>
            </div>
          </div>
          <!--Grid column-->
        </div>
        <!--Grid row-->
      </div>
      <!-- Content -->
    </div>
    <!-- Mask & flexbox options-->
  </div>
</header>
{% endblock %}
{% block content %}

    <div class="container">
        {% include 'includes/blocks_homepage.html.twig' with { blocks: content.blocks_homepage } %}
    </div>
<!--
<div class="container my-5">   
    <section class="dark-grey-text">
  
      <div class="row pr-lg-5">
        <div class="col-md-7 d-flex align-items-center order-1 order-md-2 mb-3">
          <div class="text-center">
            
            <h3 class="font-weight-bold mb-4">Notre élevage</h3>
  
            <p>L’exploitation familiale a vu le jour dans le centre du village de Nordheim en 1974 avec une vingtaine de chèvres. L'entreprise familiale compte aujourd'hui 10 salariés et plus de 350 chèvres laitières.</p>
  
            <a href="http://dev.fermecabri.com/la-ferme/elevage" class="btn btn-green btn-rounded mx-0">En savoir plus sur l'élevage</a>
  
          </div>
        </div>        
        <div class="col-md-5 mb-4 order-2 order-md-1">
  
            <div class="">
              <img src="{{ asset('/public/build/website/img/photos/cabri-91.jpg') }}" class="img-fluid" alt="smaple image">
            </div>
    
          </div>
      </div>
  
    </section>
  
  
  </div>
  <hr class="w-header my-4">
<div class="container my-5">   
    <section class="dark-grey-text">
  
      <div class="row pr-lg-5">
        <div class="col-md-5 mb-4 order-2 order-md-2">
  
          <div class="">
            <img src="{{ asset('/public/build/website/img/photos/cabri-40.jpg') }}" class="img-fluid" alt="smaple image">
          </div>
  
        </div>
        <div class="col-md-7 d-flex align-items-center order-1 order-md-1 mb-3">
          <div class="text-center">
            
            <h3 class="font-weight-bold mb-4">Nos produits</h3>
  
            <p>Nous assurons la transformation de toute la production de lait chaque jour et la fabrication de nos différents fromages. Nous proposons aussi une large gamme de produits pâtissiers.</p>
            <a href="http://dev.fermecabri.com/la-transformation/fromagere" class="btn btn-green btn-rounded mx-0">Fromagerie</a>
            <a href="http://dev.fermecabri.com/la-transformation/patisserie" class="btn btn-green btn-rounded mx-0">Pâtisserie</a>
  
          </div>
        </div>
      </div>
  
    </section>
  
  
  </div>
  <hr class="w-header my-4">

    <div class="container my-5">    
    <section class="dark-grey-text">
  
      <div class="row pr-lg-5">
        <div class="col-md-5 mb-4 order-2 order-md-1">
  
          <div class="">
            <img src="{{ asset('/public/build/website/img/photos/cabri-40.jpg') }}" class="img-fluid" alt="smaple image">
          </div>
  
        </div>
        <div class="col-md-7 d-flex align-items-center order-1 order-md-2 mb-3">
          <div class="text-center">
            
            <h3 class="font-weight-bold mb-4">Ou trouver nos produits ?</h3>
  
            <p class="text-muted">Vous pouvez trouver nos produits dans divers endroits: nous proposons de la vente direct à la ferme, de la vente dans vos commerces de proximité ou dans vos grandes surfaces Alsaciens préférées.</p>
            <a href="http://www.fermecabri.lepron.fr/commercialisation/vente-directe" class="btn btn-green btn-rounded mx-0">Vente direct</a>
            <a href="http://dev.fermecabri.com/commercialisation/magasins-de-proximite" class="btn btn-green btn-rounded mx-0">Magasins de proximité</a>
            <a href="http://www.fermecabri.lepron.fr/commercialisation/grande-surface" class="btn btn-green btn-rounded mx-0">Grandes surfaces</a>
  
          </div>
        </div>
      </div>
  
    </section>
  
  
  </div>
  -->

  <div class="container-fluid" style="margin:0;padding:0;">
      <!-- Section: Block Content -->
      <section class="mb-4">
    
        <style>
          .map-container {
            overflow: hidden;
            position: relative;
            height: 0;
          }
    
          .map-container iframe {
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            position: absolute;
          }
        </style>
    
        <!-- Google Maps -->
        <div id="full-width-map" class="z-depth-1-half map-container" style="height: 400px">
            <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1502.438114873404!2d7.508773393197454!3d48.642405116617454!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xa66f615f41b69bf4!2sLe%20Fermier%20du%20Sonnenberg%20%2F%20Ferme%20du%20Cabri!5e1!3m2!1sfr!2sbe!4v1594917583411!5m2!1sfr!2sbe" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
        </div>
        <!-- Google Maps -->
    
      </section>
      <!-- Section: Block Content -->
        </div>
{% endblock %}

{% block javascript %}
  <script type="text/javascript">

  (function ($){
    $.fn.counter = function() {
      const $this = $(this),
      numberFrom = parseInt($this.attr('data-from')),
      numberTo = parseInt($this.attr('data-to')),
      delta = numberTo - numberFrom,
      deltaPositive = delta > 0 ? 1 : 0,
      time = parseInt($this.attr('data-time')),
      changeTime = 10;
      
      let currentNumber = numberFrom,
      value = delta*changeTime/time;
      var interval1;
      const changeNumber = () => {
        currentNumber += value;
        //checks if currentNumber reached numberTo
        (deltaPositive && currentNumber >= numberTo) || (!deltaPositive &&currentNumber<= numberTo) ? currentNumber=numberTo : currentNumber;
        this.text(parseInt(currentNumber));
        currentNumber == numberTo ? clearInterval(interval1) : currentNumber;  
      }
  
      interval1 = setInterval(changeNumber,changeTime);
    }
  }(jQuery));
  
  $(document).ready(function(){
  
    $('.count-up').counter();
    $('.count1').counter();
    $('.count2').counter();
    
    new WOW().init();
    
    setTimeout(function () {
      $('.count5').counter();
    }, 3000);
  });
  </script>
{% endblock %}