{% extends "base.html" %}

{% from "components/icon.html" import Icon %}
{% from "components/text_input.html" import TextInput %}
{% from "components/options_input.html" import OptionsInput %}

{% block content %}

<form method="POST" action="" autocomplete="false">

  <div class="panel">

    <div class="panel__heading">
      <h1>New Member</h1>
      <div class="subtitle"><h2>Account Details</h2></div>
    </div>

    <div class="panel__content">
      {{ TextInput(form.first_name) }}
      {{ TextInput(form.last_name) }}
      {{ TextInput(form.email) }}
      {{ TextInput(form.dod_id) }}
      {{ OptionsInput(form.workspace_role) }}
    </div>
  </div>

  <div class='action-group'>
    <a href='#' class='action-group__action usa-button usa-button-big'>
      Add User
    </a>
    <a href='#' class='action-group__action icon-link'>
      {{ Icon('x') }}
      <span>Cancel</span>
    </a>
  </div>


</form>




{% endblock %}