{% 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">
          <div class="member-list__name">
            {{ member_form.user_name.data }}
          </div>
        </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-role inline-template v-bind:initial-role="'{{ environment_form.role.data }}'">
                <div>
                  <div class="row">
                    <div class="col col--grow">
                      {{ environment_form.environment_name.data }}
                    </div>
                    <div class="accordion-table__item__expanded-role col col--grow">
                      <div class="right">
                        <span v-html="role">
                        </span>
                        <div class="icon-link" v-on:click="toggle">
                          {{ Icon("edit") }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="member-list__role-select" v-show="expanded">
                    {{ environment_form.role.label }}
                    {{ environment_form.role(**{"v-on:change": "radioChange", "class": "member-list____role-select__radio"}) }}
                    <button
                      class="usa-button"
                      type="button"
                      v-on:click="toggle"
                      >
                      {{ "common.close" | translate }}
                    </button>
                    {{ environment_form.environment_id() }}
                  </div>
                </div>
              </environment-role>
            </li>
          {% endfor %}
        </ul>
        <div class="accordion-table__item__action-group">
          {% if user_can(permissions.ASSIGN_ENVIRONMENT_MEMBER) %}
            <a class="icon-link">
              {{ "portfolios.applications.team_settings.add_to_environment" | translate }}
              {{ Icon("plus") }}
            </a>
          {% endif %}
          {% if user_can(permissions.DELETE_APPLICATION_MEMBER) %}
            <button
              type="button"
              class='usa-button button-danger'
              v-on:click="openModal('{{ delete_modal_id }}')"
            >
              {{ "portfolios.applications.remove_member.button" | translate }}
            </button>
          {% endif %}
        </div>
      {% endcall %}
      {{ member_form.user_id() }}
    </li>
  </toggler>
{% endfor %}