{% extends '@ChillPerson/Household/layout.html.twig' %}

{% block title 'Addresses history for household'|trans %}

{% block content %}
<div class="household-address">

    <h1>{{ block('title') }}</h1>

    {% if household.addresses|length == 0 %}
        <span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
    {% else %}

        <ul class="record_actions my-3">
            <li style="margin: auto;">

                {# include vue_address component #}
                {% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
                    targetEntity: { name: 'household', id: household.id },
                    backUrl: path('chill_person_household_addresses', { 'household_id': household.id }),
                    mode: 'new',
                    buttonSize: 'btn-lg',
                    buttonText: 'Move household',
                    modalTitle: 'Move household',
                } %}
                {#
                    useValidFrom: true,
                #}

            </li>
        </ul>

        <div class="address-timeline grid">

        <div class="top"><i class="fa fa-caret-up fa-3x"></i></div>

        {% set row = 0 %}
        {% set previousRowFrom = null %}

        {% for address in household.addresses %}

            {% set row = row + 1 %}
            {% if address.validTo is not empty and address.validTo < previousRowFrom %}

                <div class="{{ 'row' ~ row ~ ' ' }}col-b"></div>
                <div class="{{ 'row' ~ row ~ ' ' }}col-c action">

                    {# include vue_address component #}
                    <a href="" class="btn btn-sm btn-create">{{ 'Insert an address'|trans }}</a></div>

                <div class="date">
                    {% if address.validTo is not empty %}
                        {{ address.validTo|format_date('short') }}
                    {% endif %}
                </div>

                {% set row = row + 1 %}
            {% endif %}

            <div class="{{ 'row' ~ row ~ ' ' }}col-b"></div>
            <div class="{{ 'row' ~ row ~ ' ' }}col-c content">
                {{ address|chill_entity_render_box({
                    'render': 'bloc',
                    'multiline': true,
                    'extended_infos': true,
                    'has_no_address': true
                }) }}
                <ul class="record_actions">
                    <li>
                        <a href="{{ path('chill_person_household_address_edit', { 'household_id': household.id, 'address_id' : address.id } ) }}"
                           class="btn btn-edit"></a>

                    </li>
                </ul>
            </div>

            <div class="date">
                {% if address.validFrom is not empty %}
                    {{ address.validFrom|format_date('short') }}
                {% endif %}
            </div>

            {% set previousRowFrom = address.validFrom %}
        {% endfor %}
    </div>
    {% endif %}

    <ul class="record_actions sticky-form-buttons">
        <li class="cancel">
            <a href="{{ path('chill_person_household_summary', { 'household_id' : household.id } ) }}" class="btn btn-cancel">
                {{ 'Back to household'|trans }}
            </a>
        </li>
        <li>

            {# include vue_address component #}
            <a class="btn btn-create"
                href="{{ chill_path_add_return_path('chill_person_household_address_move', { 'household_id': household.id }) }}">
                {{ 'Move household'|trans }}
            </a>

        </li>
    </ul>

</div>
{% endblock %}