{{ define "main" }}
{{ $site := .Site }}
{{ $current := . }}

<div class="content">
    <div class="md-flex-row lg-flex-row md-direction-row-reverse lg-direction-row-reverse">
        <div class="md-flex-1 lg-flex-1 m-20">{{.Content}}</div>
        <div class="md-w-300 lg-w-300 m-0 m-t-20 m-r-10 p-20 bg-primary white">
            {{$img := resources.Get "images/kit-and-go/kitandgo.png"}}
            <img class="max-w-200 m-auto" src="{{ $img.Permalink }}" alt="KIT&GO" />
            <div class="ta-c"><button class="m-auto m-b-20 bg-green white" onclick="togglekitandgosubscribe()">Abonnez vous</button></div>
            <h2 class="white m-0 uppercase">{{.Params.Shorttitle}}</h3>
            <p class="small">{{.Description}}</p>
            <h3>Sommaire</h3>
            {{.TableOfContents}}
            <h3>Intervenant·e·s :</h3>
            {{range .Params.Authors}}
            <div class="flex-row ai-center">
                {{ if (isset . "image" )}}
                {{$img := resources.Get .image}}
                <div style='background-image: url({{ $img.Permalink }}); background-size: cover; background-position: center center;' class="bg-bubble w-50 h-50 m-10"></div>
                {{end}}
                <div class="flex-1">
                    <h4 class="m-0 p-0">{{.name}}</h4>
                    <p class="small m-0 p-0">{{.description}}</p>
                </div>
                {{end}}
            </div>
            <h3>Accédez aux autres épisodes :</h3>
            <ul class="small">
                {{range (where $site.Pages.ByDate "Type" "kitandgo")}}
                {{if eq .Permalink $current.Permalink}}
                <li><a class="green" href="{{.Permalink}}">{{.Params.Shorttitle}}</a></li>
                {{else}}
                <li><a class="white" href="{{.Permalink}}">{{.Params.Shorttitle}}</a></li>
                {{end}}
                {{end}}
            </ul>
            <p class="small"><a class="white" href="/kitandgo-bibliotheque/">Bibliothèque de ressources</a></p>
            <h3>Réutilisations :</h3>
            <p class="small">Le savoir est bien commun. KIT&GO est publié sous licences ouvertes Creative Commons pour être facilement réutilisé et enrichi, avec quelques règles d'usage :</p>
            <ul class="small">
                <li>Les textes et ressources graphiques sont publiés sous licence <a class="white" href="https://creativecommons.org/licenses/by-sa/3.0/fr/">CC BY-SA 3.0</a></li>
                <li>Les vidéos sont publiées sous licence <a class="white" href="https://creativecommons.org/licenses/by-nd/3.0/fr/">CC BY-ND 3.0</a></li>
            </ul>
            <p class="small">Vous utilisez ou adaptez les ressources KIT&GO ? Prévenez nous ! </p>
            {{if (isset .Params "partners" )}}
            <h3>Avec le soutien de :</h3>
            {{ range .Params.Partners }}
            {{ $img := resources.Get .image }}
            <a href="{{.link}}"><img class="h-50 m-5" src="{{$img.Permalink}}" alt="{{.alt}}" /></a>
            {{ end }}
            {{end}}
        </div>
    </div>
</div>

<div id="kitandgosubscribe" style="position: fixed; top: 52px; left: 0; width: 100%; height: 100%; z-index: 1000; background-color: rgba(36,56,135,0.5); display: none;" onclick="togglekitandgosubscribe()">
    <div class="full-w max-w-1000 m-auto bg-white h-full" style=" opacity: 1;">
        <div class="small ta-r p-10"><a style="cursor:pointer;"  ontap="togglekitandgosubscribe()">X Fermer</a></div>
        <iframe class="w-full h-full" style="border: 0;" src="https://kantree.io/f/711b48e0-formulaire"></iframe>
    </div>
</div>

<script>
    function togglekitandgosubscribe() {
        var x = document.getElementById("kitandgosubscribe");
        if (x.style.display === "none") {
            x.style.display = "block";
        } else {
            x.style.display = "none";
        }
    }
</script>

{{ end }}