{{ define "main" }}
    <div class="cover__container">
        <div class="cover__back" style="background-image: url('https://share.lefuturiste.fr/u/2478737d-7e5e-42cd-8764-d0136ef83546/cover_v2_01.jpg')">
            <video playsinline autoplay muted loop>
                <source src="https://static.etoiledebethleem.fr/videos/cover_trailer.webm" type="video/webm">
            </video>
        </div>
        <div class="cover__overlay">
        </div>
        <div class="cover__content">
            <div class="cover__title-container">
                <div class="page-container">
                    <h1 class="cover__title">Relevons notre Bethléem Normand !</h1>
                </div>
            </div>
        </div>
    </div>
    <div class="accent-separator">
    </div>

    <div class="page-container" style="padding: 2rem 0"> 
        <a class="button">Adhérer !</a>
    </div>

	<main class="landing-main">
        <!-- <div style="display: flex; justify-content: center; font-size: 1.3em; border: 1px dashed gray; padding: 1rem;"> -->
        <!-- 🚧    Site en construction...   🚧 -->
        <!-- </div> -->
        {{/* .Content */}} 
        {{/*
		{{ $paginator := .Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }}
		{{ range $paginator.Pages }}
			{{ .Render "summary" }}
		{{ end }}
		{{ partial "pagination.html" . }}
        */}}

        {{ $slides_count := 4 }}
        <section class="history-container">
            <div class="page-container">
                <h2>Une histoire mouvementée...</h2>
            </div>
            <div class="carousel" aria-label="Histoire de la chapelle">
                <ol class="carousel__viewport">

                    <!-- Bourbon chateau, une crypte particulière, Les chartreux, Mignot et Villain -->
                    
                    <li id="history__slide0" tabindex="0" class="carousel__slide">
                        <div class="slide-content history-component__container">
                            <div class="page-container slide-inner history-component__content">
                                <div class="layout-grid-image third">
                                    <div>
                                        <h3>Charles de Bourbon, un esprit fondateur</h3>
                                        <p>
                                            Il est le fondateur de la chapelle..
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                        </p>
                                    </div>
                                    <div class="image-container">
                                        {{ $image := resources.Get "images/cardinal_charles_de_bourbon.jpg" }}
                                        <figure class="slide-image image-with-caption">
                                            <img
                                                alt="Portrait de Charles de Bourbon"
                                                src="{{ $image.RelPermalink }}"
                                            />
                                            <figcaption>Portrait de Charles de Bourbon</figcaption>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="carousel__snapper">
                            <a href="#history__slide3"
                               class="carousel__prev">Diapositive précédente</a>
                            <a href="#history__slide1"
                               class="carousel__next">Diapositive suivante</a>
                        </div>
                    </li>

                    <li id="history__slide1" tabindex="0" class="carousel__slide">
                        <div class="slide-content history-component__container">
                            <div class="page-container slide-inner history-component__content">
                                <div>
                                    <h3>Une crypte particulière</h3>
                                    <p>
                                        La crypte de la chapelle est un lieu unique : c'est une copie presque parfaite de la crypte de la nativité en Judée.
                                        <!-- Le cardinal ayant envoyé deux fois son architecte en palestine pour faire les relevés, la crypte a Aubevoye est remarquablement similaire à sa jumelle de bethléem -->
                                    </p>
                                    <!-- image: porte d'entré crypte ancienne, je pense faire une double 
                                     aussi: petit ange -->
                                </div>
                                <div class="image-container double-horizontal-image-container">
                                    <figure class="slide-image image-with-caption">
                                        {{ $image := resources.Get "images/crypte_entree_1.jpg" }}
                                        {{ $caption := "L'entrée de la crypte" }}
                                        <img
                                            alt="{{ $caption }}"
                                            src="{{ $image.RelPermalink }}"
                                        />
                                        <figcaption>{{ $caption }}</figcaption>
                                    </figure>
                                    <figure class="slide-image image-with-caption">
                                        {{ $image := resources.Get "images/crypte_anges_1.jpg" }}
                                        {{ $caption := "Les anges de la crypte" }}
                                        <img
                                            alt="{{ $caption }}"
                                            src="{{ $image.RelPermalink }}"
                                        />
                                        <figcaption>{{ $caption }}</figcaption>
                                    </figure>

                                </div>
                            </div>
                        </div>
                        <div class="carousel__snapper">
                            <a href="#history__slide0"
                               class="carousel__prev">Diapositive précédente</a>
                            <a href="#history__slide2"
                               class="carousel__next">Diapositive suivante</a>
                        </div>
                    </li>

                    <li id="history__slide2" tabindex="0" class="carousel__slide">
                        <div class="slide-content history-component__container">
                            <div class="page-container slide-inner history-component__content">
                                <div class="layout-grid-image half">
                                    <div>
                                        <h3>Les Chartreux</h3>
                                        <p>
                                            Le cardinal fit don de la chapelle et de sa crypte aux Chartreux d'Aubevoye. Chaque Noël ils se rendèrent en procession à la lueure des torches pour célébrer la messe de minuit dans la crypte sacrée. Ils demandèrent au Cardinal de créer un détachement de la chartreuse à la chapelle. 
                                        </p>
                                        <p>
                                            Ils s'occupairent alors du domaine, des vignerons sur les cotaux et de la maintenance de la chapelle jusqu'à la révolution 1791 où ils furent chassés.
                                        </p>
                                    </div>
                                    <div class="image-container">
                                        {{ $image := resources.Get "images/la_chartreuse_1.jpg" }}
                                        <figure class="slide-image image-with-caption">
                                            <img
                                                alt="Église de la chartreuse Bourbons-lez-Gaillon"
                                                src="{{ $image.RelPermalink }}"
                                            />
                                            <figcaption>Église de la chartreuse Bourbons-lez-Gaillon</figcaption>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="carousel__snapper">
                            <a href="#history__slide1"
                               class="carousel__prev">Diapositive précédente</a>
                            <a href="#history__slide3"
                               class="carousel__next">Diapositive suivante</a>
                        </div>
                    </li>


                    <li id="history__slide3" tabindex="0" class="carousel__slide">
                        <div class="slide-content history-component__container">
                            <div class="page-container slide-inner history-component__content">
                                <div class="layout-grid-image half">
                                    <div>
                                        <h3>Restauration Mignot et Villain</h3>
                                        <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                        <p>
                                    </div>
                                    <div class="image-container">
                                        {{ $image := resources.Get "images/chapelle_carte_postale_1.jpg" }}
                                        <figure class="slide-image image-with-caption">
                                            <img
                                                alt="Portrait de Charles de Bourbon"
                                                src="{{ $image.RelPermalink }}"
                                            />
                                            <figcaption>La chapelle en 1912</figcaption>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="carousel__snapper">
                            <a href="#history__slide2"
                               class="carousel__prev">Diapositive précédente</a>
                            <a href="#history__slide0"
                               class="carousel__next">Diapositive suivante</a>
                        </div>
                    </li>
                </ol>
                <aside class="carousel__navigation">
                    <ol class="carousel__navigation-list">
                    {{ range $index, $s := seq $slides_count }}
                        <li class="carousel__navigation-item {{ if eq $index 0 }}enabled{{- end -}}">
                            <a href="#history__slide{{ $index }}"
                               class="carousel__navigation-button">{{ $index }}ème diapositive</a>
                        </li>
                    {{ end }}
                    </ol>
                </aside>
            </div>
        </section>


        <!-- <section class="history-section"> -->
        <!--     <div class="page-container history-summary"> -->
        <!--         <div class="history-summary__text"> -->
        <!--             <h2>Bref historique</h2> -->
        <!--             <p> -->
        <!--             Aubevoye possède un souvenir de Terre Sainte unique en France et en Europe. Une reproduction exacte de le grotte de la nativité de Bethléem dans laquelle le Sauveur vint au monde. -->
        <!--             Ce monument est dû à la magnificence et à la piété du Cardinal de Bourbon, Charles Ier de Bourbon, oncle paternel de Henri IV, qui fut pendant quelques temps proclamé roi de France par les Ligueurs sous le nom de Charles X. -->
        <!--             Archevêque de Rouen de 1550 à 1590, l'éminent prélat qui avait déjà fondé, en 1563, près de son château de Gaillon, la chartreuse de Notre-Dame de Bonne-Esperance (Bourbon-lès-Gaillon), voulut avoir également à portée de sa résidence princière le berceau du Roi des rois. -->
        <!--             A cet effet, il envoya deux fois son architecte en Palestine pour lever les plans nécessaires et en 1582, l'édifice était achevé. Le pieux cardinal, qui le désigne lui-même dans ses actes sous le nom de Bethléem, en fit don aux Chartreux avec les terres qui l'environnaient. -->
        <!--             Aujourd'hui, malheureusement, la chapelle tombe en ruines. Elle est régulièrement dégradée, pillée, vandalisée. -->
        <!--             </p> -->
        <!--         </div> -->
        <!--         <div class="history-summary__image"> -->
        <!--             {{ $image := resources.Get "images/cardinal_charles_de_bourbon.jpg" }} -->
        <!--             <img src="{{ $image.RelPermalink }}" /> -->
        <!--         </div> -->
        <!--     </div> -->
        <!-- </section> -->

