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

{% block workspace_content %}


<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="panel">
  <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>
</div>


{% end %}