{{ 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/codes">
        <input type="hidden" name="v" value="{{ .optionView }}" />
        <a href="/list" alt="{{ "Liste" | t }}" up-follow class="p-2"><i class="fa fa-list"></i></a>
        <a href="/list/codes" alt="{{ "QR-Codes" | t }}" up-follow class="p-2"><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% - 142px)" />
        </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="relative py-44">
    <div class="container">
        <div class="grid grid-cols-1 items-center gap-[30px]">
            <div class="text-center filters-group-wrap">
                <div class="filters-group">
                    <ul class="mb-0 list-none container-creative filter-options">
                        <li class="inline-block relative mx-1.5 mb-3 text-base 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 text-base 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 text-base 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 text-base font-medium transition duration-500 cursor-pointer text-slate-400" data-group="pages">{{ "Site internet" | t }}</li>
                    </ul>
                </div>
            </div>
        </div><!--grid-->

        <div id="grid">

    
        {{range $index, $name := .qrcodes }}
            <!-- QR Code Item -->
            <div class="p-4 w-full lg:w-1/3 md:w-1/3 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);">
                <div class="block relative rounded-md transition-all duration-700 ease-in-out group">
                    <div class="relative bg-gray-200 rounded-md transition-all duration-300 dark:bg-gray-600 hover:bg-indigo-600">
                        <a {{ if $isMobile }}up-follow{{ else }}up-layer="new" up-size="large"{{end}} href="/edit/{{ $name.Id }}" class="p-1 transition-all duration-700 ease-in-out tobii-zoom" title="">
                            <div class="bottom-5 p-3 bg-white rounded-md h-[100px] ">
                                <h3 class="mb-1 text-lg font-bold text-gray-800">{{ $name.Name | t }}</h3>
                                {{ if $name.IsCard }}<p class="text-sm text-gray-600">{{ "Carte de visite" | t }}</p>{{ else }}<p class="text-sm text-gray-600">{{ "Site internet" | t }}</p>{{ end }}
                                <p class="text-xs text-gray-400">{{ $name.LastView }}</p>
                            </div>
                        <div class="tobii-zoom__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21 16v5h-5"></path><path d="M8 21H3v-5"></path><path d="M16 3h5v5"></path><path d="M3 8V3h5"></path></svg></div></a>
                    </div>
                    <div class="flex absolute right-0 bottom-0 z-10 justify-between items-center p-0 bg-white rounded-md transition-all ease-in-out scale-0 duration-600 group-hover:scale-100">
                        <img src="/api/v2/qrcode.png?text=https://qrcode.pm/{{ $name.Path }}" class="mx-auto rounded-md shadow-md" style="height:120px;width:120px; float:right">
                        <div class="hidden font-bold text-gray-600">{{ $name.NbViews }} {{ if greaterThanOne $name.NbViews }}{{ "scans" | t }}{{ else }}{{ "scan" | t }}{{ end }}</div>
                    </div>
                </div>
            </div>
        {{ end }}
            
        </div>

        <div class="grid grid-cols-1 mt-8 md:grid-cols-12">
            <div class="text-center md:col-span-12">
                <nav aria-label="Page navigation example">
                    <ul class="inline-flex items-center -space-x-px">
                        <li>
                            <a href="#" class="w-[40px] h-[40px] inline-flex justify-center items-center text-slate-400 bg-white dark:bg-slate-900 ltr:rounded-l-lg rtl:rounded-r-lg hover:text-white border border-gray-100 dark:border-gray-700 hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600">
                                <i class="uil uil-angle-left text-[20px] rtl:rotate-180 rtl:-mt-1"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="w-[40px] h-[40px] inline-flex justify-center items-center text-slate-400 hover:text-white bg-white dark:bg-slate-900 border border-gray-100 dark:border-gray-700 hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600">1</a>
                        </li>
                        <li>
                            <a href="#" class="w-[40px] h-[40px] inline-flex justify-center items-center text-slate-400 hover:text-white bg-white dark:bg-slate-900 border border-gray-100 dark:border-gray-700 hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600">2</a>
                        </li>
                        <li>
                            <a href="#" class="z-10 w-[40px] h-[40px] inline-flex justify-center items-center text-white bg-indigo-600 border border-indigo-600">3</a>
                        </li>
                        <li>
                            <a href="#" class="w-[40px] h-[40px] inline-flex justify-center items-center text-slate-400 hover:text-white bg-white dark:bg-slate-900 border border-gray-100 dark:border-gray-700 hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600">4</a>
                        </li>
                        <li>
                            <a href="#" class="w-[40px] h-[40px] inline-flex justify-center items-center text-slate-400 hover:text-white bg-white dark:bg-slate-900 border border-gray-100 dark:border-gray-700 hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600">5</a>
                        </li>
                        <li>
                            <a href="#" class="w-[40px] h-[40px] inline-flex justify-center items-center text-slate-400 bg-white dark:bg-slate-900 ltr:rounded-r-lg rtl:rounded-l-lg hover:text-white border border-gray-100 dark:border-gray-700 hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600">
                                <i class="uil uil-angle-right text-[20px] rtl:rotate-180 rtl:-mt-1"></i>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div><!--end container-->
</section>


{{ template "footer.html" . }}