<!--         <section class="images-section"> -->
<!--             <h2 class="page-container">Images</h2> -->
<!--         </section> -->

        <section class="compare-section">
            <div class="page-container">
                <h2>Un petit bout de palestine en Normandie...</h2>
                <div class="compare-items compare-items-dynamic">
                    <div class="compare-item compare-east">
                        <figure>
                            <div class="compare-duet">
                                <div class="compare-hidden">
                                    {{ $image := resources.Get "images/crypte_comparaison_01_judee.jpg" }}
                                    <img class="" src="{{ $image.RelPermalink }}" />
                                </div>

                                <div class="compare-shown">
                                    {{ $image := resources.Get "images/crypte_comparaison_01_aubevoye.jpg" }}
                                    <img class="" src="{{ $image.RelPermalink }}" />
                                </div>
                            </div>

                            <figcaption>Comparaison de la crypte vers l'est</figcaption>
                        </figure>
                    </div>
                    <div class="compare-item compare-west">
                        <figure>
                            <div class="compare-duet">
                                <div class="compare-hidden">
                                    {{ $image := resources.Get "images/crypte_comparaison_02_judee.jpg" }}
                                    <img class="" src="{{ $image.RelPermalink }}" />
                                </div>

                                <div class="compare-shown">
                                    {{ $image := resources.Get "images/crypte_comparaison_02_aubevoye.jpg" }}
                                    <img class="" src="{{ $image.RelPermalink }}" />
                                </div>

                            </div>
                            <figcaption>Comparaison de la crypte vers l'ouest</figcaption>
                        </figure>
                        </figure>
                    </div>
                </div>
            </div>
        </section>
        
        <section class="timeline-section">
            <div class="page-container history-section timeline-container">
                <div class="timeline">
                    <div class="timeline-item timeline-back-decoration">
                        <div class="timeline-item__inner">
                            <div class="timeline-item__dot-container">
                                <div class="timeline-trace"></div>
                            </div>
                            <div class="timeline-item__summary">
                            </div>
                        </div>
                        <div></div>
                    </div>
                    <div class="timeline-list">
                    <div class="timeline-item">
                        <div class="timeline-item__inner">
                            <div class="timeline-item__dot-container">
                                <div class="timeline-item__dot"></div>
                            </div>
                            <div class="timeline-item__summary">
                                1970
                            </div>
                        </div>
                        <div class="timeline-item__content card">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-item__inner">
                            <div class="timeline-item__dot-container">
                                <div class="timeline-item__dot"></div>
                            </div>
                            <div class="timeline-item__summary">
                                1970
                            </div>
                        </div>
                        <div class="timeline-item__content card">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="organization-section">
            <div class="page-container">
                <!-- <div class="organization__image"> -->
                <!--     <!-1- {{ $image := resources.Get "images/assemblee_constitutive_ensemble.jpg" }} -1-> -->
                <!--     <img src="https://picsum.photos/300/300" alt="Assemblée générale constitutive" /> -->
                <!-- </div> -->
                <div class="organization__explain">
                    <h2>L'association : L'Étoile de Bethléem</h2>
                    <p>
                    Formé en septembre 2022, suite aux efforts des propriétaires et des passionées de ce monument. Elle a pour but de contribuer à la sauvegarde et à la restauration de la Chapelle de Bethléem d’Aubevoye et de promouvoir ce monument ainsi que mieux le connaitre et l’animer.
                    </p>
                    <p>
                    L’association “L’Étoile de Bethléem - Association des amis de la chapelle de bethléem d’Aubevoye” est immatriculé au près de la préfecture de l’Eure sous le numéro RNA W271006556.
                    </p>
                </div>
            </div>
        </section>

        <section class="news-section">
            <div class="news-presentation">
                {{ $pages := where .Site.RegularPages "Type" "in" "actualites" }}
                {{ $pag := .Paginate ($pages) }}
                    {{ range $index, $element := $pag.Pages }}
                        {{ if eq $index 0 }}
                            {{ $featuredImage := (resources.Get (printf "%s" ("cover/cover.jpg" | safeURL))) }}
                            
                            {{ with .Params.featured_image }}
                                {{ $featuredImage = .Resources.GetMatch (.src | safeURL)  }}
                            {{ end }}
                            {{ $featuredImage := $featuredImage.Resize "450x" }}
                            <div
                                class="prominent-article article-card"
                            >
                                <div
                                    class="article__background"
                                    style="background-image: url('{{ $featuredImage.RelPermalink }}')"
                                >
                                </div>
                                <div
                                    class="article__background-overlay"
                                >
                                </div>
                                <div class="article__content page-container">
                                    <div class="article__pre">
                                        Dernières nouvelles...
                                    </div>
                                    <h2 class="article__title">
                                        <a href="{{ .RelPermalink }}">{{ .Title }}</a>
                                    </h2>
                                    <div class="article__meta">
                                        Le {{ .Date.Format "Monday 2 January 2006" }}
                                    </div>
                                    <div class="article__summary">
                                        {{ .Summary }}
                                    </div>
                                    <div class="article__bottom">
                                        <a 
                                            href="{{ .RelPermalink }}"
                                            class="article__readmore button button-transparent"
                                        >
                                            Lire plus
                                        </a>
                                    </div>
                                </div>
                            </div>
                        {{ end }}
                    {{ end }}
                <!-- <div class="prominent-article"> -->
                <!--     <div class="prominent-article__image"> -->
                <!--     </div> -->
                <!--     <div class="prominent-article__content"> -->
                <!--         <div class="prominent-article__title"> -->
                <!--         </div> -->
                <!--         <div class="prominent-article__summary"> -->
                <!--         </div> -->
                <!--         <div class="prominent-article__meta"> -->
                <!--         </div> -->
                <!--     </div> -->
                <!-- </div> -->

                <div class="page-container">
                    Others articles...
                </div>
            </div>
        </section>



        {{ $slides_count := len $.Site.Data.partners.people }}
        <section class="partners-container">
            <div class="page-container">
                <h2>Ils nous soutiennent !</h2>
            </div>
            <div class="carousel" aria-label="Partners">
                <ol class="carousel__viewport">
                    {{ range $index, $comment := $.Site.Data.partners.people }}
                    <li id="partners__slide{{ $index }}"
                        tabindex="0"
                        class="carousel__slide">
                        <div class="slide-content partner-comment__container">
                            <div class="slide-inner partner-comment">
                                {{ $image := resources.Get (printf "images/partners/%s" $comment.image) }}
                                <a class="partner-comment__author-link" href="{{ $comment.org.website }}">
                                    <img class="partner-comment__author-picture" alt="Photo d'un de nos soutiens" src="{{ $image.RelPermalink }}" />
                                </a>
                                <div class="partner-comment__quote-container">
                                    <div class="quote-decoration quote-before">
                                        {{ partial "helpers/svg" (dict "path" "icons/quote") }}
                                    </div>
                                    <p>
                                        {{ $comment.quote }}
                                    </p>
                                    <div class="quote-decoration quote-after">
                                        {{ partial "helpers/svg" (dict "path" "icons/quote") }}
                                    </div>
                                </div>
                                <div class="partner-comment__author">
                                    <div class="partner-comment__author-name">
                                        {{ with $comment.name }}{{ . }}{{ end }} {{ with $comment.org.intro }}{{ . }}{{ end }} {{ $comment.org.name }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="carousel__snapper">
                            <a href="#partners__slide{{ partial "fullmod" (slice (sub $index 1) $slides_count) }}"
                               class="carousel__prev">Diapositive précédente</a>
                            <a href="#partners__slide{{ partial "fullmod" (slice (add $index 1) $slides_count) }}"
                               class="carousel__next">Diapositive suivante</a>
                        </div>
                    </li>
                    {{ end }}
                </ol>
                <aside class="carousel__navigation">
                    <ol class="carousel__navigation-list">
                    {{ range $index, $s := seq $slides_count }}
                        <li class="carousel__navigation-item {{ if eq $index 0 }}enabled{{- end -}}">
                            <a href="#partners__slide{{ $index }}"
                               class="carousel__navigation-button">{{ $index }}ème diapositive</a>
                        </li>
                    {{ end }}
                    </ol>
                </aside>
            </div>
        </section>
	</main>

    <div class="separation-section secondary-bg">
        <div class="page-container">
            <h2>Rejoignez nous dans notre aventure !</h2>
            <a class="button">Adhérer !</a>
        </div>
    </div>
	<div class="page-container">
	</div>


    {{ $js := resources.Get "scripts/carousel.js" | js.Build (dict "params" (dict "api" "https://example.org/api")) }}
    <script defer src="{{ $js.Permalink }}"></script>
{{ end }}