{% from "components/alert.html" import Alert %}
{% 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>
  {% if portfolio.num_task_orders == 0 -%}
    {{ Alert(message="portfolios.applications.environments.funding_alert"|translate({'name': portfolio.name})) }}
  {%- endif %}
  {% if g.matchesPath("application-environments") -%}
    {% include "fragments/flash.html" %}
  {%- endif %}
  <section class="panel" id="application-environments">
    {% if 0 == environments_obj | length -%}
      <div class="empty-state panel__content">
        <p class="empty-state__message">
          {{ 'portfolios.applications.environments.blank_slate' | translate }}
        </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">
                      {% if not env["pending"] -%}
                        <span>
                          <a
                            href='{{ url_for("applications.access_environment", environment_id=env.id)}}'
                            target='_blank'
                            rel='noopener noreferrer'>
                            {{ env['name'] }} {{ Icon('link', classes='icon--medium icon--primary') }}
                          </a>
                        </span>
                      {% else -%}
                        <span>
                          {{ env['name'] }}
                        </span>
                        {{ Label(type="pending_creation")}}
                      {%- endif %}
                      {% if user_can(permissions.EDIT_ENVIRONMENT) -%}
                        {{
                        ToggleButton(
                          open_html="common.edit"|translate,
                          close_html="common.close"|translate,
                          section_name="edit"
                          )
                        }}
                      {%- endif %}
                      <br>
                      {% 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"
                        )
                      }}
                    </div>
                  </div>

                  {% call ToggleSection(section_name="members") %}
                    <ul>
                      {% for member in env['members'] %}
                      {% set status = "portfolios.applications.environments.disabled"|translate 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 environment-list__edit">
                          <base-form inline-template>
                            <form
                              action="{{ url_for('applications.update_environment', environment_id=env['id']) }}"
                              method="post"
                              v-on:submit="handleSubmit"
                              class="col col--half">
                              {{ edit_form.csrf_token }}
                              {{ TextInput(edit_form.name, validation='defaultStringField', optional=False) }}
                              <div class="action-group action-group--tight">
                                {{
                                  SaveButton(
                                    text=("common.save_changes" | translate)
                                  )
                                }}
                              </div>
                              <button
                                type="submit"
                                formaction="{{ url_for('applications.create_subscription', environment_id=env.id)}}"
                                class="usa-button usa-button-secondary">
                                {{ "portfolios.applications.environments.add_subscription" | translate }}
                              </button>
                            </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 %}