{{ template "headersMenu.html" . }}
<div class="fixed right-0 left-0 z-10 mx-auto mt-12 container-fluid hover:col-span-6">
  <div class="text-center ltr:md:text-left rtl:md:text-right">
      <div id="searchbar" class="container mt-6 mb-3 border-b-[3px] bg-white dark:bg-gray-800">
          <form up-submit class="relative w-full" method="get" action="/list">
              <span class="absolute top-6"><i class="fa fa-search"></i></span>
              <input type="text" name="q" value="{{ .q }}" class="p-6 w-full font-bold text-black bg-transparent border-0 outline-none dark:text-white" placeholder="{{ "Rechercher..." | t }}" />
              <button type="submit" class="absolute top-6 text-black rounded-full border-black btn ltr:right-0 rtl:left-0 btn-icon dark:border-white dark:text-white hover:bg-indigo-600 hover:text-white"><i class="fa fa-refresh"></i></button>
          </form>
      </div>
  </div>
</div>
{{ $connection := .isConnected }}

<section class="flex relative justify-center items-center py-32 min-h-screen" id="home">
  <div class="container">
        
      <div class="grid lg:grid-cols-12 md:grid-cols-2 gap-[30px] mt-10 items-center">
          <div class="col-span-12 lg:col-span-12">
              <div class="grid md:grid-cols-12 gap-[30px] items-center">

          {{ range .bots }}

            {{ if eq .Live true }}
            <div class="md:col-span-6 lg:col-span-3">
              {{ if eq .Live true }}
                <a href="/chatbot/{{ .Tag }}" class="border block overflow-hidden relative p-6 text-center text-white bg-green-600 rounded-lg border-2 border-gray-200 shadow transition-all duration-500 ease-in-out group dark:shadow-gray-800 h-[200px] hover:shadow-md dark:hover:shadow-gray-700 dark:bg-green-700 dark:border-white hover:border-green-700">
                    <i class="mt-5 fa-thin fa-square-check fa-4x"></i>
                    {{ else }}
                <a href="/chatbot/{{ .Tag }}" class="border block overflow-hidden relative p-6 text-center bg-white rounded-lg border-2 border-gray-200 shadow transition-all duration-500 ease-in-out group dark:shadow-gray-800 h-[200px] hover:shadow-md dark:hover:shadow-gray-700 dark:bg-gray-800 dark:border-white hover:border-indigo-700">
                    <i class="mt-5 fa-thin fa-square fa-4x"></i>
                    {{ end }}
                    <div class="mt-3 content">
                        <h2 class="text-xl font-semibold title">{{ .Name }}</h2>
                    </div>
                    <div class="hidden group-hover:block">
                        <div class="absolute inset-0">
                            <div class="absolute inset-0 bg-indigo-600"></div>
                        </div>
                        <div class="absolute top-0 right-0 left-0 mt-12">
                            <span class="text-xl font-bold text-white">{{ .Name }}</span>
                            <p class="p-3 text-white">/chatbot/{{ .Tag }}</p>
                        </div>
                    </div>
                </a>
            </div>
            {{ else }}
            
            {{ if $connection }}
            <div class="md:col-span-6 lg:col-span-3">
                <a href="/chatbot/{{ .Tag }}" class="border block overflow-hidden relative p-6 text-center bg-white rounded-lg border-2 border-gray-200 shadow transition-all duration-500 ease-in-out group dark:shadow-gray-800 h-[200px] hover:shadow-md dark:hover:shadow-gray-700 dark:bg-gray-800 dark:border-white hover:border-indigo-700">
                  {{ if eq .Live true }}
                    <i class="mt-5 fa-thin fa-square-check fa-4x"></i>
                    {{ else }}
                    <i class="mt-5 fa-thin fa-square fa-4x"></i>
                    {{ end }}
                    <div class="mt-3 content">
                        <h2 class="text-xl font-semibold title">{{ .Name }}</h2>
                    </div>
                    <div class="hidden group-hover:block">
                        <div class="absolute inset-0">
                            <div class="absolute inset-0 bg-indigo-600"></div>
                        </div>
                        <div class="absolute top-0 right-0 left-0 mt-12">
                            <span class="text-xl font-bold text-white">{{ .Name }}</span>
                            <p class="p-3 text-white">/chatbot/{{ .Tag }}</p>
                        </div>
                    </div>
                </a>
            </div>
            {{ end }}

            {{ end }}

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

</section>

{{ template "footer.html" . }}