{% extends "portfolios/applications/base.html" %}

{% from "components/empty_state.html" import EmptyState %}
{% from "components/icon.html" import Icon %}

{% set secondary_breadcrumb = 'portfolios.applications.team_management.title' | translate({ "application_name": application.name }) %}

{% block application_content %}

<div class='subheading'>{{ 'portfolios.applications.team_management.subheading' | translate }}</div>

{% if not portfolio.members %}

  {% set user_can_invite = user_can(permissions.ASSIGN_AND_UNASSIGN_ATAT_ROLE) %}

  {{ EmptyState(
    'There are currently no members in this Portfolio.',
    action_label='Invite a new Member' if user_can_invite else None,
    action_href='/members/new' if user_can_invite else None,
    sub_message=None if user_can_invite else 'Please contact your JEDI Cloud portfolio administrator to invite new members.',
    icon='avatar'
  ) }}


{% else %}

{% include "fragments/flash.html" %}

<members-list
  inline-template
  id="search-template"
  v-bind:members='{{ members | tojson}}'>
  <div class='responsive-table-wrapper'>
    <table v-cloak v-if='searchedList && searchedList.length'>
      <thead>
        <tr>
          <th v-for="col in getColumns()" @click="updateSort(col.displayName)" :width="col.width" :class="col.class" scope="col">
            !{ col.displayName }
            <span class="sorting-direction" v-if="col.displayName === sortInfo.columnName && sortInfo.isAscending">
              {{ Icon("caret_down") }}
            </span>
            <span class="sorting-direction" v-if="col.displayName === sortInfo.columnName && !sortInfo.isAscending">
              {{ Icon("caret_up") }}
            </span>
          </th>
        </tr>
      </thead>

      <tbody>
        <tr v-for='member in searchedList'>
          <td>
            <a :href="member.edit_link" class="icon-link icon-link--large" v-html="member.name"></a>
          </td>
          <td class="table-cell--align-right" v-if='member.num_env'>
            <span v-html="member.num_env"></span>
          </td>
          <td class='table-cell--shrink' v-else>
            <span class="label label--info">No Environment Access</span>
          </td>
          <td v-html="member.status"></td>
          <td v-html="member.role"></td>
        </tr>
      </tbody>
    </table>
    <div v-else>
      {{ EmptyState(
        'No members found.',
        action_label=None,
        action_href=None,
        sub_message='Please try a different search.',
        icon=None
      ) }}
    </div>
  </div>
</members-list>

{% endif %}


{% endblock %}