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

{% block title 'Household accompanying period'|trans %}

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

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

    {% include 'ChillPersonBundle:AccompanyingPeriod:_list.html.twig' %}

    {% if accompanying_periods_old|length > 0 %}
            <div class="accordion" id="nonCurrent">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="heading_{{ household.id }}">
                        <button
                            class="accordion-button collapsed"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#collapse_{{ household.id }}"
                            aria-expanded="false"
                            aria-controls="collapse_{{ household.id }}">
                            <span class="folded">{{ 'household.Show accompanying periods of past or future memberships'|trans({'length': accompanying_periods_old|length}) }}</span>
                            <span class="unfolded text-secondary">{{ 'household.Hide memberships'|trans }}</span>
                        </button>
                    </h2>
                    <div id="collapse_{{ household.id }}"
                        class="accordion-collapse collapse"
                        aria-labelledby="heading_{{ household.id }}"
                        data-bs-parent="#nonCurrent">
                        {% include 'ChillPersonBundle:AccompanyingPeriod:_list.html.twig' with {'accompanying_periods' : accompanying_periods_old} %}
                    </div>
                </div>
            </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">
                {{ 'Household summary'|trans }}
            </a>
        </li>
        {# TODO: add ACL to check if user is allowed to edit household? #}
        <li>
            <a class="btn btn-create"
                href="{{ path ('chill_household_accompanying_course_new', {'household_id' : household.id } ) }}" role="button">
                {{ 'Create an accompanying period'|trans }}
            </a>
        </li>
    </ul>

</div>
{% endblock %}