{{ define "main" }}
    <div class="cover__container">
        {{ $cover := (resources.Get (printf "%s" ("images/cover_1.jpg" | safeURL))) }}
        {{ with $cover }}
        <div class="cover__back" style="background-image: url('{{ .RelPermalink }}')">
            <!-- For now we are not going to show a video -->
            <!-- <video playsinline autoplay muted loop> -->
            <!--     <source src="https://static.etoiledebethleem.fr/videos/teaser_v5.mp4" type="video/webm"> -->
            <!-- </video> -->
        </div>
        {{ end }}
        <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 layout-two-spaced"> 
        <div class="alert">
            <div class="alert-split-content">
                <p>Campagne d'adhésion 2024, nous avons besoin de vous !</p>
                <a href="/adhesion" class="button">Adhérer</a>
            </div>
        </div>
    </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> -->
        <section class="trailer-section landing-section" id="trailer-organization">
            <div class="side-icon">
                {{ partial "helpers/svg" (dict "path" "icons/old_tv_3d") }}
            </div>
            <div class="landing-section__content page-container">
                <div class="organization__explain">
                    <h2>Regardez la vidéo de présentation</h2>
                    <iframe
                        class="video"
                        title="Campagne d'adhésion 2023-2024 - L'étoile de Bethléem"
                        width="100%" height="431"
                        src="https://peertube.iriseden.eu/videos/embed/9db3e44d-6474-44d9-b528-72fa46cc788b?warningTitle=0&amp;p2p=0"
                        frameborder="0" allowfullscreen=""
                        sandbox="allow-same-origin allow-scripts allow-popups"
                    ></iframe>
                    <div class="end-action-container">
                        <a
                            href="https://youtube.com/watch?v=vJeEqDfz_4c"
                            target="_blank"
                            class="button button-sm button-light mr-1">
                           Sur youtube
                        </a>
                        <a
                            href="https://peertube.iriseden.eu/w/kttSsyAhtBDX76VciXDRDM"
                            target="_blank"
                            class="button button-sm button-light">
                           Sur Peertube
                        </a>
                    </div>
                </div>
            </div>
        </section>

        {{ $slides_count := 6 }}
        <section class="history-container" id="section-history">
            <div class="page-container">
                <h2>La chapelle au fil du temps</h2>
            </div>
            <div class="carousel history-carousel" aria-label="Histoire de la chapelle">
                <ol class="carousel__viewport">

                    <li id="history__slide0" tabindex="0" class="carousel__slide" data-slide-index="0">
                        <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>
                                            Dans les années 1570, le cardinal Charles Ier de Bourbon est alors archevèque de Rouen, 
                                            Probablement dans un contexte de guerre de religion, il cherche un moyen de revendiquer sa foi de chrétien catholique.
                                            Il envoya par deux fois sont architecte en Judée pour y relever les plan de la grotte de la nativité à Bethléem.
                                            La chapelle est construite et inaugurée en 1582.
                                        </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__slide5"
                               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" data-slide-index="1">
                        <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="Plan de l'église de la chartreuse Bourbons-lez-Gaillon, maintenant détruite."
                                                src="{{ $image.RelPermalink }}"
                                            />
                                            <figcaption>Église de la chartreuse Bourbons-lez-Gaillon</figcaption>
                                        </figure>
                                    </div>
                                </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" data-slide-index="2">
                        <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</h3>
                                        <p>
                                            Depuis la révolution, la chapelle passe de propriétaire en propriétaire, son état se dégrade.
                                            M et Mme Mignot M. les nouveaux propriétaires renovent et transforment la chapelle et sa crypte.
                                            La nef devient un lieu d'habitation et un grenier est construit.
                                            En novembre 1895, la crypte est rendue au culte, suite à la consécration du vicaire général d'Évreux.
                                        <p>
                                    </div>
                                    <div class="image-container">
                                        {{ $image := resources.Get "images/chapelle_carte_postale_1.jpg" }}
                                        <figure class="slide-image image-with-caption">
                                            <img
                                                alt="Carte postale de la façade sud de la chapelle en 1912."
                                                src="{{ $image.RelPermalink }}"
                                            />
                                            <figcaption>La chapelle en 1912</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" data-slide-index="3">
                        <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 Villain</h3>
                                        <p>
                                            De nouveau, la chapelle passe de propriétaire en propriétaire et se dégrade, en 1933 la crypte est inscrite au monument historiques.
                                            En 1956, M. et Mme Villain natif de la région font l'acquisition du domaine et rénovent la chapelle jusqu'en 1959.
                                            Le domaine est utilisé comme verger et chapelle et la crypte font l'objet d'un culte catholique, des baptême et des mariages y sont célébrés.
                                        <p>
                                    </div>
                                    <div class="image-container">
                                        {{ $image := resources.Get "images/chapelle_1959.jpg" }}
                                        <figure class="slide-image image-with-caption">
                                            <img
                                                alt="Photo de la chapelle pendant la période Villain"
                                                src="{{ $image.RelPermalink }}"
                                            />
                                            <figcaption>La chapelle pendant la période Villain</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__slide4"
                               class="carousel__next">Diapositive suivante</a>
                        </div>
                    </li>

                    <li id="history__slide4" tabindex="0" class="carousel__slide" data-slide-index="4">
                        <div class="slide-content history-component__container">
                            <div class="page-container slide-inner history-component__content">
                                <div class="layout-grid-image half">
                                    <div>
                                        <h3>La ruine</h3>
                                        <p>
                                            En 1982 la chapelle est vendu au notaire Mme. Bailleul en viager.
                                            Par manque d'activités religieuses et depuis la mort de M. Villain en 1992, le domaine tombe dans l'abandon, la chapelle est régulièrement squatté, le mobilier pillé.
                                            En juin 2000, un témoin rapporte que des saccages expéditifs ont été menés.
                                            Depuis, la chapelle se dégrade alors très vite, le coté ouest de la toiture tombe en 2015. Les éléments font le reste et la nature reprend son droit.
                                        <p>
                                    </div>
                                    <div class="image-container">
                                        {{ $image := resources.Get "images/chapelle_2014_sud.jpg" }}
                                        <figure class="slide-image image-with-caption">
                                            <img
                                                alt="Chapelle en mauvaise état en hiver derrière les arbres."
                                                src="{{ $image.RelPermalink }}"
                                            />
                                            <figcaption>La chapelle en 2014 photographié par Guillaume Hylias</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__slide5"
                               class="carousel__next">Diapositive suivante</a>
                        </div>
                    </li>

                    <li id="history__slide5" tabindex="0" class="carousel__slide" data-slide-index="5">
                        <div class="slide-content history-component__container">
                            <div class="page-container slide-inner history-component__content">
                                <div class="layout-grid-image half">
                                    <div>
                                        <h3>Une renaissance</h3>

                                        <p>
                                            En 2021, grâce au changement de propriétaire du domaine, une association a vu le jour en 2022.
                                            Elle dispose d'une délégation de maitrise d'ouvrage afin de sauvegarder ce qu'il reste de la chapelle et d'envisager une restauration.
                                            L'association s'attelle à faire revivre le lieu en organisant des manifesations publiques.
                                            Vous pouvez construire la suite de l'histoire avec nous! 
                                        <p>
                                    </div>
                                    <div class="image-container">
                                        {{ $image := resources.Get "images/activites/visite_28_fev_2023_randonneurs.jpg" }}
                                        <figure class="slide-image image-with-caption">
                                            <img
                                                alt="Photo de groupe de personnes impliqués dans l'association"
                                                src="{{ $image.RelPermalink }}"
                                            />
                                            <figcaption>Visite de la chapelle par des randonneurs</figcaption>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="carousel__snapper">
                            <a href="#history__slide4"
                               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>
            <div class="page-container end-action-container">
                <a
                    href="/documentation/histoire"
                    class="button button-sm button-light">
                    L'Histoire en détails
                </a>
            </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" id="section-compare">
            <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="organization-section" id="section-organization">
            <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>
                    <div class="end-action-container">
                        <a
                            href="/association"
                            class="button button-sm button-light">
                            L'association en détails
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <section class="landing-section news-section" id="section-news">
            <div class="side-icon">
                {{ partial "helpers/svg" (dict "path" "icons/press") }}
            </div>

            <div class="landing-section__content article-cards page-container">
                <h2 class="section-title">
                    Les dernières nouvelles…
                </h2>
                <div class="news-presentation">
                    {{ $news := where .Site.RegularPages "Section" "in" "actualites" }}
                    {{ range $index, $element := $news }}{{ if eq $index 0 }}
                        {{ $featuredImage := (resources.Get (printf "%s" ("cover/cover.jpg" | safeURL))) }}
                        {{ with $element.Params.featured_image }}
                            {{ $featuredImage = $element.Resources.GetMatch .src }}
                        {{ end }}
                        {{ $featuredImage := $featuredImage.Resize "800x" }}
                        <div
                            class="prominent-article article-card"
                        >
                            <a class="article__image" href="{{ .RelPermalink }}">
                                {{ with $featuredImage }}
                                    <img src="{{ .RelPermalink }}" />
                                {{ end }}
                            </a>
                            <div class="article__content">
                                <h2 class="article__title">
                                    <a href="{{ .RelPermalink }}">{{ .Title }}</a>
                                </h2>
                                <div class="article__meta">
                                    Le {{ time.Format "Monday 2 January 2006" .Date }}
                                </div>
                                <div class="article__summary">
                                    {{ .Summary | truncate 250 }}
                                </div>
                                <div class="article__bottom">
                                    <a 
                                        href="{{ .RelPermalink }}"
                                        class="article__readmore button button-transparent"
                                    >
                                        Lire plus
                                    </a>
                                </div>
                            </div>
                        </div>
                    {{ end }}{{ end }}
                </div>
                <div class="separator news-separator"></div>

                <div class="secondary-news">
                    {{ range $index, $element := $news }}
                    {{ if (and (gt $index 0) (lt $index 3)) }}
                        {{ $featuredImage := (resources.Get (printf "%s" ("cover/cover.jpg" | safeURL))) }}
                        {{ with $element.Params.featured_image }}
                            {{ $featuredImage = $element.Resources.GetMatch .src }}
                        {{ end }}
                        {{ $featuredImage := $featuredImage.Resize "fit 700x" }}
                        <div
                            class="article-card"
                            href="{{ .RelPermalink }}"
                            >
                            <a class="article__image" href="{{ .RelPermalink }}">
                                {{ with $featuredImage }}
                                    <img src="{{ .RelPermalink }}" />
                                {{ end }}
                            </a>
                            <div class="article__content">
                                <h2 class="article__title">
                                    <a href="{{ .RelPermalink }}">{{ .Title }}</a>
                                </h2>
                                <div class="article__meta">
                                    Le {{ time.Format "Monday 2 January 2006" .Date }}
                                </div>
                                <div class="article__summary">
                                    {{ .Summary | truncate 100 }}
                                </div>
                                <div class="article__bottom">
                                    <a 
                                        href="{{ .RelPermalink }}"
                                        class="article__readmore link"
                                    >
                                        Lire plus
                                    </a>
                                </div>
                            </div>
                        </div>
                    {{ end }}
                    {{ end }}
                </div>
                <div class="end-action-container">
                    <a
                        href="/actualites"
                        class="button button-sm button-light">
                       Voir toutes les news
                    </a>
                </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>
            <p>Déjà plus de 80 membres !<p>
            <a href="/adhesion" 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 }}