{{ 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 border-b-[3px] bg-white dark:bg-black">
<div id="searchbar" class="container mt-6">
<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 id="searchbar-live" 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-4 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-check"></i></button>
</form>
</div>
</div>
</div>
</div>

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

{{ $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/{{$name.Id}}"><span class="px-3 py-1 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 -->
            <div class="hidden absolute right-0 bottom-0 px-2 text-black uppercase bg-gray-200 group-hover:block z-2 dark:text-white dark:bg-gray-800">
                <a href="https://card.pm/{{$name.Path.String}}" {{  if $isMobile }}target="_blank" class="flex h-auto{{ else }} class="auto p-flex iframed-preview{{ end }} mx-1 text-xs">
                    V1
                </a>
                <br>
                <a href="https://card.pm/beta/{{$name.Path.String}}" {{  if $isMobile }}target="_blank" class="flex h-auto{{ else }} class="auto p-flex iframed-preview{{ end }} mx-1 text-xs">
                    V2
                </a>
                <br>
                <a href="/{{$name.Path.String}}" {{  if $isMobile }}target="_blank" class="flex h-auto{{ else }} class="auto p-flex iframed-preview{{ end }} mx-1 text-xs">
                    V3
                </a>
            </div>

            <!-- BOUTON PRINCIPAL -->
            <a href="https://next.card.pm/detail/overview?i={{$name.Id}}" {{  if $isMobile }}target="_blank" class="flex h-auto"{{ else }} class="flex h-auto iframed-browse" {{ 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 "qrcodes" }}
    
    {{range $index, $name := .cards }}
    <div class="list-item col-span-12 transition md:col-span-6 lg:col-span-4 xl: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">
            
            <a href="https://next.card.pm/detail/qrcode?i={{$name.Id}}" {{  if $isMobile }}target="_blank" class="flex h-auto"{{ else }} class="flex h-auto iframed-browse" {{ end }}>
                <div class="absolute right-[3px] bg-white bottom-[3px] p-4 rounded-lg border shadow-md m-2"><img src="https://datamix.media/card.pm/card/{{ $name.Id }}.png" class="w-20" /></div>
                <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 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 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-browse" {{ 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 }}

<div class="col-span-12 w-full">
<table class="w-full text-sm text-left">
<thead class="text-xs uppercase">
<tr>
<th scope="col" class="p-4 border-b ltr:text-left rtl:text-right">
<i class="fa fa-check"></i>
</th>
<th scope="col" class="p-4 border-b ltr:text-left rtl:text-right">{{ "Photo" | t }}</th>
<th scope="col" class="p-4 border-b ltr:text-left rtl:text-right">{{ "Nom" | t }}</th>
<th scope="col" class="p-4 border-b ltr:text-left rtl:text-right">{{ "Gabarit" | t }}</th>
<th scope="col" class="p-4 border-b ltr:text-left rtl:text-right">{{ "Email" | t }}</th>
<th scope="col" class="p-4 border-b ltr:text-left rtl:text-right">{{ "Mobile" | t }}</th>
<th scope="col" class="p-4 border-b ltr:text-left rtl:text-right">{{ "Dernière vue" | t }}</th>
<th scope="col" class="p-4 border-b ltr:text-left rtl:text-right">{{ "Actions" | t }}</th>
</tr>
</thead>
<tbody class="shadow-md">

{{range $index, $name := .cards }}
<tr class="text-black bg-white rounded-lg border-b dark:bg-black dark:text-white">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-1" type="checkbox" onclick="event.stopPropagation()" class="w-4 h-4 bg-gray-100 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-boxdark dark:border-gray-600">
<label for="checkbox-table-search-1" class="sr-only">checkbox</label>
</div>
</td>
<td scope="row" class="px-4 py-3 font-medium text-gray-900 dark:text-white">
<div class="flex items-center">
<a href="https://next.card.pm/detail/picture?i={{$name.Id}}" class="block items-center text-center iframed-browse">
{{ if $name.Portrait.Valid }}
<img src="//datamix.media/card.pm/card/{{ $name.Portrait.String }}" alt="{{ $name.FirstName.String }}" class="items-center mx-2 w-8 h-8 rounded-full">
{{ else }}
<i class="p-4 fa fa-upload"></i>
{{ end }}
</a>
</div>
</td>
<td scope="row" class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">
<div class="flex items-center ml-3">
<a href="https://next.card.pm/detail/overview?i={{$name.Id}}" class="block iframed-browse">
<span class="text-lg"><span class="font-bold">{{ $name.FirstName.String }}</span> {{ $name.LastName.String }}</span>
</a>
</div>
</td>
<td class="px-4 py-3">
<span class="px-2 py-0.5 text-xs font-medium rounded bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-300">
<a href="https://next.card.pm/cards/to/template?i={{$name.Id}}" class="block iframed-browse">
{{ $name.Template.Name.String }}
</a>
</span>
</td>
<td class="px-4 py-3">
<span class="px-2 py-0.5 text-xs font-medium rounded bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-300">
<a href="https://next.card.pm/detail/email?i={{$name.Id}}" class="block iframed-browse">
{{ if $name.Email.Valid }}
{{ $name.Email.String }}
{{ else }}
<i class="fa fa-edit"></i>
{{ end }}
</a>
</span>
</td>
<td class="px-4 py-3">
<span class="px-2 py-0.5 text-xs font-medium whitespace-nowrap rounded bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-300">
<a href="https://next.card.pm/detail/phone?i={{$name.Id}}" class="block iframed-browse">
{{ if $name.Mobile.Valid }}
{{ $name.Mobile.String }}
{{ else }}
<i class="fa fa-edit"></i>
{{ end }}
</a>
</span>
</td>
<td class="px-4 py-3 font-medium text-gray-900 dark:text-white">
<div class="flex items-center text-xs">
{{ if $name.LastView.Valid }}
{{ $name.LastView.String }}
{{ else }}
<i class="fa fa-edit"></i>
{{ end }}
</div>
</td>
<td class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">
<div class="flex items-center space-x-4">
<a href="https://card.pm/{{$name.Path.String}}" {{  if $isMobile }}target="_blank" class="flex h-auto{{ else }} class="auto p-flex iframed-preview{{ end }} mx-1 pa-1 text-sm font-medium">
V1
</a>
<a href="https://card.pm/beta/{{$name.Path.String}}" {{  if $isMobile }}target="_blank" class="flex h-auto{{ else }} class="auto p-flex iframed-preview{{ end }} mx-1 pa-1 text-sm font-medium">
V2
</a>
<a href="https://beta.card.pm/{{$name.Path.String}}" {{  if $isMobile }}target="_blank" class="flex h-auto{{ else }} class="auto p-flex iframed-preview{{ end }} mx-1 pa-1 text-sm font-medium">
V3
</a>
</div>
</td>
</tr>
{{ end }}

</tbody>
</table>
</div>
      
{{ end }}
{{ end }}

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

{{ template "footer.html" . }}