{% from "components/icon.html" import Icon %}
{% from "components/toggle_list.html" import ToggleButton, ToggleSection %}

<div class="application-list-item">
  <header>
    <div class="responsive-table-wrapper__header">
      <div class='responsive-table-wrapper__title'>
        <div class='h3'>{{ 'portfolios.applications.environments_heading' | translate }}</div>
      </div>
    </div>
  </header>

  <div class="accordion-table accordion-table-list">
    <div class="accordion-table__head">
      <span>{{ "portfolios.applications.environments.name" | translate }}</span>
    </div>

    <ul class="accordion-table__items">
      {% for env in environments_obj %}
        <toggler inline-template>
          <li class="accordion-table__item">
            <div class="accordion-table__item-content">
              <span>
                {{ env['name'] }}
              </span>

              <span class="icon-link icon-link--large accordion-table__item__toggler">
                {% set open_members_button %}
                  {{ "common.members" | translate }} ({{ env['member_count'] }}) {{ Icon('caret_down') }}
                {% endset %}

                {% set close_members_button %}
                  {{ "common.members" | translate }} ({{ env['member_count'] }}) {{ Icon('caret_up') }}
                {% endset %}

                {{
                  ToggleButton(
                    open_html=open_members_button,
                    close_html=close_members_button,
                    section_name="members"
                  )
                }}
              </span>
            </div>

            {% call ToggleSection(section_name="members") %}
              <ul>
                {% for member in env['members'] %}
                <li class="accordion-table__item__expanded">
                  <div class="accordion-table__item__expanded_first">{{ member }}</div>
                </li>
                {% endfor %}
              </ul>
            {% endcall %}

            {% call ToggleSection(section_name="edit") %}
              <ul>
                <li class="accordion-table__item__expanded">
                  <div>
                    <form>
                      <div class="form-row">
                        <div class="form-col form-col--half">
                          Row here
                        </div>
                      </div>
                    </form>
                  </div>
                </li>
              </ul>
            {% endcall %}
          </li>
        </toggler>
      {% endfor %}
    </ul>
  </div>
</div>
