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

{% macro RolePanel(users=[], role='Unassigned(No Access)') %}
  {% set unassigned = role == 'Unassigned(No Access)' %}
  <div class='environment-role'>
    <h4>{{ role }}</h4>
      <div class='environment-role__users'>
        {% for user in users %}
          <div class="environment-role__user {{ 'unassigned' if unassigned }}">
            {{ user.name }}{{ Icon('edit', classes="icon--medium right") }}
          </div>
        {% endfor %}

        {% if users == [] %}
          <div class='environment-role__no-user'>Currently no members are in this role</div>
        {% endif %}
      </div>
    </div>
{% endmacro %}

<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>
      <a class='icon-link'>
        {{ Icon('info') }}
        {{ "portfolios.admin.settings_info" | translate }}
      </a>
    </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 env_forms %}
        {% set member_count = env['form'].data['team_roles'] | length %}
        {% set unassigned = env['no_access'] %}
        {% set members_by_role = environments_obj[env['env_name']]['members'] %}

        <toggler inline-template>
          <li class="accordion-table__item">
            <div class="accordion-table__item-content">
              <span>
                {{ env['env_name'] }}
              </span>
              <span class="icon-link">
                {% set edit_environment_button %}
                  {{ Icon('edit') }}
                {% endset %}

                {{
                  ToggleButton(
                    open_html=edit_environment_button,
                    close_html=edit_environment_button,
                    section_name="edit"
                  )
                }}
              </span>
              <span class="icon-link icon-link--large accordion-table__item__toggler">
                {% set open_members_button %}
                  {{ "common.members" | translate }} ({{ member_count }}) {{ Icon('caret_down') }}
                {% endset %}

                {% set close_members_button %}
                  {{ "common.members" | translate }} ({{ 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") %}
              <div>
                {{ RolePanel(users=unassigned) }}

                {% for role in csp_roles %}
                  {{ RolePanel(users=members_by_role[role], role=role) }}
                {% endfor %}
              </div>
            {% endcall %}

            {% call ToggleSection(section_name="edit") %}
              <ul>
                <li class="accordion-table__item__expanded">
                  {% set edit_form = environments_obj[env['env_name']]['edit_form'] %}
                  <form action="{{ url_for('applications.update_environment', environment_id=environments_obj[env['env_name']]['id']) }}" method="post">
                    {{ edit_form.csrf_token }}
                    {{ TextInput(edit_form.name) }}
                    {{
                      SaveButton(
                        text=("portfolios.applications.update_button_text" | translate)
                      )
                    }}
                  </form>
                </li>
              </ul>
            {% endcall %}
          </li>
        </toggler>
      {% endfor %}
    </ul>
  </div>
</div>