{% extends "base.html" %}

{% from "components/icon.html" import Icon %}
{% from "components/modal.html" import Modal %}

{% block content %}

<div class='panel member-card'>
  <div class='member-card__header'>
    <h1 class='member-card__heading'>Danny Knight</h1>

    <div class="usa-input member-card__input">
      <label for="filter-status">Workspace Role</label>
      <select id="filter-status" name="filter-status">
        <option value="Admin">Admin</option>
        <option value="Billing Auditor" selected="selected">Billing Auditor</option>
        <option value="CCPO">CCPO</option>
        <option value="Developer">Developer</option>
        <option value="Owner">Owner</option>
        <option value="Security Auditor">Security Auditor</option>
      </select>
    </div>

  </div>
  <div class='member-card__details'>
    <dl>
      <div>
        <dt>DOD ID:</dt>
        <dd>789</dd>
      </div>
      <div>
        <dt>Email:</dt>
        <dd>knight@mil.gov</dd>
      </div>
    </dl>
    <a href='#' class='icon-link'>edit account details</a>
  </div>
</div>

<div class="panel">
  <div class="panel__heading panel__heading--tight">
    <h2 class="h3">Manage Access <div class="subtitle">Grant access to an environment</div></h2>
  </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>

{% call Modal(name='rolesModal', dismissable=False) %}
  <div class="block-list">

    <header class="block-list__header">
      <h2>New Request <div class="subtitle">Add a user to an environment</div></h2>

    </header>

    <form method="post" action="">
      <dl>
        <div class='block-list__item'>
          <input type='radio' name='radio' id='radio-1' />
          <label for='radio-1'>
            <dt>CCPO</dt>
            <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat dicta voluptate vitae quasi, cumque rem dolores, quae quas cum in recusandae? Libero deleniti minus ab accusantium vel necessitatibus placeat, rerum?</dd>
          </label>
        </div>
        <div class='block-list__item'>
          <input type='radio' name='radio' id='radio-2' />
          <label for='radio-2'>
            <dt>Security</dt>
            <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat vel ea, eaque, odio sint explicabo officia, debitis dolore, et repudiandae possimus deserunt eveniet laborum. Sunt blanditiis deleniti minus. Et, mollitia.</dd>
          </label>
        </div>
        <div class='block-list__item'>
          <input type='radio' name='radio' id='radio-3' />
          <label for='radio-3'>
            <dt>Audit</dt>
            <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem itaque reprehenderit dolorum nobis voluptatibus quae, facilis voluptatum necessitatibus alias laboriosam, esse blanditiis culpa possimus tempore consectetur recusandae. Nihil, vel, dolorem!</dd>
          </label>
        </div>
        <div class='block-list__item'>
          <input type='radio' name='radio' id='radio-4' />
          <label for='radio-4'>
            <dt>Application Developer</dt>
            <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea esse ab consequuntur aliquam. Porro ea mollitia sapiente blanditiis quaerat quam beatae vitae adipisci quisquam dolore reiciendis tenetur, eius nemo quibusdam!</dd>
          </label>
        </div>
        <div class='block-list__item'>
          <input type='radio' name='radio' id='radio-5' />
          <label for='radio-5'>
            <dt>Dev Ops</dt>
            <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore incidunt obcaecati, quidem ullam sint iusto. Natus ex distinctio eveniet cumque laudantium veritatis nemo asperiores, esse hic quis perspiciatis, quia impedit.</dd>
          </label>
        </div>
        <div class='block-list__item'>
          <input type='radio' name='radio' id='radio-6' />
          <label for='radio-6'>
            <dt>Billing</dt>
            <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem delectus at, voluptatibus dolores, nobis temporibus. Ipsum dignissimos corrupti qui nisi et alias totam commodi maiores hic possimus ipsam error, ullam.</dd>
          </label>
        </div>
      </dl>

      <div class='action-group'>
        <a v-on:click="closeModal('rolesModal')" class='action-group__action usa-button'>Add Access</a>
        <a class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('rolesModal')">No Access</a>
      </div>
    </form>

  </div>

{% endcall %}

<div is='toggler' default-visible class='block-list project-list-item'>
  <template slot-scope='{ isVisible, toggle }'>
    <header class='block-list__header'>
    <button v-on:click='toggle' class='icon-link icon-link--large icon-link--default spend-table__project__toggler'>
        <template v-if='isVisible'>{{ Icon('caret_down') }}</template>
        <template v-else>{{ Icon('caret_right') }}</template>
        <h3 class="block-list__title">Code.mil</h3>
      </button>
      <span><a href="#" class="icon-link icon-link--danger">revoke all access</a></span>
    </header>
    <ul v-show='isVisible'>
      <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><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
        </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><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
        </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><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
        </div>
      </li>
    </ul>
  </template>
</div>

<div is="toggler" class='block-list project-list-item'>
  <template slot-scope='{ isVisible, toggle }'>
    <header class='block-list__header'>
    <button v-on:click='toggle' class='icon-link icon-link--large icon-link--default spend-table__project__toggler'>
        <template v-if='isVisible'>{{ Icon('caret_down') }}</template>
        <template v-else>{{ Icon('caret_right') }}</template>
        <h3 class="block-list__title">Digital Dojo</h3>
      </button>
      <span class="label">no access</span>
    </header>
    <ul v-show='isVisible'>
      <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><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
        </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><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
        </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">no access</span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
        </div>
      </li>
    </ul>
  </template>
</div>

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



{% endblock %}