{% extends "base_workspace.html.to" %}

{% block workspace_content %}


<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='panel panel__actions'>
  <div class='row'>
    <div class='col col--grow col--pad'>
      <form class="usa-search usa-search-small">
        <label class="usa-sr-only" for="search-field-small">Search small</label>
        <input id="search-field-small" type="search" name="search" placeholder="Search by name">
        <button type="submit">
          <span class="usa-sr-only">Search</span>
        </button>
      </form>
    </div>
    <div class='col col--grow col--pad'>
      <select id="filter_status" name="filter_status" required="">
        <option value="" selected disabled>Filter by status</option>
        <option value="">Active</option>
        <option value="">Pending</option>
        <option value="">Denied</option>
      </select>
    </div>
    <div class='col col--grow col--pad'>
      <select id="filter_role" name="filter_role" required="">
        <option value="" selected disabled>Filter by role</option>
        <option value="">Admin</option>
        <option value="">CCPO</option>
        <option value="">Developer</option>
      </select>
    </div>
  </div>
</div> #}


<div class='responsive-table-wrapper'>
  <table>
    <thead>
      <tr>
        <th scope="col" width="50%">Name</th>
        <th scope="col" class='table-cell--shrink'>&nbsp;<span class="hide">Status Flag</span></th>
        <th scope="col">Status</th>
        <th scope="col">Workspace Role</th>
      </tr>
    </thead>
    <tbody>
      {% for m in members %}
      <tr>
        <td><a href="#" class="icon-link icon-link--large">{{ m['first_name'] }} {{ m['last_name'] }}</a></td>
        <td class='table-cell--shrink'>{% if m['num_projects'] == '0' %} <span class="label label--info">No Project Access</span> {% end %}</td>
        <td>{{ m['status'] }}</a></td>
        <td>{{ m['workspace_role'] }}</a></td>
      </tr>
      {% end %}
    </tbody>
  </table>
</div>



{% end %}