{{ template "headersMenu.html" . }}

<style>   
.item-editor {
	background-image: url(https://next.card.pm/assets/card.pm/landings/home/images/image04.jpg);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain !important;
}
.item-card {
	background-image: url(https://beta.card.pm/cdn/design/pics/illus-2023.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain !important;
}
.item-doc {
	background-image: url(https://datamix.media/fredj-light.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain !important;
}
.item-scan {
	background-image: url(https://datamix.media/fredj-nfc-light.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain !important;
}
.item-builders {
	background-image: url(https://datamix.media/fredj-nfc-light.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain !important;
}
.item-keep,
.item-leads,
.item-note,
.item-page,
.item-rating {
    opacity: .42 !important;
}
.dark .item-doc {
	background-image: url(https://datamix.media/fredj-dark.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain !important;
}
.dark .item-scan {
	background-image: url(https://datamix.media/fredj-nfc-dark.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain !important;
}
.dark .item-builders {
	background-image: url(https://datamix.media/fredj-nfc-dark.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain !important;
}
</style>

<section class="flex relative justify-center items-center py-10 min-h-screen-100" id="home">
    <div class="container">
        <div class="grid grid-cols-2 items-center mt-10 lg:grid-cols-12 md:grid-cols-2">
            <div class="col-span-12">
                <div class="grid grid-cols-2 md:grid-cols-12 gap-[30px] items-center">

                    {{ $token := .token }}
                    {{ $domain := .domain }}
                    
                    {{ range .domains }}
                    {{ $domaintmp := . | domain }}

                    {{ if eq $domain "datamix" }}
                    {{ if eq $domaintmp "datamix" }}
                    {{ else }}
                    <div class="col-span-12 md:col-span-6 lg:col-span-3">
                        <a href="https://beta.{{ . }}/bin/auth/in?admin={{ $token }}" class="h-[150px] relative {{ if eq $domain $domaintmp }}bg-indigo-600/90 border-0 text-center {{else}} opacity-50 border-8 w-full hover:border-black dark:border-gray-700 bg-white dark:bg-slate-900  hover:bg-gray-100 dark:hover:bg-indigo-600{{ end }} flex overflow-hidden relative p-6 rounded-md border shadow transition-all duration-300 ease-in-out group dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 item-{{ $domaintmp }} hover:opacity-100" style="align-items:center" target="_top">
                            <div class="block mx-auto content">
                                {{ if eq $domain $domaintmp }}<img src="/cdn/design/logos/{{ $domaintmp }}-white.png" class="mx-auto my-0 h-8" />{{ else }}<img src="/cdn/design/logos/{{ $domaintmp }}-white.png" class="hidden w-48 dark:block" /><img src="/cdn/design/logos/{{ $domaintmp }}-black.png" class="mx-auto w-48 dark:hidden" />{{ end }}
                                {{ if eq $domain $domaintmp }}<div class="inline-block px-3 py-1 mt-0 font-bold text-white uppercase bg-black rounded-lg shadow-md rotapost-40">{{ "Vous êtes ici" | t }}</div>{{ end }}
                                <code class="block fixed right-0 bottom-0 left-0 px-5 py-1 w-full text-xs font-normal text-center text-black rounded-lg opacity-0 transition-all duration-300 group-hover:opacity-100 dark:text-white"><i class="mr-2 fa-light fa-link"></i> https://{{ . }}</code>
                            </div>
                        </a>
                    </div>
                    {{ end }}
                    {{ else }}
                    <div class="col-span-12 md:col-span-6 lg:col-span-3">
                        <a href="https://beta.{{ . }}/bin/auth/in?admin={{ $token }}" class="h-[150px] relative {{ if eq $domain $domaintmp }}bg-indigo-600/90 border-0 text-center {{else}} opacity-50 border-8 w-full hover:border-black dark:border-gray-700 bg-white dark:bg-slate-900  hover:bg-gray-100 dark:hover:bg-indigo-600{{ end }} flex overflow-hidden relative p-6 rounded-md border shadow transition-all duration-300 ease-in-out group dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 item-{{ $domaintmp }} hover:opacity-100" style="align-items:center" target="_top">
                            <div class="block mx-auto content">
                                {{ if eq $domain $domaintmp }}<img src="/cdn/design/logos/{{ $domaintmp }}-white.png" class="mx-auto my-0 h-8" />{{ else }}<img src="/cdn/design/logos/{{ $domaintmp }}-white.png" class="hidden w-48 dark:block" /><img src="/cdn/design/logos/{{ $domaintmp }}-black.png" class="mx-auto w-48 dark:hidden" />{{ end }}
                                {{ if eq $domain $domaintmp }}<div class="inline-block px-3 py-1 mt-0 font-bold text-white uppercase bg-black rounded-lg shadow-md rotapost-40">{{ "Vous êtes ici" | t }}</div>{{ end }}
                                <code class="block fixed right-0 bottom-0 left-0 px-5 py-1 w-full text-xs font-normal text-center text-black rounded-lg opacity-0 transition-all duration-300 group-hover:opacity-100 dark:text-white"><i class="mr-2 fa-light fa-link"></i> https://{{ . }}</code>
                            </div>
                        </a>
                    </div>
                    {{ end }}

                    {{ end }}
    
                </div>
            </div>
        </div>
    </div>
</section>


{{ template "footerMenu.html" . }}