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

{{ define "head" -}}
    <link rel="stylesheet" media="screen" href="/static/slick@1.8.1.css">
{{- end }}

{{ define "content" -}}
    <section class="nature">
        <div style="--background-image:url('/static/images/todd-trapani-5LHzBpiTuzQ-unsplash.jpg')">
            <h2>{{ (gettext "The pleasure of camping in the middle of nature…")}}</h2>
            <a href="/{{ currentLocale }}/reservation">{{( pgettext "Booking" "link" )}} <span>→</span></a>
        </div>
        {{ with .Menu.CampsiteTypes -}}
            <div>
                {{ range . -}}
                    <section style="--background-image:url('/static/images/camping_montagut_acampada_tenda.jpg')">
                        <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>
    <section class="environment">
        <h2 class="sr-only">{{ (gettext "Environment")}}</h2>
        <div>
            <div class="spiel">
                <p>Situats a l’<strong>Alta Garrotxa</strong>, entre els <strong>Pirineus</strong> i la <strong>Costa
                        Brava</strong>.</p>
                <p>A prop teniu els <strong>gorgs de Sadernes</strong>, <strong>volcans</strong>, <strong>La Fageda d’en
                        Jordà</strong>, el call jueu de <strong>Besalú</strong>, la cinglera basàltica de <strong>Castellfollit
                        de la Roca</strong>… molt per veure i molt per fer.</p>
                <p>A menys d’una hora de <strong>Girona</strong>, a una de <strong>La Bisbal d’Empordà</strong> i a dues
                    de
                    <strong>Barcelona</strong>.</p>
                <p><a href="/{{currentLocale}}/environment/">Descobreix l’entorn <span>→</span></a></p>
            </div>
            <figure>
                <img src="/static/images/Volca_de_Santa_Margarida.jpg" alt=""/>
                <figcaption>{{( gettext "Legend" )}}</figcaption>
            </figure>
            <figure>
                <img src="/static/images/Gorga_fosca_Sadernes.jpg" alt=""/>
                <figcaption>{{( gettext "Legend" )}}</figcaption>
            </figure>
            <figure>
                <img src="/static/images/castellfolit_de_la_roca.jpg" alt=""/>
                <figcaption>{{( gettext "Legend" )}}</figcaption>
            </figure>
            <figure>
                <img src="/static/images/besalu.jpg" alt=""/>
                <figcaption>{{( gettext "Legend" )}}</figcaption>
            </figure>
            <figure>
                <img src="/static/images/santa_pau.jpg" alt=""/>
                <figcaption>{{( gettext "Legend" )}}</figcaption>
            </figure>
            <figure>
                <img src="/static/images/banyoles.jpg" alt=""/>
                <figcaption>{{( gettext "Legend" )}}</figcaption>
            </figure>
            <figure>
                <img src="/static/images/girn-a.jpg" alt=""/>
                <figcaption>{{( gettext "Legend" )}}</figcaption>
            </figure>
            <figure>
                <img src="/static/images/costa_brava.jpg" alt=""/>
                <figcaption>{{( gettext "Legend" )}}</figcaption>
            </figure>
            <figure>
                <img src="/static/images/barcelona-1.jpg" alt=""/>
                <figcaption>{{( gettext "Legend" )}}</figcaption>
            </figure>
        </div>
    </section>
    <p class="enjoy">{{( gettext "Come and enjoy!")}}</p>

    <script src="/static/jquery@3.7.1.min.js"></script>
    <script src="/static/slick@1.8.1.min.js"></script>
    <script>
        jQuery(function () {
            jQuery('.environment > div').slick({
                slidesToShow: 2,
                slidesToScroll: 1,
                infinite: false,
                arrows: true,
                prevArrow: '<button type="button" class="slick-prev">←</button>',
                nextArrow: '<button type="button" class="slick-next">→</button>',
                responsive: [
                    {
                        breakpoint: 768,
                        settings: {
                            slidesToShow: 1,
                        }
                    },
                ]
            });
        });
    </script>
{{- end }}
