<!--
 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 "Surroundings" "title" )}}
{{- end }}

{{ define "content" -}}
    {{- /*gotype: dev.tandem.ws/tandem/camper/pkg/surroundings.surroundingsPage*/ -}}
    <h2>{{( pgettext "Surroundings" "title" )}}</h2>

    <section>
        <div class="ad-container">
            <div class="ad-image-container"></div>
            <div class="ad-description-container">
                <h3 class="ad-title">Vine a fer barranquisme per Sadernes!</h3>
                <a class="ad-button" href="#">Reserva el teu dia<span class="ad-icon">
                    <svg viewBox="0 0 93.69895 67.38545"
                         xmlns="http://www.w3.org/2000/svg"
                         class="arrow_link">
                        <path d="m67.38545,67.38545l-13.49997-2.97457c.57203-5.72033,2.74576-10.99256,6.52117-15.8167,3.77542-4.82414,8.04659-7.94172,12.81353-9.35273H0v-11.09743h73.22018c-4.76694-1.41101-9.03812-4.53813-12.81353-9.38134-3.77542-4.84321-5.94914-10.12498-6.52117-15.8453l13.49997-2.91737c.26695,8.38981,2.70762,15.01586,7.32202,19.87813s10.94489,7.61757,18.99148,8.26587v11.09743c-8.04659.6483-14.37709,3.40359-18.99148,8.26587-4.6144,4.86228-7.05507,11.48832-7.32202,19.87813Z"/>
                    </svg>
                </span>
                </a>
            </div>
        </div>
    </section>

    <section class="outside_activities">
        <h3>{{( pgettext "What to Do Outside the Campsite?" "title" )}}</h3>

        {{ with .Highlights -}}
            <ul>
                {{ range . -}}
                    <li>
                        <article>
                            <div>
                                <h4>{{ .Name }}</h4>
                                {{ .Description }}
                            </div>
                            <img src="{{ .Media }}" alt="">
                        </article>
                    </li>
                {{- end }}
            </ul>
        {{- end }}
    </section>

    <section class="campsite_activities">
        <h3>{{( pgettext "Once at the Campsite, We Can Inform You about What Activities are Available" "title" )}}</h3>
        <dl>
            <div>
                <dt class="icon_bicycle">{{( gettext "Cycle routes" )}}</dt>
                <dd>{{( gettext "There are many bicycle rental companies in Olot." )}}</dd>
            </div>

            <div>
                <dt class="icon_route">{{( gettext "Routes" )}}</dt>
                <dd>{{( gettext "Routes of all kinds, climbing, mountain passes, for all levels." )}}</dd>
            </div>

            <div>
                <dt class="icon_outing">{{( gettext "Family outing")}}</dt>
                <dd>{{( gettext "Many outing possibilities, for all ages." )}}</dd>
            </div>

            <div>
                <dt class="icon_kayak">{{( gettext "Kayak")}}</dt>
                <dd>{{( gettext "There are several points where you can go by kayak, from sections of the Ter river as well as on the coast…." )}}</dd>
            </div>
        </dl>
    </section>
{{- end }}
