{% extends "workspaces/base.html" %}

{% from "components/empty_state.html" import EmptyState %}
{% from "components/alert.html" import Alert %}

{% block workspace_content %}

{% if not workspace.members %}

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

  {{ EmptyState(
    'There are currently no members in this Workspace.',
    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 workspace administrator to invite new members.',
    icon='avatar'
  ) }}


{% else %}

{% if new_member %}
    {% set message -%}
      <p>{{ new_member.user_name }} was successfully invited via email to this workspace. They do not yet have access to any environments.</p>
      <p><a href="{{ url_for('workspaces.update_member', workspace_id=workspace.id, member_id=new_member.user_id) }}">Add environment access.</a></p>
    {%- endset %}

  {{ Alert('Member added successfully',
    message=message,
    level='success'
  ) }}
{% endif %}

{% set member_name = request.args.get("memberName") %}
{% set updated_role = request.args.get("updatedRole") %}
{% if updated_role %}
    {% set message -%}
      <p>{{ member_name }}'s role  was successfully updated to {{ updated_role }}</p>
    {%- endset %}

  {{ Alert('Workspace role updated successfully',
    message=message,
    level='success'
  ) }}
{% endif %}

  <form class='search-bar'>
    <div class='usa-input search-input'>
      <label for='members-search'>Search members by name</label>
      <input type='search' id='members-search' name='members-search' placeholder="Search by name"/>
      <button type="submit">
        <span class="hide">Search</span>
      </button>
    </div>

    <div class='usa-input filter-input'>
      <label for='filter-status'>Filter members by status</label>
      <select id="filter-status" name="filter-status">
        <option value="" selected disabled>Filter by status</option>
        <option value="">Active</option>
        <option value="">Pending</option>
        <option value="">Denied</option>
      </select>
    </div>

    <div class='usa-input filter-input'>
      <label for='filter-role'>Filter members by role</label>
      <select id="filter-role" name="filter-role">
        <option value="" selected disabled>Filter by role</option>
        <option value="">Admin</option>
        <option value="">CCPO</option>
        <option value="">Developer</option>
      </select>
    </div>
  </form>


  <div class='responsive-table-wrapper'>
    <table>
      <thead>
        <tr>
          <th scope="col" width="50%">Name</th>
          <th scope="col" class="table-cell--align-right">Environments</th>
          <th scope="col">Status</th>
          <th scope="col">Workspace Role</th>
        </tr>
      </thead>
      <tbody>
        {% for m in workspace.members %}
        {% set num_environment_roles = m.num_environment_roles %}
        <tr>
          <td><a href="{{ url_for('workspaces.update_member', workspace_id=workspace.id, member_id=m.user_id) }}" class="icon-link icon-link--large">{{ m.user_name }}</a></td>
          {% if num_environment_roles %}
            <td class="table-cell--align-right">{{ num_environment_roles }}</td>
          {% else %}
            <td class='table-cell--shrink'><span class="label label--info">No Environment Access</span></td>
          {% endif %}
          <td>{{ m.status }}</a></td>
          <td>{{ m.role_displayname }}</a></td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

{% endif %}


{% endblock %}

