{% extends "base.html" %}

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

{% block content %}

<form method="POST" action="{{ url_for('workspaces.update_member', workspace_id=workspace.id, member_id=member.user_id) }}" autocomplete="false">
  {{ form.csrf_token }}

  <div class='panel member-card'>
    <div class='member-card__header'>
      <h1 class='member-card__heading'>{{ member.user.full_name }}</h1>

        <div class="usa-input member-card__input">
          {{ Selector(form.workspace_role) }}
        </div>

    </div>
    <div class='member-card__details'>
      <dl>
        <div>
          <dt>DOD ID:</dt>
          <dd>{{ member.user.dod_id }}</dd>
        </div>
        <div>
          <dt>Email:</dt>
          <dd>{{ member.user.email }}</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>

  <div 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>
  </div>

  {% call Modal(name='rolesModal', dismissable=False) %}
  <div class="block-list">
    <header class="block-list__header">
      <h2 class="block-list__title">
        Environment access for Danny Knight
        <div class='subtitle'>Project Name - Environment Name</div>
      </h2>
    </header>

    <form method="post" action="">
      <ul>
        <li class='block-list__item block-list__item--selectable'>
          <input type='radio' name='radio' id='radio-' />
          <label for='radio-'>
            <dl>
              <dt>Developer</dt>
              <dd>Configures cloud-based IaaS and PaaS computing, networking, and storage services.</dd>
            </dl>
          </label>
        </li>

        <li class='block-list__item block-list__item--selectable'>
          <input type='radio' name='radio' id='radio-' />
          <label for='radio-'>
            <dl>
              <dt>Database Administrator</dt>
              <dd>Configures cloud-based database services.</dd>
            </dl>
          </label>
        </li>

        <li class='block-list__item block-list__item--selectable'>
          <input type='radio' name='radio' id='radio-' />
          <label for='radio-'>
            <dl>
              <dt>DevOps</dt>
              <dd>Provisions, deprovisions, and deploys cloud-based IaaS and PaaS computing, networking, and storage services, including pre-configured machine images.</dd>
            </dl>
          </label>
        </li>

        <li class='block-list__item block-list__item--selectable'>
          <input type='radio' name='radio' id='radio-' />
          <label for='radio-'>
            <dl>
              <dt>Billing Administrator</dt>
              <dd>Views cloud resource usage, budget reports, and invoices; Tracks budgets, including spend reports, cost planning and projections, and sets limits based on cloud service usage.</dd>
            </dl>
          </label>
        </li>

        <li class='block-list__item block-list__item--selectable'>
          <input type='radio' name='radio' id='radio-' />
          <label for='radio-'>
            <dl>
              <dt>Security Administrator</dt>
              <dd>Accesses information security and control tools of cloud resources which include viewing cloud resource usage logging, user roles and permissioning history.</dd>
            </dl>
          </label>
        </li>

        <li class='block-list__item block-list__item--selectable'>
          <input type='radio' name='radio' id='radio-' />
          <label for='radio-'>
            <dl>
              <dt>Financial Auditor</dt>
              <dd>Views cloud resource usage and budget reports.</dd>
            </dl>
          </label>
        </li>
      </ul>

      <div class='block-list__footer'>
        <div class='action-group'>
          <a v-on:click="closeModal('rolesModal')" class='action-group__action usa-button'>Select Access Role</a>
          <a class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('rolesModal')">No Access</a>
        </div>
      </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'>
    <button class='action-group__action usa-button usa-button-big'>
      {% if is_new_member %}Create{% else %}Save{% endif %}
    </button>
    <a href='#' class='action-group__action icon-link'>
      {{ Icon('x') }}
      <span>Cancel</span>
    </a>
  </div>

</form>



{% endblock %}