{{ define "main" }}
<div class="root">
    <div class="adhesion-container">
        <div class="video-presentation video-presentation-cover" id="video-cover">
            <div class="video-cover__back">
                {{ partial "helpers/svg" (dict "path" "all_logos/square_notext_white_transparent" "class" "back-icon") }}
                <!-- {{ partial "helpers/svg" (dict "path" "all_logos/horizontal_white_transparent" "class" "back-icon") }} -->
            </div>
            <div id="video-play-btn" class="video-cover__content">
                <button>
                    {{ partial "helpers/svg" (dict "path" "icons/circle-play" "class" "btn-icon") }}
                </button>
                <p>Regarder le teaser</p>
            </div>
        </div>
        <div class="video-presentation final-video-presentation" style="display: none;" id="final-video-container">
            <!--     <!-1- <iframe -1-> -->
            <!--     <!-1-     title="Campagne d'adhésion 2023-2024 - L'étoile de Bethléem" -1-> -->
            <!--     <!-1-     width="100%" height="950" -1-> -->
            <!--     <!-1-     src="https://peertube.iriseden.eu/videos/embed/575e83c9-2dd5-464c-a31e-c2aae1bfd48b?p2p=0" -1-> -->
            <!--     <!-1-     frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups"> -1-> -->
            <!--     <!-1- </iframe> -1-> -->
        </div>
    </div>
    <div class="adhesion-footer">
        <div class="page-container adhesion-btns">
            <a 
                class="btn subscribe-button"
                href="{{ .Site.Params.contact.helloasso_adhesion }}"
                title="Adhérer sur Helloasso"
            >
                {{ partial "helpers/svg" (dict "path" "icons/helloasso" "class" "btn__icon") }}
                Adhérer
            </a>
            
            <ul class="socials">
                <li class="btn" title="Télécharger le bulletin d'adhésion papier">
                    <a href="{{ .Site.Params.contact.paper_adhesion }}">
                        {{ partial "helpers/svg" (dict "path" "icons/document" "class" "site-footer-socials__logo") }}
                    </a>
                </li>
                <li class="btn" title="Envoyer nous un e-mail">
                    <a href="mailto:{{ .Site.Params.contact.email }}">
                        {{ partial "helpers/svg" (dict "path" "icons/email" "class" "site-footer-socials__logo") }}
                    </a>
                </li>
                <li class="btn" title="Notre chaîne YouTube">
                    <a href="{{ .Site.Params.socials.youtube }}">
                        {{ partial "helpers/svg" (dict "path" "icons/youtube" "class" "site-footer-socials__logo") }}
                    </a>
                </li>
                <li class="btn" title="Notre groupe facebook">
                    <a href="{{ .Site.Params.socials.facebook }}">
                        {{ partial "helpers/svg" (dict "path" "icons/facebook" "class" "site-footer-socials__logo") }}
                    </a>
                </li>
            </ul>
        </div>
    </div>

</div>


<script>

    let iframe_html = `<iframe
                width="100%"
                src="https://www.youtube.com/embed/vJeEqDfz_4c?autoplay=1"
                title="YouTube video player"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen
            ></iframe>`;

    let btn = document.getElementById("video-play-btn")
    const video_cover = document.getElementById("video-cover")

    const final_video_container = document.getElementById("final-video-container")
    btn.onclick = () => {
        video_cover.style.display = "none"
        final_video_container.innerHTML = iframe_html
        final_video_container.style.display = "block"
    }

</script>
{{ end }}