{% from "components/icon.html" import Icon %}
{% from 'components/save_button.html' import SaveButton %}
{% from "components/modal.html" import Modal %}
{% from "components/alert.html" import Alert %}

<h3>Portfolio Managers</h3>
<div class="panel">
  <section class="member-list">
    <div class="responsive-table-wrapper">
      <table class="atat-table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Portfolio Permissions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{{ ppoc.user_name }}</td>
            <td>
              {% for perm, value in ppoc.permission_sets.items() -%}
                <div>
                  {{ ("portfolios.admin.members.{}.{}".format(perm, value)) | translate }}
                </div>
              {%-endfor %}
            </td>
          </tr>
          {% for member in members -%}
            <tr>
              <td>{{ member.user_name }}</td>
              <td>
                {% for perm, value in member.permission_sets.items() -%}
                  <div>
                    {{ ("portfolios.admin.members.{}.{}".format(perm, value)) | translate }}
                  </div>
                {%-endfor %}
              </td>
            </tr>
          {%- endfor %}
        </tbody>
      </table>
    </div>
  </section>

  {% if user_can(permissions.CREATE_PORTFOLIO_USERS) %}
    <a href="#" class="usa-button usa-button-secondary add-new-button">Add Portfolio Manager</a>
    {% include "portfolios/fragments/add_new_portfolio_member.html" %}
  {% endif %}
</div>