{{ template "headers.html" . }}

<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 mt-10">
        <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">

                {{ $folder := .folder }}
                {{range .videos}}
                <div class="picture-item" data-groups='["tube"]'>
                    <div class="block overflow-hidden relative text-xl font-bold text-white rounded-md border shadow-md transition-all duration-500 group dark:shadow-gray-800 border-dark dark:border-white">
                        <a up-follow href="/{{ $folder }}/{{ .Name }}" class="max-w-full max-h-full" title="{{.Name}}"> <!--  data-type="iframe" class="lightbox  -->
                            <span class="relative">
                                <img src="/cdn/tube/{{ $folder }}/{{ .Name }}.jpg" class="rounded-md" style="min-height:144px; display:flex; " alt="{{ .Name }}">
                                <div class="absolute inset-0 opacity-0 transition-all duration-500 bg-slate-900/60 group-hover:opacity-100">
                                    <img src="/cdn/gui/assets/images/video/bg.png" class="absolute right-0 left-0 top-1/2 p-4 -translate-y-1/2" alt="">
                                </div>
                            </span>
                            <span class="hidden relative text-xs font-bold text-white uppercase videoLine">{{ .Name }}</span>
                        </a>
                    </div>
                </div>
                {{end}}

            </div>
        </div>

    </div>
</section>


{{ template "footer.html" . }}