{{ 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">
            <div class="flex overflow-hidden">
                <form up-submit up-history="true" up-target="#searchbar-results" class="relative w-full" method="get" action="/list">
                    <input type="hidden" name="v" value="{{ .optionView }}" />
                    <a href="/list" alt="{{ "Liste" | t }}" up-follow class="p-2 link-q"><i class="fa fa-list"></i></a>
                    <a href="/list?v=cards" alt="{{ "Aperçu Opengraph" | t }}" up-follow class="p-2 link-q"><i class="fa fa-id-card"></i></a>
                    <a href="/list?v=signs" alt="{{ "Signatures d'email" | t }}" up-follow class="p-2 link-q"><i class="fa fa-envelope"></i></a>
                    <a href="/list?v=qrcodes" alt="{{ "QR-Codes" | t }}" up-follow class="p-2 link-q"><i class="fa fa-qrcode"></i></a>
                    
                    <label>
                        <span class="absolute top-6"><i class="fa fa-search"></i></span>
                        <input type="text" name="q" value="{{ .q }}" class="p-6 font-bold text-black bg-transparent border-0 outline-none w-flex-full dark:text-white" placeholder="{{ "Rechercher..." | t }}" style="width:calc(100% - 150px)" />
                    </label>
                    <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>
</div>

<section class="flex relative justify-center items-center py-32 min-h-screen" id="list">
      <div class="container">
          <div class="grid lg:grid-cols-12 md:grid-cols-2 gap-[30px] mt-20 items-center">
              <div class="col-span-12">
                  <div id="searchbar-results" class="grid lg:grid-cols-12 grid-cols-12 gap-[30px] items-center">
      
{{ if not .cards }}
<div class="col-span-12 w-full text-3xl md:text-5xl">{{ "Aucun résultat" | t }}</div>
{{ end }}

{{ $isMobile := .isMobile }}

{{ if eq .optionView "cards" }}
    
    {{range $index, $name := .cards }}
      <div class="list-item col-span-12 transition md:col-span-6 lg:col-span-4 xl:col-span-3">
          <div class="overflow-hidden relative text-center bg-white rounded-md border{{  if $isMobile }}-2{{ end }} shadow transition-all duration-500 ease-in-out border-1 group dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 dark:hover:border-gray-800 hover:border-indigo-700">

            <!-- EDITER -->
            <a class="hidden absolute bottom-0 left-0 uppercase iframed-browse group-hover:block z-2" href="/edit/card/{{$name.Id}}"><span class="px-3 py-1 mt-2 text-xs font-bold text-black bg-gray-200 shadow dark:text-white dark:bg-gray-800"><i class="mr-2 fa-light fa-edit"></i> {{ "Editer" | t }}</span></a>

            <!-- LIVE -->
            <a class="hidden absolute right-0 bottom-0 uppercase group-hover:block z-2 iframed-preview" href="/{{$name.Path.String}}"><span class="px-3 py-1 mt-2 text-xs font-bold text-black bg-gray-200 shadow dark:text-white dark:bg-gray-800"><i class="mr-2 fa-light fa-link"></i> {{ "En ligne" | t }}</span></a>

            <!-- BOUTON PRINCIPAL -->
            <a href="https://card.pm/broken/{{$name.Path.String}}" {{  if $isMobile }}target="_blank" class="flex h-auto"{{ else }} class="flex h-auto iframed-preview" {{ end }}>
                  <img src="https://datamix.media/card.pm/rasterized/fb/{{ $name.Md5 }}-{{ $name.LanguageId.Int32 }}.png" class="m-auto max-w-full max-h-full" />
              </a>

          </div>
      </div>
    {{ end }}
      
{{ else if eq .optionView "signs" }}
    
    {{range $index, $name := .cards }}
      <div class="list-item col-span-12 transition md:col-span-6 lg:col-span-4">
          <div class="overflow-hidden relative text-center bg-white rounded-md border{{  if $isMobile }}-2{{ end }} shadow transition-all duration-500 ease-in-out border-1 group dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 dark:hover:border-gray-800 hover:border-indigo-700 pt-6 pl-6">

            <!-- EDITER -->
            <a class="hidden absolute bottom-0 left-0 uppercase iframed-browse group-hover:block z-2" href="/edit/card/{{$name.Id}}"><span class="px-3 py-1 mt-2 text-xs font-bold text-black bg-gray-200 shadow dark:text-white dark:bg-gray-800"><i class="mr-2 fa-light fa-edit"></i> {{ "Editer" | t }}</span></a>

            <!-- LIVE -->
            <a class="hidden absolute right-0 bottom-0 uppercase group-hover:block z-2 iframed-preview" href="/{{$name.Path.String}}"><span class="px-3 py-1 mt-2 text-xs font-bold text-black bg-gray-200 shadow dark:text-white dark:bg-gray-800"><i class="mr-2 fa-light fa-link"></i> {{ "En ligne" | t }}</span></a>

            <!-- BOUTON PRINCIPAL -->
            <a href="https://next.card.pm/detail/sign?i={{$name.Id}}" {{  if $isMobile }}target="_blank" class="flex h-auto"{{ else }} class="flex h-auto iframed-preview" {{ end }}>
                  <img src="https://datamix.media/card.pm/rasterized/mail/{{ $name.Md5 }}-{{ $name.LanguageId.Int32 }}.png" class="m-auto max-w-full max-h-full" />
              </a>

          </div>
      </div>
    {{ end }}
      
{{ else }}
      
    {{range $index, $name := .cards }}
    <div class="list-item col-span-12 transition md:col-span-6 lg:col-span-4 xl:col-span-3">
        <div class="overflow-hidden relative text-left bg-white dark:bg-black rounded-md border{{  if $isMobile }}-2{{ end }} shadow transition-all duration-500 ease-in-out border-1 group dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 dark:hover:border-gray-800 hover:border-indigo-700 p-6">

        <a href="https://card.pm/broken/{{$name.Path.String}}" {{  if $isMobile }}target="_blank" class="flex h-auto"{{ else }} class="auto p-flex iframed-preview" {{ end }}>
            <div class="mb-4 font-medium uppercase border-b">{{ $name.Template.Name.String }}</div>
            <div class="text-lg"><span class="font-bold">{{ $name.FirstName.String }} {{ $name.LastName.String }}</span></div>
            <div class="text-sm">{{ $name.Email.String }}</div>
            <div class="text-sm">{{ $name.Path.String }}</div>
        </a>

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

                  </div>
              </div>
          </div>
      </div>
</section>

{{ template "footer.html" . }}