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

{% block title 'household.Household summary'|trans %}

{% block block_post_menu %}
    <div class="block-post-menu"></div>
{% endblock %}

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

    {#
    <h1>{{ block('title') }}</h1>
    <h2>{{ 'household.Current address'|trans }}</h2>
     #}

    {% set address = household.currentAddress %}

    <div class="row household-resume">
        <div class="item-bloc col-5 col-address">
            <h2>{{ 'Address'|trans }}</h2>

            {% if address is empty %}
                <p class="chill-no-data-statement">{{ 'household.Household does not have any address currently'|trans }}</p>
            {% else %}
                {{ address|chill_entity_render_box({'multiline': true, 'extended_infos': true }) }}
            {% endif %}

            <ul class="list-inline text-right mt-2">
                <li class="list-inline-item">
                    {# include vue_address component #}
                    {% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
                        targetEntity: { name: 'household', id: household.id },
                        backUrl: path('chill_person_household_summary', { 'household_id': household.id }),
                        onlyButton: true,
                        mode: 'new',
                        buttonSize: 'btn-sm',
                        buttonText: 'Move household',
                        modalTitle: 'Move household',
                        buttonDisplayText: false,
                    } %}
                </li>
                <li class="list-inline-item">
                    <a class="btn btn-secondary btn-sm" title="{{ "Addresses history"|trans }}"
                       href="{{ path('chill_person_household_addresses', { 'household_id': household.id } ) }}">
                        <i class="fa fa-list fa-fw"></i>
                    </a>
                </li>
            </ul>
        </div>
            <div class="item-bloc col-7 col-comment">
                {% if form is null %}

                    {% if household.waitingForBirth or not household.commentMembers.isEmpty() %}
                        <div class="p-4 bg-light">
                            {% if household.waitingForBirth %}
                                <i class="fa fa-check-square-o pe-2"></i>
                                {% if household.waitingForBirthDate is not null %}
                                    {{ 'household.Expecting for birth on date'|trans({ 'date': household.waitingForBirthDate|format_date('long') }) }}
                                {% else %}
                                    {{ 'household.Expecting for birth'|trans }}
                                {% endif %}
                            {% endif %}

                            {% if not household.commentMembers.isEmpty() %}
                                {{ household.commentMembers|chill_entity_render_box }}
                            {% endif %}
                        </div>
                    {% endif %}

                    {% if not household.commentMembers.isEmpty() %}
                        <a href="{{ chill_path_add_return_path('chill_person_household_summary', { 'household_id': household.id, 'edit': 1 }) }}"
                           class="btn btn-edit btn-block">
                            {{ 'household.Edit comment and expecting birth'|trans }}
                        </a>
                    {% else %}
                        <a href="{{ chill_path_add_return_path('chill_person_household_summary', { 'household_id': household.id, 'edit': 1 }) }}"
                           class="btn btn-create btn-block">
                            {{ 'household.New comment and expecting birth'|trans }}
                        </a>
                    {% endif %}

                {% else %}

                    {{ form_start(form) }}
                    <div id="waitingForBirthContainer">
                        {{ form_widget(form.waitingForBirth) }}
                    </div>
                    <div id="waitingForBirthDateContainer">
                        {{ form_widget(form.waitingForBirthDate) }}
                    </div>
                    <div class="mt-3">
                        {{ form_widget(form.commentMembers) }}
                    </div>
                    <ul class="record_actions">
                        <li>
                            <button type="submit" class="btn btn-save" id="form_household_comment_confirm">
                                {{ 'Save'|trans }}
                            </button>
                        </li>
                    </ul>
                    {{ form_end(form) }}
                {% endif %}
            </div>
    </div>

    <h2 class="my-5">{{ 'household.Household members'|trans }}</h2>

    {% for p in positions %}
    <div class="mb-5">
      <h3>{{ p.label|localize_translatable_string }}
          {% if false == p.shareHousehold %}
              <i class="chill-help-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true"
                 title="{{ 'household.Those members does not share address'|trans }}"></i>
          {% endif %}
      </h3>

      {%- set members = household.currentMembersByPosition(p) %}

      {% macro customButtons(member, household) %}
          <li>
              <a href="{{ chill_path_add_return_path('chill_person_household_members_editor', {'persons': [ member.person.id ], 'allow_leave_without_household': true } ) }}"
                 class="btn btn-sm btn-unlink" title="{{ 'household.person.leave'|trans }}"></a>
          </li>
          <li>
              <a href="{{ chill_path_add_return_path('chill_person_household_members_editor', {'persons': [ member.person.id ], 'household': household.id} ) }}"
                 class="btn btn-sm btn-misc" title="{{ 'household.Change position'|trans }}"><i class="fa fa-arrows-h"></i></a>
          </li>
      {% endmacro %}

      {% if members|length > 0 %}
        <div class="flex-table list-household-members">
          {% for m in members %}
              {% include '@ChillPerson/Household/_render_member.html.twig' with {
                  'member': m,
                  'customButtons': { 'after': _self.customButtons(m, household) }
              } %}
          {% endfor %}
        </div>
      {% else %}
        <p class="chill-no-data-statement">{{ 'household.Any persons into this position'|trans }}</p>
      {% endif %}

      {% set members = household.nonCurrentMembersByPosition(p) %}
      {% if members|length > 0 %}

        <style>
            button[aria-expanded="true"] > span.folded,
            button[aria-expanded="false"] > span.unfolded { display: none; }
            button[aria-expanded="false"] > span.folded,
            button[aria-expanded="true"] > span.unfolded { display: inline; }
        </style>
        <div class="accordion" id="nonCurrent">
            <div class="accordion-item">
                <h2 class="accordion-header" id="heading_{{ p.id }}">
                    <button
                        class="accordion-button collapsed"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#collapse_{{ p.id }}"
                        aria-expanded="false"
                        aria-controls="collapse_{{ p.id }}">
                        <span class="folded">{{ 'household.Show future or past memberships'|trans({'length': members|length}) }}</span>
                        <span class="unfolded text-secondary">{{ 'household.Hide memberships'|trans }}</span>
                    </button>
                </h2>
                <div id="collapse_{{ p.id }}"
                    class="accordion-collapse collapse"
                    aria-labelledby="heading_{{ p.id }}"
                    data-bs-parent="#nonCurrent">
                    <div class="flex-table my-0 list-household-members">
                        {% for m in members %}
                            {% include '@ChillPerson/Household/_render_member.html.twig' with { 'member': m } %}
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
      {% endif %}

    </div>
    {% endfor %}

    <ul class="record_actions">
      <li>
        <a href="{{ chill_path_add_return_path('chill_person_household_members_editor', {'household': household.id }) }}"
          class="btn btn-create">
          {{ 'household.Add a member'|trans }}
        </a>
      </li>
    </ul>

</div>
{% endblock %}

{% block js %}
{{ encore_entry_script_tags('page_household_edit_metadata') }}
{% endblock %}