<!--
 SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
 SPDX-FileCopyrightText: 2023 Oriol Carbonell <info@oriolcarbonell.cat>
 SPDX-License-Identifier: AGPL-3.0-only
-->
{{ define "title" -}}
    {{( pgettext "Home" "title" )}}
{{- end }}

{{ define "head" -}}
    {{ template "carouselStyle" }}
    {{ template "alpineScript" }}
{{- end }}

{{ define "content" -}}
    {{- /*gotype: dev.tandem.ws/tandem/camper/pkg/home.homePage*/ -}}
    <div class="hero">
        <div role="marquee">
            {{ range $index, $slide := .Cover -}}
                <div style="--background-image:url('{{ .Media }}')">
                    <span>{{ .Caption }}</span>
                </div>
            {{- end }}
        </div>
        <a href="/{{ currentLocale }}/booking">{{( pgettext "Booking" "link" )}} <span>→</span></a>
    </div>
    <section class="nature">
        <h2 class="sr-only">{{ (gettext "The pleasure of camping in the middle of nature…")}}</h2>
        {{ with .CampsiteTypes -}}
            <div>
                {{ range . -}}
                    <section style="--background-image:url('{{ .Media }}')">
                        <h3><a href="{{ .HRef }}"><span>{{ .Label }}</span></a></h3>
                    </section>
                {{- end }}
            </div>
        {{- end }}
    </section>
    <section class="services">
        <h2><a href="/{{ currentLocale }}/services">{{( gettext "Our services")}} <span>→</span></a></h2>
    </section>
    <p class="enjoy">{{ .Slogan }}</p>
    <section class="surroundings">
        <h2 class="sr-only">{{( pgettext "Surroundings" "title" )}}</h2>
        <div class="carousel">
            <div class="spiel">
                <p>{{(gettext "Located in <strong>Alta Garrotxa</strong>, between the <strong>Pyrenees</strong> and the <strong>Costa Brava</strong>.") | raw}}</p>
                <p>{{(gettext "Nearby there are the <strong>gorges of Sadernes</strong>, <strong>volcanoes</strong>, <strong>La Fageda d’en Jordà</strong>, the Jewish quarter of <strong>Besalú</strong>, the basaltic cliff of <strong>Castellfollit de la Roca</strong>… much to see and much to do.") | raw}}</p>
                <p>{{(gettext "Less than an hour from <strong>Girona</strong>, one from <strong>La Bisbal d’Empordà</strong>, and two from <strong>Barcelona</strong>.") | raw}}</p>
                <p><a href="/{{currentLocale}}/surroundings">{{( gettext "Discover the surroundings" )}} <span>→</span></a></p>
            </div>
            {{ range .Carousel -}}
                {{ if .Caption -}}
                    <figure>
                        <img src="{{ .Media }}" alt=""/>
                        <figcaption>{{ .Caption }}</figcaption>
                    </figure>
                {{- else -}}
                    <img src="{{ .Media }}" alt=""/>
                {{- end }}
            {{- end }}
        </div>
    </section>

    {{ template "carouselInit" 4 }}
    <script>
        jQuery(function () {
            jQuery('.hero div[role="marquee"]').slick({
                slidesToShow: 1,
                infinite: true,
                arrows: true,
                prevArrow: '<button type="button" class="slick-prev">←</button>',
                nextArrow: '<button type="button" class="slick-next">→</button>',
                autoplay: true,
                autoplaySpeed: 4000,
            });
        });
    </script>
{{- end }}
