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

{% block template_vars %}
{% set is_new_member = False %}
{% set member_name = "Danny Knight" %}
{% set member_email = "knight@mil.gov" %}
{% set member_workspace_role = "Billing Auditor" %}
{% set member_id = "789" %}
{% end %}

{% block workspace_content %}

{% module Alert(
  "UI Mock",
  message="<p>Please note, this screen is a non-functional UI mockup.</p>",
  level="info"
  ) %}

  <div class='panel member-card'>
    <div class='member-card__header'>
      <h1 class='member-card__heading'>{{ member_name }}</h1>
      <dl><dt>Workspace Role</dt> <dd><span class='label label--info'>{{member_workspace_role}}</span></dd></dl>
    </div>
    <div class='member-card__details'>
      <dl>
        <div>
          <dt>DOD ID:</dt>
          <dd>{{ member_id }}</dd>
        </div>
        <div>
          <dt>Email:</dt>
          <dd>{{ member_email }}</dd>
        </div>
      </dl>
      <a href='#' class='icon-link'>edit account details</a>
    </div>
  </div>

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

  <div class='block-list project-list-item'>
    <header class='block-list__header'>
      <h2 class='block-list__title'>{% module Icon('arrow-down') %} Code.mil</h2>
      <span><a href="#" class="icon-link icon-link--danger">revoke all access</a></span>
    </header>
    <ul>
      <li class='block-list__item project-list-item__environment'>
        <span class='project-list-item__environment'>
          Development
        </span>
        <div class='project-list-item__environment__actions'>
          <span class="label">no access </span><a href="#" class="icon-link">set role</a>
        </div>
      </li>
      <li class='block-list__item project-list-item__environment'>
        <span class='project-list-item__environment'>
          Sandbox
        </span>
        <div class='project-list-item__environment__actions'>
          <span class="label">no access</span><a href="#" class="icon-link">set role</a>
        </div>
      </li>
      <li class='block-list__item project-list-item__environment'>
        <span class='project-list-item__environment'>
          Production
        </span>
        <div class='project-list-item__environment__actions'>
        <span class="label label--success">Billing</span><a href="#" class="icon-link">set role</a>
        </div>
      </li>
    </ul>
  </div>

  <div class='block-list project-list-item'>
    <header class='block-list__header'>
      <h2 class='block-list__title'>{% module Icon('arrow-right') %} Digital Dojo</h2>
      <span class="label">no access</span>
    </header>
  </div>

  <div class='action-group'>
    <a href='#' class='action-group__action usa-button usa-button-big'>
      {% if is_new_member %}Create{% else %}Save{% end %}
    </a>
    <a href='#' class='action-group__action icon-link'>
      {% module Icon('x') %}
      <span>Cancel</span>
    </a>
  </div>

  {% end %}