{% from "components/icon.html" import Icon %}
{% from "components/options_input.html" import OptionsInput %}
{% from 'components/save_button.html' import SaveButton %}

{% from "components/modal.html" import Modal %}
{% from "components/alert.html" import Alert %}

<section class="member-list" id="portfolio-members">
  <div class='responsive-table-wrapper panel accordion-table'>
    {% if g.matchesPath("portfolio-members") %}
      {% include "fragments/flash.html" %}
    {% endif %}
    <base-form inline-template>
      <form method='POST' id="member-perms" action='{{ url_for("portfolios.edit_portfolio_members", portfolio_id=portfolio.id) }}' autocomplete="off" enctype="multipart/form-data">
      {{ member_perms_form.csrf_token }}

      <div class='application-list-item'>
        <header>
          <div class='responsive-table-wrapper__header'>
            <div class='responsive-table-wrapper__title'>
              <div class='h3'>{{ "portfolios.admin.portfolio_members_title" | translate }}</div>
              <div class='subheading'>
                {{ "portfolios.admin.portfolio_members_subheading" | translate }}
              </div>
            </div>

            <a class='icon-link'>
              {{ Icon('info') }}
              {{ "portfolios.admin.settings_info" | translate }}
            </a>
          </div>
        </header>

        {% if not portfolio.members %}
          <p>{{ "portfolios.admin.no_members" | translate }}</p>
        {% else %}
          <table>

            <thead>
              <tr>
                  <td>{{ "portfolios.members.permissions.name" | translate }}</td>
                  <td>{{ "portfolios.members.permissions.app_mgmt" | translate }}</td>
                  <td>{{ "portfolios.members.permissions.funding" | translate }}</td>
                  <td>{{ "portfolios.members.permissions.reporting" | translate }}</td>
                  <td>{{ "portfolios.members.permissions.portfolio_mgmt" | translate }}</td>
                  <td></td>
              </tr>
            </thead>

            <tbody>
              {% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
                {% include "fragments/admin/members_edit.html" %}
              {% elif user_can(permissions.VIEW_PORTFOLIO_USERS) %}
                {% include "fragments/admin/members_view.html" %}
              {% endif %}
            </tbody>

          </table>
        </div>
        <div class="panel__footer">
          <div class="action-group save">
            {% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
              {{ SaveButton(text=('common.save' | translate), element="input", form="member-perms") }}
            {% endif %}

            {% if user_can(permissions.CREATE_PORTFOLIO_USERS) %}
              {% include "fragments/admin/add_new_portfolio_member.html" %}
            {% endif %}
          </div>
        </div>

      {% endif %}
      </form>
    </base-form>

    {% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
      {% for member in portfolio.members %}
        {% set modal_id = "portfolio_id_{}_user_id_{}".format(portfolio.id, member.user_id) %}
        {% call Modal(name=modal_id, dismissable=False) %}
          <h1>{{ "portfolios.admin.alert_header" | translate }}</h1>

          {{
            Alert(
              title="portfolios.admin.alert_title" | translate,
              message="portfolios.admin.alert_message" | translate,
              level="warning"
            )
          }}

          <div class="panel__footer">
            <div class="action-group">
              <form method="POST" action="{{ url_for('portfolios.remove_member', portfolio_id=portfolio.id, user_id=member.user_id)  }}">
                {{ member_perms_form.csrf_token }}
                <button class="usa-button usa-button-danger">
                  {{ "portfolios.members.archive_button" | translate }}
                </button>
              </form>
              <a v-on:click="closeModal('{{ modal_id }}')" class="action-group__action icon-link icon-link--default">{{ "common.cancel" | translate }}</a>
            </div>
          </div>
        {% endcall %}
      {% endfor %}
    {% endif %}

  </div>

</section>