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

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

{% block meta %}
    {# An application form has nothing to offer a search engine, and the unit page is the page worth indexing. #}
    <meta name="robots" content="noindex">
{% endblock %}

{% block body %}
    <header class="pu-nav" data-nav>
        <div class="pu-container pu-nav__inner">
            <a class="pu-brand" href="{{ page.unitUrl }}">
                <span class="pu-brand__mark" aria-hidden="true">{{ page.landlordName|first|upper }}</span>
                <span class="pu-brand__name">{{ page.landlordName }}</span>
            </a>
            <a class="pu-link pu-link--muted" href="{{ page.unitUrl }}">{{ icons.icon('left') }} {{ 'apply.backToUnit'|trans }}</a>
        </div>
    </header>

    <div class="pu-container pu-apply">
        {% if sent %}
            <div class="pu-card pu-apply__done">
                <div class="pu-sent" role="status">
                    <span class="pu-sent__icon">{{ icons.icon('check') }}</span>
                    <h1>{{ 'apply.sentTitle'|trans }}</h1>
                    <p>{{ 'apply.sentBody'|trans({landlord: page.landlordName, unit: page.unitName}) }}</p>
                    <a class="pu-btn pu-btn--primary pu-btn--lg" href="{{ page.unitUrl }}">{{ 'apply.backToUnit'|trans }}</a>
                </div>
            </div>
        {% else %}
            <div class="pu-apply__intro">
                <span class="pu-badge"><span class="pu-badge__dot" aria-hidden="true"></span>{{ 'apply.badge'|trans }}</span>
                <h1 class="pu-title">{{ 'apply.title'|trans }}</h1>
                <p class="pu-apply__lead">{{ 'apply.lead'|trans({unit: page.unitName, property: page.propertyName, landlord: page.landlordName}) }}</p>
            </div>

            <div class="pu-card">
                {% if formError or errors %}
                    <p class="pu-form-error" role="alert">{{ formError is defined and formError ? formError|trans : 'apply.errors.form'|trans }}</p>
                {% endif %}

                <form class="pu-form" method="post" action="{{ path('public_unit_apply_submit', {id: page.id}) }}" enctype="multipart/form-data" novalidate>
                    <h2 class="pu-card__title">{{ 'apply.aboutYou'|trans }}</h2>
                    <div class="pu-grid2">
                        {% for field in [{name: 'firstName', type: 'text', autocomplete: 'given-name', max: 120}, {name: 'lastName', type: 'text', autocomplete: 'family-name', max: 120}, {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">{{ ('apply.' ~ field.name)|trans }}</span>
                                <input type="{{ field.type }}" name="{{ field.name }}" value="{{ values[field.name] }}" autocomplete="{{ field.autocomplete }}" maxlength="{{ field.max }}" required{% 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>

                    <h2 class="pu-card__title pu-apply__docsTitle">{{ 'apply.documents'|trans }}</h2>
                    <p class="pu-card__subtitle">{{ 'apply.documentsHelp'|trans }}</p>

                    <ol class="pu-docs">
                        {% for requirement in requirements %}
                            <li class="pu-doc{% if errors[requirement.field] is defined %} pu-doc--invalid{% endif %}">
                                <div class="pu-doc__head">
                                    <span class="pu-doc__label">{{ requirement.label }}</span>
                                    <span class="pu-doc__tag{{ requirement.required ? '' : ' pu-doc__tag--optional' }}">
                                        {{ (requirement.required ? 'apply.required' : 'apply.optionalDoc')|trans }}
                                    </span>
                                </div>
                                {% if requirement.description %}<p class="pu-doc__hint">{{ requirement.description }}</p>{% endif %}
                                <input type="file" name="documents[{{ requirement.key }}]" accept=".pdf,.doc,.docx,image/jpeg,image/png,image/webp"{% if requirement.required %} required{% endif %}{% if errors[requirement.field] is defined %} aria-invalid="true"{% endif %}>
                                {% if errors[requirement.field] is defined %}<small class="pu-field__error">{{ errors[requirement.field] }}</small>{% endif %}
                            </li>
                        {% endfor %}
                    </ol>

                    <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>{{ 'apply.submit'|trans }}</span>{{ icons.icon('arrow') }}
                    </button>
                    <p class="pu-privacy">{{ icons.icon('lock') }}<span>{{ 'apply.privacy'|trans({landlord: page.landlordName}) }}</span></p>
                </form>
            </div>
        {% endif %}
    </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>
{% endblock %}