{{/*  Home Template File  */}}
{{ define "main" }}
{{/*  {{  if eq .Site.Language.Lang "de" }}
  <div class="container">
    <div class="bg-white  my-5 text-slate-900 px-4 py-3 " role="alert">
      <div class="flex">
        <div class="py-1"><svg class="fill-current h-6 w-6 text-teal-500 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg></div>
        <div>
          <p class="font-bold">WICHTIGE MELUNG</p>
          <p class="text-sm">Auf dem Server verua.ch war ein technische Update nötig, um die Sicherheit der VeruA App weiter zu gewährleisten.  
Diese Anpassungen haben wir durch unseren Webhosting Anbieter KreativMedia durchführen lassen.  
Das geplante Zeitfenster lag zwischen 12:00 Uhr und 15:00 Uhr.
<br/>
Da sehr viele Instanzen auf diesem Server bereitgestellt werden, kam es bei der Ausführung zu Problemen.
<br/>
<b>Aus diesem Grund sind aktuell einige Instanzen der VeruA App nicht erreichbar</b>
<br/>
KreativMedia sucht unter Hochdruck nach einer Lösung für die Probleme.  
Wir hoffen, dass bald eine Lösung gefunden wird und die Applikation wieder wie gewohnt läuft.<br><br></p>
        </div>
      </div>
    </div>
  </div>
{{ end }} */}}
{{/*  {{ if eq .Site.Language.Lang "fr" }}
  <div class="container">
    <div class="bg-white  my-5 text-slate-900 px-4 py-3 " role="alert">
      <div class="flex">
        <div class="py-1"><svg class="fill-current h-6 w-6 text-teal-500 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg></div>
        <div>
          <p class="font-bold">Communiqué important</p>
          <p class="text-sm">En raison de la situation particulière en Suisse, nous convertissons partiellement notre service d'assistance téléphonique en HomeOffice. Par conséquent, notre numéro de téléphone ne sera pas toujours disponible dans les prochains jours.
            <br>Veuillez nous contacter pour le moment uniquement par <strong>E-mail et système de Tiquet</strong>, afin que votre demande nous parvienne et que nous puissions vous aidez.
            <br>Nous vous remercions de votre compréhension et espérons que la situation reviendra bientôt à la normale.
            <br>Votre équipe d'assistance VeruA ** Administration et facturation<br><br></p>
        </div>
      </div>
    </div>
  </div>
{{ end }}  */}}
  <!-- Hero Slider -->
    <section class="hero-slider h-screen md:h-1/4">
      <div class="verua-slider-wrapper">
        <div class="verua-slider h-screen" id="verua-slider">
          {{ range $i, $e:= .Params.heroslider }}
            <div class="slides h-screen md:h-full {{ if (eq $i 0) }}current{{ end }}" style="background-image:url('{{ .image }}')">
                    <h1 class="mb-4 text-4xl font-extrabold leading-none tracking-tight md:text-5xl lg:text-6xl">
                        {{ .title | markdownify }}
                      </h1>
            </div>
          {{ end }}
        </div>
      </div>
    </section>
    <script>
      window.onload = function(){
        // change slide every 5 seconds
        setInterval(nextSlide, 5000);
      }
      let slideNumber = 0;
      const prevSlide = () =>{
        const slides = document.getElementsByClassName('slides');
      const slider = document.getElementById("verua-slider");
        const currentSlide = slider.getElementsByClassName('current');
        currentSlide[0].classList.remove("current");
        if(slideNumber == 0){
          slideNumber = slides.length-1;
        }
        else{
            slideNumber = slideNumber-1;
        }
        slides[slideNumber].classList.add("current");
      }
      const nextSlide = () =>{
        const slides = document.getElementsByClassName('slides');
      const slider = document.getElementById("verua-slider");
        const currentSlide = slider.getElementsByClassName('current');
        currentSlide[0].classList.remove("current");
        if(slideNumber == (slides.length-1)){
          slideNumber = 0;
        }
        else{
            slideNumber = slideNumber+1;
        }
        slides[slideNumber].classList.add("current");
      }
      
    </script>
 <!-- /Hero Slider --> 

<!-- Key Features -->

    {{/*  <section class="flex flex-wrap items-start justify-center relative">  */}}
    <section class="mb lg:container lg:mx-auto relative flex flex-col justify-between  lg:flex-row  lg:-mt-[247px]">
      {{ range $i, $e:= .Params.keyfeatures }}
        
          <div class="w-full flex-1 lg:mt-8 p-8 lg:m-4 md:shadow-2xl lg:rounded-3xl {{ with .color }} bg-{{ . }} {{ end }} {{ with .textcolor }} text-{{ . }} {{ end }}">
          {{/*  <div class="flex-shrink-0 relative {{ with .color }} bg-{{ . }} {{ end }} m-6 {{ with .textcolor }} text-{{ . }} {{ end }} -mt-[250px] overflow-hidden rounded-lg max-w-96 shadow-lg p-8">  */}}
        
          {{ with .icon }}
          <div class="flex items-center justify-center">
            <i class="fas fa-{{ . }} fa-fw text-primary py-10" style="font-size:70px;"></i>
          </div>
          {{ end }}
          <h3 class="mb-4 {{ with .textcolor }} text-{{ . }} {{ end }}">
            {{ .title | markdownify }}
          </h2>
          <p class="mb-8 text-lg">
            {{ .content | markdownify }}
          </p>
        </div>
      {{ end }}
    </section>
<!-- /Key Features -->

{{ .Content }}



{{ end }}