{{ template "headers.html" . }}

<span class="fixed blur-[200px] w-[600px] h-[600px] rounded-full top-1/2 -translate-y-1/2 ltr:left-1/2 ltr:-translate-x-1/2 rtl:right-1/2 rtl:translate-x-1/2 bg-indigo-600/20"></span>

<nav id="topnav" class="defaultscroll is-sticky {{ if .brand.Logo.Valid }}bg-white shadow-lg shadow-md text-black dark:bg-white dark:text-black{{ end }}">
    <div class="mx-4 container-fluid">
        <a up-follow class="block logo" href="/{{ .folder }}">
            {{ if .brand.Logo.String }}
            <img src="//datamix.media/card.pm/enseigne/{{ .brand.Logo.String }}" class="inline-block h-8 dark:hidden" alt="">
            <img src="//datamix.media/card.pm/enseigne/{{ .brand.Logo.String }}" class="hidden h-8 dark:inline-block" alt="">
            {{ else }}
            <img src="/cdn/design/logos/{{ .domain }}-black.png" class="inline-block h-8 dark:hidden" alt="">
            <img src="/cdn/design/logos/{{ .domain }}-white.png" class="hidden h-8 dark:inline-block" alt="">
            {{ end }}
        </a>

        <ul class="list-none buy-button">
            <span class="hidden relative md:inline-block" style="top:0; right:4px">
                <input type="checkbox" class="absolute opacity-0 checkbox" id="chk" />
                <label class="flex justify-between items-center p-1 w-14 h-8 rounded-full shadow cursor-pointer label bg-slate-900 dark:bg-white dark:shadow-gray-800" for="chk">
                    <i class="fa-thin fa-lightbulb text-[20px] text-yellow-500"></i>
                    <i class="fa-thin fa-lightbulb-slash text-[20px] text-yellow-500"></i>
                    <span class="ball bg-white dark:bg-slate-900 rounded-full absolute top-[2px] left-[2px] w-7 h-7"></span>
                </label>
            </span>
            <li class="inline mb-0 ltr:pl-1 rtl:pr-1 ltr:pr-4 rtl:pl-4">
                <a href="/" up-follow class="rounded-full btn btn-icon {{ if .brand.Logo.Valid }}text-black border-black hover:border-black dark:text-black{{ else }}text-black border-black hover:border-white dark:text-white{{ end }}"><i class="fa fa-{{ if .isConnected }}grid{{ else }}close{{ end }}" class="w-4 h-4"></i></a>
            </li>
        </ul>
    </div>
</nav>

<section class="relative items-center py-12">
    <div class="container my-5">
        <div class="lg:flex">
            <div class="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 grid-cols-1 mt-8 gap-[30px] mx-auto">

                {{range .folders}}
                <div class="grid-item" data-groups='["tube"]'>
                    <a up-follow href="/{{ .Name }}" class="block overflow-hidden relative px-5 py-4 text-3xl font-bold text-center text-white uppercase bg-black rounded-md border shadow-md transition-all duration-500 group dark:shadow-gray-800 border-dark dark:border-white hover:bg-indigo-600" title="{{.Name}}"> <!--  data-type="iframe" class="lightbox  -->
                        {{ .Name }}
                    </a>
                </div>
                {{end}}

            </div>
        </div>

    </div>
</section>


{{ template "footer.html" . }}