{{ template "headersMenu.html" . }}

{{ $isMobile := .isMobile }}

<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">
    <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="/dashboard" alt="{{ "Liste" | t }}" up-follow class="p-2"><i class="fa-solid fa-home"></i></a>
        <a href="/list" alt="{{ "Liste" | t }}" up-follow class="p-2"><i class="fa-solid fa-grid-2"></i></a>
        <label class="ml-2">
        <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% - 89px)" />
        </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-thin fa-spin fa-refresh"></i></button>
    </form>
    </div>
    </div>
    </div>
</div>

<section class="relative py-44">
<div class="container">
<div class="flex flex-wrap">

<div class="w-full">
    <div class="block mt-1 mb-8 text-center filters-group-wrap">
        <div class="w-full text-lg font-normal uppercase md:text-2xl">
            {{ if greaterThanZero .NB }}
            {{ .NB }} {{ if greaterThanOne .NB }}{{ "codes actifs" | t }}{{ else }}{{ "code actif" | t }}{{ end }}
            {{ else }}
            {{ "Aucun résultat, frère." | t }}
            {{ end }}
        </div>
        {{ if greaterThanOne .NB }}
        <div class="filters-group">
            <ul class="mb-0 text-xs list-none uppercase md:text-sm container-creative filter-options">
                <li class="inline-block relative mx-1.5 mb-3 font-medium transition duration-500 cursor-pointer text-slate-400 active" data-group="all">{{ "Tout" | t }}</li>
                <li class="inline-block relative mx-1.5 mb-3 font-medium transition duration-500 cursor-pointer text-slate-400" data-group="cards">{{ "Cartes de visite" | t }}</li>
                <li class="inline-block relative mx-1.5 mb-3 font-medium transition duration-500 cursor-pointer text-slate-400" data-group="docs">{{ "Documents" | t }}</li>
                <li class="inline-block relative mx-1.5 mb-3 font-medium transition duration-500 cursor-pointer text-slate-400" data-group="pages">{{ "Site internet" | t }}</li>
            </ul>
        </div>
        {{ end }}
    </div>
</div>

<div class="w-full">
    <div id="grid">

    {{range $index, $name := .qrcodes }}
        <!-- QR Code Item -->
        <div class="block px-2 w-full lg:w-1/3 md:w-1/2 picture-item shuffle-item shuffle-item--visible" data-groups="[&quot;{{ if $name.IsCard }}cards{{ else if $name.IsDoc }}docs{{ else }}pages{{ end }}&quot;]" 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; transform: translate(0px, 0px) scale(1);">
            <a {{ if $isMobile }}up-follow{{ else }}up-layer="new" up-size="large"{{end}} href="/edit/{{ $name.Id }}" class="block relative p-4 p-6 mb-4 text-left bg-white rounded-lg border-gray-400 shadow transition-all duration-500 ease-in-out border-2 hover:border-black group dark:shadow-gray-800 h-[150px] overflow-hidden hover:shadow-md dark:hover:shadow-gray-700 hover:bg-black hover:text-white hover:border-indigo-700 dark:bg-slate-900 hover:dark:bg-slate-800 dark:border-gray-700 hover:dark:border-white">
                <img src="/api/v2/qrcode.png?text=https://qrcode.pm/{{ $name.Path }}" class="rounded shadow-md" style="height:120px;width:120px; float:right; margin:-4px -4px 0 12px">
                <div class="flex justify-between items-center my-2">
                    <div class="block">
                        <div class="text-sm uppercase opacity-50">
                            {{ if $name.IsCard }}
                                {{ "Carte de visite" | t }}
                                <i class="fa fa-id-card"></i>
                            {{ else if $name.IsDoc }}
                                {{ "Document" | t }}
                                <i class="fa fa-file"></i>
                            {{ else }}
                                {{ "Site internet" | t }}
                                <i class="fa fa-link"></i> 
                            {{ end }}
                        </div>
                        <h3 class="mb-4 text-xl font-normal text-gray-800">{{ $name.Name | t }}</h3>
                        {{ if $name.NbViews }}
                        <div class="fixed bottom-0 px-2 py-1 mb-8 text-xs text-white uppercase bg-black rounded-lg shadow-md z-2">{{ $name.NbViews }} {{ if greaterThanOne $name.NbViews }}{{ "scans" | t }}{{ else }}{{ "scan" | t }}{{ end }}</div>
                        {{ end }}
                    </div>
                </div>
            </a>
        </div>
    {{ end }}
        
    </div>
</div>

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


{{ template "footer.html" . }}