{{ 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="/design">
        <input type="hidden" name="v" value="{{ .optionView }}" />
        <a href="/create/template" alt="{{ "QR-Codes" | t }}" up-layer="new drawer" up-size="x-large" up-position="right" class="p-2 link-q"><i class="text-red-600 fa fa-plus-circle"></i></a>
        <a href="/design" alt="{{ "Liste" | t }}" up-follow class="p-2 link-q"><i class="fa fa-list"></i></a>
        <a href="/design/nfc" alt="{{ "Aperçu Opengraph" | t }}" up-follow class="p-2 link-q"><i class="fa fa-id-card"></i></a>
        <a href="/design/sign" alt="{{ "Signatures d'email" | t }}" up-follow class="p-2 link-q"><i class="fa fa-envelope"></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-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" id="list">
    <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">
                <div class="grid lg:grid-cols-12 md:grid-cols-2 gap-[30px] items-center">
    
    {{ if not .templates }}
    <div class="col-span-12 w-full text-3xl md:text-5xl">{{ "Aucun résultat" | t }}</div>
    {{ end }}
    {{range $index, $name := .templates }}
    
    <div class="col-span-6 lg:col-span-3">
        <div class="overflow-hidden relative p-6 text-center bg-white rounded-md border shadow transition-all duration-500 ease-in-out group dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 dark:hover:border-gray-800 hover:border-indigo-700" style="background:{{ $name.Opengraph.String }} !important">
            <a href="https://card.pm/sample/{{$name.Md5}}" class="iframed-preview h-[200px] flex">
                {{ if $name.LogoOpengraph.Valid }}
                <img src="https://datamix.media/card.pm/gabarit/{{$name.LogoOpengraph.String}}" class="p-6 m-auto max-w-full max-h-full" />
                {{ else if $name.Logo.Valid }}
                <img src="https://datamix.media/card.pm/gabarit/{{$name.Logo.String}}" class="p-6 m-auto max-w-full max-h-full" />
                {{ else }}
                <span class="m-auto text-3xl font-extrabold text-center center align-center" style="color:{{ $name.OpengraphTitle.String }} !important">{{ if $name.Name.Valid }}{{$name.Name.String}}{{ else }}{{$index}}/{{$name.Id}}{{ end }}</span>
                {{ end }}
            </a>
            <p class="mt-2 font-medium">{{ $name.Status.Int32 }} carte{{ if gt $name.Status.Int32 1 }}s{{ end }}</p>
            <a class="iframed-browse" href="https://next.card.pm/template/overview?i={{$name.Id}}"><code class="block px-3 py-1 mt-2 text-xs font-normal text-black bg-gray-200 rounded-lg dark:text-white dark:bg-gray-800 w-100"><i class="mr-2 fa-light fa-link"></i> /{{$name.Host.String}}</code></a>
        </div>
    </div>
    {{ end }}
                </div>
            </div>
        </div>
    </div>
</section>

{{ template "footer.html" . }}