<!--
 SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
 SPDX-License-Identifier: AGPL-3.0-only
-->
{{ define "title" -}}
    {{- /*gotype: dev.tandem.ws/tandem/camper/pkg/campsite/types.publicPage*/ -}}
    {{ .Name }}
{{- end }}

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

{{ define "content" -}}
    {{- /*gotype: dev.tandem.ws/tandem/camper/pkg/campsite/types.publicPage*/ -}}
    <h2 class="campsite_type_title">{{ .Name }}</h2>

    {{ with .Carousel -}}
        <div class="campsite_type carousel">
            <div class="spiel">
                {{ $.Spiel }}
            </div>
            {{ range . -}}
                {{ if .Caption -}}
                    <figure>
                        <img src="{{ .Media }}" alt=""/>
                        <figcaption>{{ .Caption }}</figcaption>
                    </figure>
                {{- else -}}
                    <img src="{{ .Media }}" alt=""/>
                {{- end }}
            {{- end }}
        </div>
    {{- end }}

    <form action="/{{ currentLocale }}/booking" method="get" class="campsite_type_booking"
          data-hx-include="this"
    >
        <input type="hidden" name="campsite_type" value="{{ .Slug }}">
        <fieldset
                data-hx-get="/{{ currentLocale }}/campsites/types/{{ .Slug }}/dates"
                data-hx-trigger="change"
                data-hx-target="this"
        >
            {{ template "dates.gohtml" .BookingDates }}
        </fieldset>
        <footer>
            <button type="submit">{{( pgettext "Book" "action" )}} <span>→</span></button>
        </footer>
    </form>

    <div class="campsite_type_calendar_prices">
        <article class="campsite_type_calendar">
            {{- /*gotype: dev.tandem.ws/tandem/camper/pkg/season.Calendar*/ -}}
            <header>
                <h3 class="sr-only">{{( pgettext "Calendar" "title" )}}</h3>
                <button type="button"><span class="sr-only">{{ pgettext "Prev" "navigation" }}</span></button>
                <button type="button"><span class="sr-only">{{ pgettext "Next" "navigation" }}</span></button>
            </header>
            <div>
                {{ template "calendar.gohtml" .Calendar }}
            </div>
        </article>

        {{ with .Prices -}}
            <article class="campsite_type_prices">
                <h3 class="sr-only">{{( pgettext "Prices" "title" )}}</h3>
                <dl>
                    {{ range . -}}
                        <div x-data="{open: false}">
                            <dt @click="open = !open" :class="open && 'open'">
                                <svg width="30px" height="30px">
                                    <circle cx="50%" cy="50%" r="49%" fill="{{ .SeasonColor }}"/>
                                </svg>
                                {{ .SeasonName }}
                            </dt>
                            {{ range .Options }}
                                <dd x-show="open">
                                    {{- if .OptionName -}}
                                        {{ if .PerNight -}}
                                            {{ printf (gettext "%s: %s/night") .OptionName (formatPrice .Price) }}
                                        {{- else -}}
                                            {{ printf (gettext "%s: %s") .OptionName (formatPrice .Price) }}
                                        {{- end }}
                                    {{- else -}}
                                        {{ if .PerNight -}}
                                            {{ printf (gettext "%s/night") (formatPrice .Price) }}
                                        {{- else -}}
                                            {{ formatPrice .Price }}
                                        {{- end }}
                                    {{- end -}}
                                </dd>
                            {{- end }}
                            {{ if gt $.BookingDates.MinNights 1 -}}
                                <dd x-show="open">{{ printf (gettext "*Minimum %d nights per stay") $.BookingDates.MinNights }}</dd>
                            {{- end }}
                        </div>
                    {{- end }}
                </dl>
                <p>{{( gettext "10 % VAT included." )}}</p>
                <p>{{printf (gettext "Tourist tax: %s/night per person aged 17 or older.") (formatPrice $.TouristTax)}}</p>
                {{ if $.DogsAllowed -}}
                    <p class="pets_warning icon_pet">{{printf (gettext "Dogs: %s/night, tied, accompanied, and minimal barking.") (formatPrice $.DogsPrice)}}</p>
                {{- else -}}
                    <p class="pets_warning icon_nopet">{{( gettext "No dogs allowed." )}}</p>
                {{- end }}
            </article>
        {{- end }}
    </div>

    {{ with .Features -}}
        <article class="campsite_type_features">
            <h3 class="sr-only">{{( pgettext "Features" "title" )}}</h3>
            <ul>
                {{ range . -}}
                    <li class="icon_{{ .Icon }}">{{ .Name }}</li>
                {{- end }}
            </ul>
        </article>
    {{- end }}

    <article class="campsite_type_detail">
        <section>
            <h3 class="sr-only">{{( pgettext "Info" "title" )}}</h3>
            {{ .Info }}
        </section>
        <section>
            <h3 class="sr-only">{{( pgettext "Facilities" "title" )}}</h3>
            {{ .Facilities }}
        </section>
        <section>
            <h3 class="sr-only">{{( pgettext "Description" "title" )}}</h3>
            {{ .Description }}
        </section>
        <section>
            <h3 class="sr-only">{{( pgettext "Additional Information" "title" )}}</h3>
            <dl class="checkin-checkout">
                <div>
                    <dt>{{( pgettext "Check-in" "time" )}}</dt>
                    <dd>{{ .CheckIn }}</dd>
                </div>
                <div>
                    <dt>{{( pgettext "Check-out" "time" )}}</dt>
                    <dd>{{ .CheckOut }}</dd>
                </div>
            </dl>
            {{ .AdditionalInfo }}
        </section>
    </article>

    {{ template "carouselInit" 3 }}

    <script>
        (function () {
            'use strict';

            const calendar = document.querySelector('.campsite_type_calendar');
            const carousel = calendar.querySelector('div');
            const month = carousel.querySelector('table');

            const left = calendar.querySelector('header button:first-of-type');
            left.addEventListener('click', () => carousel.scrollLeft -= month.clientWidth);

            const right = calendar.querySelector('header button:last-of-type');
            right.addEventListener('click', () => carousel.scrollLeft += month.clientWidth);
        })();

        (function () {
            'use strict';
            const arrivalDate = document.querySelector('input[name="arrival_date"]');
            if (arrivalDate && arrivalDate.value !== '') {
                const load = htmx.on('htmx:load', function () {
                    htmx.off('htmx:load', load);
                    htmx.trigger(arrivalDate, 'change', {bubbles: true});
                });
            }
        })();
    </script>
{{- end }}
