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

{% macro EnvironmentManagementTemplate(
  application,
  environments_obj,
  new_env_form) %}

  <h3>{{ "portfolios.applications.settings.environments" | translate }}</h3>
  <section class="panel" id="application-environments">
    {% if g.matchesPath("application-environments") -%}
      {% include "fragments/flash.html" %}
    {%- endif %}
    {% if 0 == environments_obj | length -%}
      <div class="empty-state panel__content">
        <p class="empty-state__message">
          This Application has no environments
        </p>
      </div>
    {% else %}
      <div class="panel__content">
        <div class="accordion-table accordion-table-list">
          <ul class="accordion-table__items">
            {% for env in environments_obj %}
              {% set edit_form = env['edit_form'] %}
              <toggler inline-template>
                <li class="accordion-table__item">
                  <div class="accordion-table__item-content">
                    <div class="environment-list__item">
                      <span>
                        {{ env['name'] }}
                      </span>
                      {% set members_button = "portfolios.applications.member_count" | translate({'count': env['member_count']}) %}
                      {{
                        ToggleButton(
                          open_html=members_button,
                          close_html=members_button,
                          section_name="members",
                          classes="environment-list__item__members"
                        )
                      }}
                      {% if user_can(permissions.EDIT_ENVIRONMENT) -%}
                        {% set edit_environment_button = "Edit" %}
                        {{
                        ToggleButton(
                          open_html=edit_environment_button,
                          close_html=edit_environment_button,
                          section_name="edit"
                          )
                        }}
                      {%- endif %}
                      <br>
                      {% if env['pending'] -%}
                        {{ Label('exchange', 'Changes Pending', classes='label--below')}}
                      {% else %}
                        <a href='{{ url_for("applications.access_environment", environment_id=env.id)}}' target='_blank' rel='noopener noreferrer' class='application-list-item__environment__csp_link'>
                          <span>{{ "portfolios.applications.csp_link" | translate }} {{ Icon('link', classes="icon--tiny") }}</span>
                        </a>
                      {%- endif %}
                    </div>
                  </div>

                  {% call ToggleSection(section_name="members") %}
                    <ul>
                      {% for member in env['members'] %}
                      {% set status = ": Access Suspended" if member['status'] == 'disabled' %}
                      <li class="accordion-table__item-toggle-content__expanded">
                        {{ member['user_name'] }}{{ status }}
                      </li>
                      {% endfor %}
                    </ul>
                  {% endcall %}

                  {% if user_can(permissions.EDIT_ENVIRONMENT) -%}
                    {% call ToggleSection(section_name="edit") %}
                      <ul>
                        <li class="accordion-table__item-toggle-content__expanded">
                          <base-form inline-template>
                            <form action="{{ url_for('applications.update_environment', environment_id=env['id']) }}" method="post" v-on:submit="handleSubmit">
                              {{ edit_form.csrf_token }}
                              {{ TextInput(edit_form.name, validation='requiredField', optional=False) }}
                              {{
                                SaveButton(
                                  text=("common.save" | translate)
                                )
                              }}
                            </form>
                          </base-form>
                        </li>
                      </ul>
                    {% endcall %}
                  {%- endif %}
                </li>
              </toggler>
            {% endfor %}
          </ul>
        </div>
      </div>
    {%- endif %}
    {% if user_can(permissions.CREATE_ENVIRONMENT) -%}
      {% include "applications/fragments/add_new_environment.html" %}
    {%- endif %}
  </section>
{% endmacro %}