<div class="banner banner-household">
    <div id="header-household-name" class="header-name">
        <div class="container-xxl">
            <div class="row">

                <div class="col-md-4 col-lg-3 ps-md-5 ps-xxl-0">
                    <h1>
                        <i class="fa fa-home"></i>
                        {{ 'household.Household'|trans }}
                        <span class="id-number">{{ household.id }}</span>
                    </h1>
                </div>

                <div class="col-md-8 col-lg-9">
                    <div class="household-members my-3 pe-md-5 pe-xxl-0 justify-content-md-end">
                        {%- set members = household.getCurrentMembersOrdered() -%}
                        {%- if members|length > 0 -%}
                            <span class="current-members-explain" style="display: none;">
                                {{- 'household.Current household members'|trans }}
                                <i class="fa fa-fw fa-users" title="{{- 'household.Current household members'|trans }}"></i>
                            </span>

                            {%- for m in members -%}
                                <span
                                    class="badge-member{%- if m.holder %} holder{% endif -%}"
                                    {% if m.position is not null %}
                                        title="{{ m.position.label.fr }}"
                                    {% endif %}
                                >
                                    <a href="{{ path('chill_person_view', { person_id: m.person.id}) }}">
                                        {%- if m.holder %}
                                            <span class="fa-stack fa-holder" title="{{ 'household.holder'|trans }}">
                                                <i class="fa fa-circle fa-stack-1x text-success"></i>
                                                <i class="fa fa-stack-1x">T</i>
                                            </span>
                                        {% endif -%}
                                        {{- m.person|chill_entity_render_box() -}}
                                    </a>
                                </span>
                            {%- endfor -%}
                        {%- endif -%}
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div id="header-household-details" class="header-details">
        <div class="container-xxl">
            <div class="row justify-content-md-right">

                <div class="contact col-md-12 ps-md-5 ps-xxl-0">
                    {% set address = household.currentAddress %}
                    {% if address is empty %}
                        <span class="chill-no-data-statement">
                            {{ 'household.Household does not have any address currently'|trans }}
                        </span>
                    {% else %}
                        <span class=" d-block d-sm-inline-block">
                            {{ address|chill_entity_render_box({
                                'render': 'inline', 'multiline': false, 'with_picto': true, 'with_delimiter': true,
                                'details_button': true
                            }) }}
                        </span>
                    {% endif %}

                </div>

            </div>
        </div>
    </div>
    <a id="banner-household"></a>
</div>
