{% extends 'public/base.html.twig' %}
{% trans_default_domain 'public' %}
{% import 'public/_icons.html.twig' as icons %}

{% block title %}{{ page.title }}{% endblock %}

{% block meta %}
    <meta name="description" content="{{ page.metaDescription }}">
    <link rel="canonical" href="{{ page.canonicalUrl }}">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="{{ page.landlordName }}">
    <meta property="og:title" content="{{ page.title }}">
    <meta property="og:description" content="{{ page.metaDescription }}">
    <meta property="og:url" content="{{ page.canonicalUrl }}">
    {% if page.ogImage %}
        <meta property="og:image" content="{{ page.ogImage }}">
    {% endif %}
    <meta name="twitter:card" content="{{ page.ogImage ? 'summary_large_image' : 'summary' }}">
    <script type="application/ld+json">{{ page.jsonLd|raw }}</script>
{% endblock %}

{% block body %}
    {% import _self as forms %}
    {% set hasDetails = page.facts is not empty or page.descriptionHtml %}

    <header class="pu-nav" data-nav>
        <div class="pu-container pu-nav__inner">
            <span class="pu-brand">
                <span class="pu-brand__mark" aria-hidden="true">{{ page.landlordName|first|upper }}</span>
                <span class="pu-brand__name">{{ page.landlordName }}</span>
            </span>
            <nav class="pu-nav__links" aria-label="{{ 'nav.label'|trans }}">
                {% if page.photos %}<a href="#fotos">{{ 'nav.photos'|trans }}</a>{% endif %}
                {% if hasDetails %}<a href="#detalles">{{ 'nav.details'|trans }}</a>{% endif %}
                {% if page.map %}<a href="#ubicacion">{{ 'nav.location'|trans }}</a>{% endif %}
            </nav>
            {% if apply %}
                <a class="pu-btn pu-btn--apply pu-nav__cta" href="{{ apply.url }}">
                    {{ icons.icon('file') }}<span>{{ 'apply.navCta'|trans }}</span>
                </a>
            {% else %}
                <a class="pu-btn pu-btn--primary pu-nav__cta" href="#contacto">
                    {{ icons.icon('calendar') }}<span>{{ 'nav.cta'|trans }}</span>
                </a>
            {% endif %}
        </div>
    </header>

    <section id="fotos" class="pu-container pu-gallery" aria-label="{{ 'nav.photos'|trans }}">
        {% if page.photos %}
            <div class="pu-gallery__grid" data-count="{{ min(page.photos|length, 5) }}">
                {% for photo in page.photos %}
                    <a class="pu-gallery__item" href="{{ photo.url }}" data-photo aria-label="{{ 'lightbox.open'|trans({n: loop.index}) }}">
                        <img src="{{ photo.url }}" alt="{{ photo.alt }}" decoding="async" {% if loop.first %}fetchpriority="high"{% else %}loading="lazy"{% endif %}>
                    </a>
                {% endfor %}
            </div>
            {% if page.photos|length > 1 %}
                <button type="button" class="pu-gallery__all" data-photo-open="0">
                    {{ icons.icon('grid') }}<span>{{ 'hero.allPhotos'|trans({count: page.photos|length}) }}</span>
                </button>
            {% endif %}
        {% else %}
            <div class="pu-gallery__empty">
                {{ icons.icon('sparkle') }}
                <p class="pu-gallery__empty-title">{{ page.unitName }}</p>
                <p>{{ page.propertyName }}</p>
            </div>
        {% endif %}
    </section>

    <div class="pu-container pu-layout">
        <main class="pu-main">
            <div class="pu-heading">
                <span class="pu-badge"><span class="pu-badge__dot" aria-hidden="true"></span>{{ 'hero.available'|trans }}</span>
                <h1 class="pu-title">{{ page.unitName }} <span class="pu-title__property">{{ page.propertyName }}</span></h1>
                <p class="pu-address">{{ icons.icon('pin') }}<span>{{ page.address }}</span></p>
            </div>

            {% if page.facts %}
                <ul id="detalles" class="pu-facts">
                    {% for fact in page.facts %}
                        <li class="pu-fact">{{ icons.icon(fact.icon) }}<span>{{ fact.label }}</span></li>
                    {% endfor %}
                </ul>
            {% endif %}

            {% if page.descriptionHtml %}
                <section class="pu-section" {% if page.facts is empty %}id="detalles"{% endif %}>
                    <h2 class="pu-section__title">{{ 'sections.about'|trans }}</h2>
                    <div class="pu-richtext">{{ page.descriptionHtml|raw }}</div>
                </section>
            {% endif %}

            {% if page.amenities %}
                <section class="pu-section">
                    <h2 class="pu-section__title">{{ 'sections.amenities'|trans }}</h2>
                    <ul class="pu-amenities">
                        {% for amenity in page.amenities %}
                            <li>{{ icons.icon('check') }}<span>{{ amenity }}</span></li>
                        {% endfor %}
                    </ul>
                </section>
            {% endif %}

            {% if page.videos %}
                <section class="pu-section">
                    <h2 class="pu-section__title">{{ 'sections.videos'|trans }}</h2>
                    <div class="pu-videos">
                        {% for video in page.videos %}
                            <div class="pu-video">
                                {% if video.embedUrl %}
                                    <iframe src="{{ video.embedUrl }}" title="{{ 'video.title'|trans({n: loop.index, unit: page.unitName}) }}" loading="lazy" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen" allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe>
                                {% else %}
                                    <video controls playsinline preload="metadata" aria-label="{{ 'video.title'|trans({n: loop.index, unit: page.unitName}) }}">
                                        <source src="{{ video.url }}" type="{{ video.mimeType }}">
                                    </video>
                                {% endif %}
                            </div>
                        {% endfor %}
                    </div>
                </section>
            {% endif %}

            {% if page.map %}
                <section id="ubicacion" class="pu-section">
                    <h2 class="pu-section__title">{{ 'sections.location'|trans }}</h2>
                    <div class="pu-map" data-map data-lat="{{ page.map.latitude }}" data-lng="{{ page.map.longitude }}" role="img" aria-label="{{ 'sections.mapLabel'|trans({unit: page.unitName}) }}"></div>
                    <div class="pu-map__footer">
                        <p class="pu-address">{{ icons.icon('pin') }}<span>{{ page.address }}</span></p>
                        <div class="pu-map__links">
                            <a class="pu-link" href="{{ page.map.directionsUrl }}" target="_blank" rel="noopener noreferrer">{{ 'sections.directions'|trans }} {{ icons.icon('arrow') }}</a>
                            <a class="pu-link pu-link--muted" href="{{ page.map.osmUrl }}" target="_blank" rel="noopener noreferrer">{{ 'sections.openMap'|trans }}</a>
                        </div>
                    </div>
                </section>
            {% endif %}

            <section class="pu-section pu-steps">
                <h2 class="pu-section__title">{{ 'steps.title'|trans }}</h2>
                <ol class="pu-steps__list">
                    {% for step in [{key: 'one', icon: 'chat'}, {key: 'two', icon: 'calendar'}, {key: 'three', icon: 'key'}] %}
                        {# With bookings on, the first two steps swap round: you pick the time yourself. #}
                        {% set prefix = visit and step.key != 'three' ? 'steps.booking.' : 'steps.' %}
                        <li class="pu-step">
                            <span class="pu-step__icon">{{ icons.icon(step.icon) }}</span>
                            <h3>{{ (prefix ~ step.key ~ '.title')|trans }}</h3>
                            <p>{{ (prefix ~ step.key ~ '.body')|trans({landlord: page.landlordName}) }}</p>
                        </li>
                    {% endfor %}
                </ol>
            </section>
        </main>

        <aside class="pu-aside">
            {% if apply %}
                {# The main thing the landlord wants people to do: deliberately louder than the rest of the page. #}
                <a class="pu-apply-cta" href="{{ apply.url }}">
                    <span class="pu-apply-cta__glow" aria-hidden="true"></span>
                    <span class="pu-apply-cta__body">
                        <span class="pu-apply-cta__eyebrow">{{ 'apply.ctaEyebrow'|trans }}</span>
                        <strong class="pu-apply-cta__title">{{ 'apply.ctaTitle'|trans }}</strong>
                        <span class="pu-apply-cta__meta">{{ 'apply.ctaMeta'|trans({count: apply.count}) }}</span>
                    </span>
                    <span class="pu-apply-cta__icon" aria-hidden="true">{{ icons.icon('arrow') }}</span>
                </a>
            {% endif %}

            <div id="contacto" class="pu-card">
                <div class="pu-price">
                    {% if page.price %}
                        <span class="pu-price__label">{{ 'price.label'|trans }}</span>
                        <span class="pu-price__amount">{{ page.price }}<span class="pu-price__period">{{ 'price.perMonth'|trans }}</span></span>
                    {% else %}
                        <span class="pu-price__amount pu-price__amount--small">{{ 'price.onRequest'|trans }}</span>
                    {% endif %}
                    {% if page.factsShort %}<span class="pu-price__facts">{{ page.factsShort }}</span>{% endif %}
                </div>

                {% if booked %}
                    <div class="pu-sent" role="status">
                        <span class="pu-sent__icon">{{ icons.icon('check') }}</span>
                        <h2>{{ 'visit.bookedTitle'|trans }}</h2>
                        <p class="pu-sent__when">{{ booked }}</p>
                        <p>{{ 'visit.bookedBody'|trans({landlord: page.landlordName}) }}</p>
                        {% if visit and visit.notice %}<p class="pu-sent__notice">{{ visit.notice }}</p>{% endif %}
                    </div>
                {% elseif sent %}
                    <div class="pu-sent" role="status">
                        <span class="pu-sent__icon">{{ icons.icon('check') }}</span>
                        <h2>{{ 'contact.sentTitle'|trans }}</h2>
                        <p>{{ 'contact.sentBody'|trans({landlord: page.landlordName}) }}</p>
                    </div>
                {% else %}
                    {% if visit %}
                        {# Two ways to reach the landlord; the tabs are plain radio inputs so they work without JavaScript. #}
                        <div class="pu-tabs" role="group" aria-label="{{ 'visit.tabsLabel'|trans }}">
                            <input type="radio" name="pu-tab" id="pu-tab-visit" class="pu-tabs__input" {{ tab == 'visit' ? 'checked' : '' }}>
                            <label class="pu-tabs__label" for="pu-tab-visit">{{ icons.icon('calendar') }}<span>{{ 'visit.tabSchedule'|trans }}</span></label>
                            <input type="radio" name="pu-tab" id="pu-tab-contact" class="pu-tabs__input" {{ tab == 'contact' ? 'checked' : '' }}>
                            <label class="pu-tabs__label" for="pu-tab-contact">{{ icons.icon('chat') }}<span>{{ 'visit.tabMessage'|trans }}</span></label>

                            <div class="pu-tabs__panel pu-tabs__panel--visit">
                                <h2 class="pu-card__title">{{ 'visit.title'|trans }}</h2>
                                <p class="pu-card__subtitle">{{ 'visit.subtitle'|trans({landlord: page.landlordName, minutes: visit.slotMinutes}) }}</p>

                                {% if formError and tab == 'visit' %}
                                    <p class="pu-form-error" role="alert">{{ formError|trans }}</p>
                                {% elseif errors and tab == 'visit' %}
                                    <p class="pu-form-error" role="alert">{{ 'contact.errors.form'|trans }}</p>
                                {% endif %}

                                <form class="pu-form" method="post" action="{{ path('public_unit_visit', {id: page.id}) }}" novalidate data-visit-form>
                                    <div class="pu-slots" data-slots>
                                        <span class="pu-field__label">{{ 'visit.pickDay'|trans }}</span>
                                        {# Without JavaScript every day is listed in full below, so the day picker stays hidden until the script enables it. #}
                                        <div class="pu-days" role="tablist" hidden data-days>
                                            {% for day in visit.days %}
                                                <button type="button" class="pu-day{{ loop.first ? ' is-selected' : '' }}" data-day="{{ day.date }}" role="tab" aria-selected="{{ loop.first ? 'true' : 'false' }}">
                                                    <span class="pu-day__weekday">{{ day.weekday }}</span>
                                                    <span class="pu-day__date">{{ day.label }}</span>
                                                    <span class="pu-day__count">{{ 'visit.slotCount'|trans({count: day.slots|length}) }}</span>
                                                </button>
                                            {% endfor %}
                                        </div>

                                        {% for day in visit.days %}
                                            <fieldset class="pu-slotgroup" data-day-slots="{{ day.date }}">
                                                <legend class="pu-field__label">{{ 'visit.pickTime'|trans({day: day.label}) }}</legend>
                                                <div class="pu-slotgrid">
                                                    {% for slot in day.slots %}
                                                        <label class="pu-slot">
                                                            <input type="radio" name="slot" value="{{ slot.value }}" {{ values.slot == slot.value ? 'checked' : '' }} required>
                                                            <span>{{ slot.time }}</span>
                                                        </label>
                                                    {% endfor %}
                                                </div>
                                            </fieldset>
                                        {% endfor %}
                                        {% if errors.slot is defined %}<small class="pu-field__error">{{ errors.slot|trans }}</small>{% endif %}
                                    </div>

                                    {% for field in [{name: 'fullName', type: 'text', autocomplete: 'name', max: 180}, {name: 'email', type: 'email', autocomplete: 'email', max: 180}, {name: 'phone', type: 'tel', autocomplete: 'tel', max: 50}] %}
                                        <label class="pu-field{% if errors[field.name] is defined %} pu-field--invalid{% endif %}">
                                            <span class="pu-field__label">
                                                {{ ('contact.' ~ field.name)|trans }}
                                                {% if field.name == 'phone' %}<span class="pu-field__optional">{{ 'contact.optional'|trans }}</span>{% endif %}
                                            </span>
                                            <input type="{{ field.type }}" name="{{ field.name }}" value="{{ values[field.name] }}" autocomplete="{{ field.autocomplete }}" maxlength="{{ field.max }}" {% if field.name != 'phone' %}required{% endif %}{% if errors[field.name] is defined %} aria-invalid="true"{% endif %}>
                                            {% if errors[field.name] is defined %}<small class="pu-field__error">{{ errors[field.name]|trans }}</small>{% endif %}
                                        </label>
                                    {% endfor %}

                                    <label class="pu-field{% if errors.message is defined %} pu-field--invalid{% endif %}">
                                        <span class="pu-field__label">
                                            {{ 'visit.note'|trans }}<span class="pu-field__optional">{{ 'contact.optional'|trans }}</span>
                                        </span>
                                        <textarea name="message" rows="2" maxlength="2000" placeholder="{{ 'visit.notePlaceholder'|trans }}"{% if errors.message is defined %} aria-invalid="true"{% endif %}></textarea>
                                        {% if errors.message is defined %}<small class="pu-field__error">{{ errors.message|trans }}</small>{% endif %}
                                    </label>

                                    <div class="pu-hp" aria-hidden="true">
                                        <label>Website <input type="text" name="website" tabindex="-1" autocomplete="off"></label>
                                    </div>

                                    <button class="pu-btn pu-btn--primary pu-btn--block pu-btn--lg" type="submit">
                                        <span>{{ 'visit.submit'|trans }}</span>{{ icons.icon('arrow') }}
                                    </button>
                                    <p class="pu-privacy">{{ icons.icon('lock') }}<span>{{ 'visit.privacy'|trans({landlord: page.landlordName}) }}</span></p>
                                </form>
                            </div>

                            <div class="pu-tabs__panel pu-tabs__panel--contact">
                                {{ forms.contactForm(page, values, errors, formError, tab) }}
                            </div>
                        </div>
                    {% else %}
                        {{ forms.contactForm(page, values, errors, formError, tab) }}
                    {% endif %}
                {% endif %}
            </div>

            <button type="button" class="pu-share" data-share data-title="{{ page.title }}" data-copied="{{ 'share.copied'|trans }}">
                {{ icons.icon('share') }}<span>{{ 'share.button'|trans }}</span>
            </button>
        </aside>
    </div>

    <footer class="pu-footer">
        <div class="pu-container pu-footer__inner">
            <span>{{ 'footer.publishedBy'|trans({landlord: page.landlordName}) }}</span>
            <span>© {{ 'now'|date('Y') }}</span>
        </div>
    </footer>

    <div class="pu-mobilebar" data-mobilebar>
        <div class="pu-mobilebar__price">
            {% if page.price %}
                <strong>{{ page.price }}</strong><span>{{ 'price.perMonth'|trans }}</span>
            {% else %}
                <strong>{{ 'price.onRequest'|trans }}</strong>
            {% endif %}
        </div>
        {% if apply %}
            <a class="pu-btn pu-btn--apply" href="{{ apply.url }}">{{ 'apply.navCta'|trans }}</a>
        {% else %}
            <a class="pu-btn pu-btn--primary" href="#contacto">{{ (visit ? 'mobile.ctaVisit' : 'mobile.cta')|trans }}</a>
        {% endif %}
    </div>

    {% if page.photos %}
        <dialog class="pu-lightbox" data-lightbox aria-label="{{ 'lightbox.label'|trans({unit: page.unitName}) }}">
            <button type="button" class="pu-lightbox__btn pu-lightbox__close" data-lightbox-close aria-label="{{ 'lightbox.close'|trans }}">{{ icons.icon('close') }}</button>
            <button type="button" class="pu-lightbox__btn pu-lightbox__prev" data-lightbox-prev aria-label="{{ 'lightbox.previous'|trans }}">{{ icons.icon('left') }}</button>
            <figure class="pu-lightbox__stage" data-lightbox-stage>
                <img data-lightbox-image alt="">
                <figcaption class="pu-lightbox__counter" data-lightbox-counter aria-live="polite"></figcaption>
            </figure>
            <button type="button" class="pu-lightbox__btn pu-lightbox__next" data-lightbox-next aria-label="{{ 'lightbox.next'|trans }}">{{ icons.icon('right') }}</button>
        </dialog>
    {% endif %}
{% endblock %}

{#
  The message form, shown on its own when the property takes no bookings and as the second tab when it does.
  Macros get no outer context, so everything it renders is passed in.
#}
{% macro contactForm(page, values, errors, formError, tab) %}
    {# An import is a compile-time symbol, not a context variable, so the macro imports the icons itself. #}
    {% import 'public/_icons.html.twig' as icons %}
    <h2 class="pu-card__title">{{ 'contact.title'|trans }}</h2>
    <p class="pu-card__subtitle">{{ 'contact.subtitle'|trans({landlord: page.landlordName}) }}</p>

    {% if (formError or errors) and tab == 'contact' %}
        <p class="pu-form-error" role="alert">{{ (formError ?? 'contact.errors.form')|trans }}</p>
    {% endif %}

    <form class="pu-form" method="post" action="{{ path('public_unit_contact', {id: page.id}) }}" novalidate data-contact-form>
        {% for field in [{name: 'fullName', type: 'text', autocomplete: 'name', max: 180}, {name: 'email', type: 'email', autocomplete: 'email', max: 180}, {name: 'phone', type: 'tel', autocomplete: 'tel', max: 50}] %}
            <label class="pu-field{% if errors[field.name] is defined %} pu-field--invalid{% endif %}">
                <span class="pu-field__label">
                    {{ ('contact.' ~ field.name)|trans }}
                    {% if field.name == 'phone' %}<span class="pu-field__optional">{{ 'contact.optional'|trans }}</span>{% endif %}
                </span>
                <input type="{{ field.type }}" name="{{ field.name }}" value="{{ values[field.name] }}" autocomplete="{{ field.autocomplete }}" maxlength="{{ field.max }}" {% if field.name != 'phone' %}required{% endif %}{% if errors[field.name] is defined %} aria-invalid="true"{% endif %}>
                {% if errors[field.name] is defined %}<small class="pu-field__error">{{ errors[field.name]|trans }}</small>{% endif %}
            </label>
        {% endfor %}

        <div class="pu-field{% if errors.message is defined %} pu-field--invalid{% endif %}">
            <label class="pu-field__label" for="pu-message">{{ 'contact.message'|trans }}</label>
            <div class="pu-quick">
                {% for key in ['quickVisit', 'quickIncludes', 'quickRequirements'] %}
                    <button type="button" class="pu-chip" data-message="{{ ('contact.' ~ key ~ 'Message')|trans({unit: page.unitName}) }}" aria-pressed="false">{{ ('contact.' ~ key)|trans }}</button>
                {% endfor %}
            </div>
            <textarea id="pu-message" name="message" rows="4" maxlength="2000" required{% if errors.message is defined %} aria-invalid="true"{% endif %}>{{ values.message }}</textarea>
            {% if errors.message is defined %}<small class="pu-field__error">{{ errors.message|trans }}</small>{% endif %}
        </div>

        <div class="pu-hp" aria-hidden="true">
            <label>Website <input type="text" name="website" tabindex="-1" autocomplete="off"></label>
        </div>

        <button class="pu-btn pu-btn--primary pu-btn--block pu-btn--lg" type="submit">
            <span>{{ 'contact.submit'|trans }}</span>{{ icons.icon('arrow') }}
        </button>
        <p class="pu-privacy">{{ icons.icon('lock') }}<span>{{ 'contact.privacy'|trans({landlord: page.landlordName}) }}</span></p>
    </form>
{% endmacro %}