{% from "components/alert.html" import Alert %}
{% from "components/icon.html" import Icon %}
{% from "components/label.html" import Label %}
{% import "applications/fragments/new_member_modal_content.html" as member_steps %}
{% import "applications/fragments/member_form_fields.html" as member_fields %}
{% from "components/modal.html" import Modal %}
{% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
{% from "components/save_button.html" import SaveButton %}
{% from "components/toggle_list.html" import ToggleButton, ToggleSection %}

{% macro MemberManagementTemplate(
  application,
  members,
  new_member_form,
  action_new,
  action_update) %}

  <h3  id="application-members">
    {{ 'portfolios.applications.settings.team_members' | translate }}
  </h3>

  {% if g.matchesPath("application-members") %}
      {% include "fragments/flash.html" %}
  {% endif %}

  <div class="panel">
  {% if not application.members %}
    <div class='empty-state panel__content'>
      <p class='empty-state__message'>
        {{ ("portfolios.applications.members.blank_slate" | translate) }}
      </p>
    </div>
  {% else %}

    {% for member in members %}
      {% set invite_pending = member.role_status == 'invite_pending' %}
      {% set invite_expired = member.role_status == 'invite_expired' %}
      {%- if user_can(permissions.EDIT_APPLICATION_MEMBER) %}
        {% set modal_name = "edit_member-{}".format(loop.index) %}
        {% call Modal(modal_name, classes="form-content--app-mem") %}
          <div class="modal__form--header">
            <h1>{{ Icon('avatar') }} {{ "portfolios.applications.members.form.edit_access_header" | translate({ "user": member.user_name }) }}</h1>
            <hr>
          </div>
          <base-form inline-template>
            <form id='{{ modal_name }}' method="POST" action="{{ url_for(action_update, application_id=application.id, application_role_id=member.role_id,) }}">
              {{ member.form.csrf_token }}
              {{ member_fields.PermsFields(form=member.form, member_role_id=member.role_id) }}
              <div class="action-group">
                {{ SaveButton(text='Update', element='input', additional_classes='action-group__action') }}
                <a class='action-group__action usa-button usa-button-secondary' v-on:click="closeModal('{{ modal_name }}')">{{ "common.cancel" | translate }}</a>
              </div>
            </form>
          </base-form>
        {% endcall %}

        {%- if invite_pending or invite_expired %}
          {% set resend_invite_modal = "resend_invite-{}".format(member.role_id) %}
          {% call Modal(resend_invite_modal, classes="form-content--app-mem") %}
            <div class="modal__form--header">
              <h1>{{ "portfolios.applications.members.new.verify" | translate }}</h1>
              <hr>
            </div>
            <base-form inline-template :enable-save="true">
              <form id='{{ resend_invite_modal }}' method="POST" action="{{ url_for('applications.resend_invite', application_id=application.id, application_role_id=member.role_id) }}">
                {{ member.update_invite_form.csrf_token }}
                {{ member_fields.InfoFields(member.update_invite_form) }}
                <div class="action-group">
                {{ SaveButton(text="Resend Invite")}}
                  <a class='action-group__action' v-on:click="closeModal('{{ resend_invite_modal }}')">{{ "common.cancel" | translate }}</a>
                </div>
              </form>
            </base-form>
          {% endcall %}
        {% endif -%}
      {% endif -%}

      {% if user_can(permissions.DELETE_APPLICATION_MEMBER) and (invite_pending or invite_expired) -%}
        {% set revoke_invite_modal = "revoke_invite_{}".format(member.role_id) %}
        {% call Modal(name=revoke_invite_modal) %}
          <form method="post" action="{{ url_for('applications.revoke_invite', application_id=application.id, application_role_id=member.role_id) }}">
            {{ member.form.csrf_token }}
            <h1>{{ "invites.revoke" | translate }}</h1>
            <hr>
            {{ "invites.revoke_modal_text" | translate({"application": application.name}) }}
            <div class="action-group">
              <button class="action-group__action usa-button usa-button-primary" type="submit">{{ "invites.revoke" | translate }}</button>
              <button class='action-group__action usa-button usa-button-secondary' v-on:click='closeModal("{{revoke_invite_modal}}")' type="button">{{ "common.cancel" | translate }}</button>
            </div>
          </form>
        {% endcall %}
      {%- endif %}
    {% endfor %}

    <section class="member-list application-list">
      <div class='responsive-table-wrapper'>
        <table class="atat-table">
          <thead>
            <tr>
              <th>{{ "common.name" | translate }}</th>
              <th>{{ "portfolios.applications.members.form.app_perms.title" | translate }}</th>
              <th class="env_role--th">{{ 'portfolios.applications.members.form.env_access.table_header' | translate }}</th>
            </tr>
          </thead>
          <tbody>
            {% for member in members %}
              {% set perms_modal = "edit_member-{}".format(loop.index) %}
              {% set invite_pending = member.role_status == 'invite_pending' %}
              {% set invite_expired = member.role_status == 'invite_expired' %}
              <tr>
                <td>
                  <strong>{{ member.user_name }}</strong>
                  <br>
                  {{ Label(type=member.role_status, classes='label--below') }}
                </td>

                <td>
                  {% for perm, value in member.permission_sets.items() %}
                    <div>
                      {{ ("portfolios.applications.members.{}.{}".format(perm, value)) | translate }}
                    </div>
                  {% endfor %}
                </td>
                <td class="env_role--td">
                  {% for env in member.environment_roles %}
                    <div class="row">
                      <span class="env-role__environment">
                        {{ env.environment_name }}
                      </span>
                      <span class="env-role__role">
                        : {{ env.role }}
                      </span>
                    </div>
                  {% endfor %}
                  {% if user_can(permissions.EDIT_APPLICATION_MEMBER) -%}
                    <toggle-menu inline-template>
                    <div class="app-member-menu">
                      <span v-if="isVisible" class="accordion-table__item__toggler accordion-table__item__toggler--active">
                        {{ Icon('ellipsis')}}
                      </span>
                      <span v-else class="accordion-table__item__toggler">
                        {{ Icon('ellipsis')}}
                      </span>

                      <div v-show="isVisible" class="accordion-table__item-toggle-content app-member-menu__toggle">
                        <a v-on:click="openModal('{{ perms_modal }}')">
                          {{ "portfolios.applications.members.menu.edit" | translate }}
                        </a>
                        {% if invite_pending or invite_expired -%}
                          {% set revoke_invite_modal = "revoke_invite_{}".format(member.role_id) %}
                          {% set resend_invite_modal = "resend_invite-{}".format(member.role_id) %}
                          <a v-on:click='openModal("{{ resend_invite_modal }}")'>
                            {{ "portfolios.applications.members.menu.resend" | translate }}
                          </a>
                          {% if user_can(permissions.DELETE_APPLICATION_MEMBER) -%}
                            <a v-on:click='openModal("{{ revoke_invite_modal }}")'>{{ 'invites.revoke' | translate }}</a>
                          {%- endif %}
                        {%- endif %}
                      </div>

                    </div>
                    </toggle-menu>
                  {%- endif %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </section>
  {% endif %}
  {% if user_can(permissions.CREATE_APPLICATION_MEMBER) %}
    {% set new_member_modal_name = "add-app-mem" %}
    <a class="usa-button usa-button-secondary add-new-button" v-on:click="openModal('{{ new_member_modal_name }}')">
      {{ "portfolios.applications.add_member" | translate }}
    </a>

    {{ MultiStepModalForm(
        name=new_member_modal_name,
        form=new_member_form,
        form_action=url_for(action_new, application_id=application.id),
        steps=[
          member_steps.MemberStepOne(new_member_form),
          member_steps.MemberStepTwo(new_member_form, application)
        ],
      ) }}
  {% endif %}
  </div>

{% endmacro %}