{{ template "headers.html" . }}

<nav id="topnav" class="text-black bg-white shadow-md shadow-lg transition-all duration-300 ease-in-out opacity-delay hover:opacity-100 defaultscroll is-sticky dark:bg-white dark:text-black">
    <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>

        <!--Login button Start-->
        <ul class="list-none buy-button">
            <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-2{{ else }}close{{ end }}" class="w-4 h-4"></i></a>
            </li>
        </ul>
        <!--Login button End-->

    </div>
    
</nav>

<div id="swurl" class="overflow-hidden min-h-screen transition-fade">
    <div id="Box">
        <section id="Paused" class="flex relative items-center h-screen">
            
            <div id="Blur">
            
            <div id="Blur" {{ if .brand.ColorText.String }}class="overflow-hidden absolute top-0 left-0 z-0 w-full h-full bg-indigo-600 pointer-events-none" {{ else }}class="overflow-hidden absolute top-0 left-0 z-0 w-full h-full pointer-events-none" style="background:{{ .brand.ColorText.String }} !important"{{end}}>
            </div>
            <div class="absolute inset-0 bg-black/40"></div>
            
            <div class="container">
                <div class="grid grid-cols-1 items-center min-h-screen">
                    <img src="/cdn/gui/assets/images/video/bg.png" alt="">
                </div>
            </div>

            <div class="container-fluid">
                <div class="fixed right-0 bottom-0 left-0 pb-8">
                    <div class="container">
                        <div class="grid grid-cols-1">
                            <div class="block">
                                <div class="flex justify-between">
                                    <h5 class="overflow-hidden text-xl font-semibold text-white">{{ .folder | uppercase }} / {{ .video | uppercase }}</h5>
                                    <a href="/{{ .folder }}" class="text-white duration-500 ease-in-out btn btn-link hover:text-white after:bg-white">Toutes les vidéos <i class="fa fa-close"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <video id="myVideo" loop>
        <source src="/cdn/tube/{{.folder}}/{{.video}}.mp4" type="video/mp4">
    </video>
</div>


{{ template "footer.html" . }}