{% from "components/delete_confirmation.html" import DeleteConfirmation %}
{% from "components/icon.html" import Icon %}
{% from "components/modal.html" import Modal %}
{% from "components/options_input.html" import OptionsInput %}
{% from "components/save_button.html" import SaveButton %}
{% from "components/text_input.html" import TextInput %}
{% from "components/toggle_list.html" import ToggleButton, ToggleSection %}


<div class="application-list-item application-list">
  <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 row">
      <div class="col col--grow">{{ "portfolios.applications.environments.name" | translate }}</div>
      <div class="col col--grow">{{ "portfolios.applications.environments.edit_name" | translate }}</div>
      <div class="col col--grow">{{ "common.delete" | translate }}</div>
      <div class="col col--grow">{{ "common.members" | translate }}</div>
    </div>

    <ul class="accordion-table__items">
      {% for env in environments_obj %}
        {% set delete_environment_modal_id = "delete_modal_environment{}".format(env['id']) %}
        {% set edit_form = env['edit_form'] %}

        <toggler inline-template {% if active_toggler == (env['id'] | safe) %}initial-selected-section="{{ active_toggler_section }}"{% endif %}>
          <li class="accordion-table__item">
            <div class="accordion-table__item-content row">
              <div class="col col--grow">
                {{ env['name'] }}
              </div>
              <div class="col col--grow">
                <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>
              </div>
              <div class="col col--grow">
                <span class="icon-link icon-link--danger" alt="Delete environment" v-on:click="openModal('{{ delete_environment_modal_id }}')">
                  {{ Icon('trash') }}
                </span>
              </div>
              <div class="col col--grow icon-link icon-link--large accordion-table__item__toggler">
                {% set open_members_button %}
                  {{ "common.members" | translate }} ({{ env['member_count'] }}) {{ Icon('caret_down') }}
                {% endset %}

                {% set close_members_button %}
                  {{ "common.members" | translate }} ({{ env['member_count'] }}) {{ Icon('caret_up') }}
                {% endset %}

                {{
                ToggleButton(
                  open_html=open_members_button,
                  close_html=close_members_button,
                  section_name="members"
                  )
                }}
              </div>
            </div>

            {% call ToggleSection(section_name="members", classes="environment-roles") %}
              {% include 'fragments/applications/edit_environment_team_form.html' %}
            {% endcall %}

            {% call ToggleSection(section_name="edit") %}
              <ul>
                <li class="accordion-table__item__expanded">
                  <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') }}
                    {{
                      SaveButton(
                        text=("common.save" | translate)
                      )
                    }}
                  </form>
                </li>
              </ul>
            {% endcall %}
          </li>
        </toggler>

        {% call Modal(name=delete_environment_modal_id) %}
          <h1>
            {{ 'fragments.edit_environment_team_form.delete_environment_title' | translate }}
          </h1>

          {{
            Alert(
              level="warning",
              title=('components.modal.destructive_title' | translate),
              message=('components.modal.destructive_message' | translate({"resource": "environment"})),
            )
          }}

          {{
            DeleteConfirmation(
              modal_id=delete_environment_modal_id,
              delete_text=('portfolios.applications.environments.delete.button' | translate),
              delete_action= url_for('applications.delete_environment', environment_id=env['id']),
              form=edit_form
            )
          }}
        {% endcall %}
      {% endfor %}
    </ul>
  </div>
</div>