{{ template "headersMenu.html" . }}

<section class="relative py-36">
  <div class="container">
      <div class="grid grid-cols-1 items-center">

        <div class="text-center">
          <a href="/settings" up-follow class="inline font-bold uppercase test-sm" style="margin-right:7px">{{ "Paramètres" | t }} <i class="fa fa-chevron-right"></i></a>
        </div>
          <div class="text-center">
            <div class="inline text-4xl font-bold md:text-5xl">{{ "Choisissez votre langue" | t }}</div>

              <div class="my-6 text-center">
                <input type="text" id="liveSearch" class="px-4 py-2 text-center bg-gray-200 rounded-lg border-2 border border-black dark:border-white dark:bg-gray-800 dark:border-2" placeholder="{{ "Rechercher..." | t }}" style="width:236px" />
              </div>
          </div>
      </div><!--grid-->
  </div>
  <div class="tt-20" style="max-width:1024px; margin:0 auto">
    <div id="grid" class="justify-center mx-auto mt-0 lg:flex shuffle">
      {{ range .languages }}
<div class="p-4 w-full text-center lg:w-1/4 md:w-1/2 picture-item shuffle-item"
      data-groups="[]"
      data-language="{{ .Language }} {{ .Language | t }}"
      style="position: absolute; top: 0px; visibility: visible; will-change: transform; left: 0px; opacity: 1; transition-duration: 250ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
   <a class="block py-4 text-center h-[100px] overflow-hidden bg-white rounded-md border-4 border-gray-200 dark:bg-black dark:hover:bg-slate-800 dark:border-gray-800"
      href="/lg/{{ .Code }}">

   <h3 class="mb-2 text-xl font-bold text-indigo-700">{{ .Language | t }}</h3>

   <div class="flex flex-wrap justify-center items-center">
     {{ range .Countries }}
       <img src="{{ .ImageURL }}" class="mx-1 w-5 h-5 rounded-full border border-gray-300" title="{{ .Country }}" alt="{{ .Country }}">
     {{ end }}
   </div>
  </a>
 </div>

{{ end }}
    </div>
  </div>

</section>

<script>
  /*
  document.getElementById('liveSearch').addEventListener('input', function() {
    var searchValue = this.value.trim().toLowerCase();
    var items = document.querySelectorAll('.picture-item');
    
    items.forEach(function(item) {
      var language = item.getAttribute('data-language').toLowerCase();
      if (language.includes(searchValue)) {
        item.style.display = 'block';
      } else {
        item.style.display = 'none';
      }
    });
  });
  */

  document.getElementById('liveSearch').addEventListener('input', function() {
    var searchValue = this.value.trim().toLowerCase();
    var shuffleInstance = new Shuffle(document.getElementById('grid'), {
      itemSelector: '.picture-item',
    });
    
    shuffleInstance.filter(function(element) {
      var language = element.getAttribute('data-language').toLowerCase();
      return language.includes(searchValue);
    });
  });

</script>


{{ template "footer.html" . }}