{% from "components/options_input.html" import OptionsInput %}
{% from "components/toggle_list.html" import ToggleButton, ToggleSection %}

{{ team_form.csrf_token }}

{% for member_form in team_form.members %}
  {% set delete_modal_id = "delete-user-{}".format(member_form.id) %}
  {% set environment_roles_form = member_form.environment_roles %}
  {% set permissions_form = member_form.permission_sets %}

  <toggler inline-template>
    <li class="accordion-table__item">
      <div class="accordion-table__item-content row">
        <div class="col col--grow">{{ member_form.user_name.data }}</div>
        <div class="col col--grow">{{ OptionsInput(permissions_form.perms_team_mgmt, label=False, watch=True) }}</div>
        <div class="col col--grow">{{ OptionsInput(permissions_form.perms_env_mgmt, label=False, watch=True) }}</div>
        <div class="col col--grow">{{ OptionsInput(permissions_form.perms_del_env, label=False, watch=True) }}</div>
        <div class="col col--grow icon-link icon-link--large accordion-table__item__toggler">
          {% set open_html %}
            {{ "portfolios.applications.team_settings.environments" | translate }} ({{ environment_roles_form | length }}) {{ Icon('caret_down') }}
          {% endset %}

          {% set close_html %}
            {{ "portfolios.applications.team_settings.environments" | translate }} ({{ environment_roles_form | length }}) {{ Icon('caret_up') }}
          {% endset %}

          {{
            ToggleButton(
              open_html=open_html,
              close_html=close_html,
              section_name="environments"
            )
          }}
        </div>
      </div>
      {% call ToggleSection(section_name="environments") %}
        <ul>
          {% for environment_form in environment_roles_form %}
            <li class="accordion-table__item__expanded">
              {{ environment_form.environment_name.data }}
            </li>
          {% endfor %}
          {% if user_can(permissions.DELETE_APPLICATION_MEMBER) %}
            <li class="accordion-table__item__expanded action-group">
              <span class="usa-button button-danger" v-on:click="openModal('{{ delete_modal_id }}')">
                {{ "portfolios.applications.remove_member.button" | translate }}
              </span>
            </li>
          {% endif %}
        </ul>
      {% endcall %}
    {{ member_form.user_id() }}
    </li>
  </toggler>
{% endfor %}
