{% extends "base.html" %}

{% from "components/save_button.html" import SaveButton %}
{% from "components/text_input.html" import TextInput %}

{% block content %}
  <div class="ccpo-panel-container">
    <base-form inline-template>
      <form id="add-ccpo-user-form" action="{{ url_for('ccpo.submit_new_user') }}" method="POST">
        {{ form.csrf_token }}
        <h1>{{ "ccpo.form.add_user_title" | translate }}</h1>
        <div class='form-row'>
          <div class='form-col form-col--two-thirds'>
            {{ TextInput(form.dod_id, validation='dodId', optional=False) }}
          </div>
          <div class="form-col form-col--third">
            <div class='action-group'>
              {{ SaveButton(text="common.next"|translate, element="input", additional_classes="action-group__action", form="add-ccpo-user-form") }}
              <a class='action-group__action icon-link icon-link--default' href="{{ url_for('ccpo.users') }}">{{ "common.cancel" | translate }}</a>
            </div>
          </div>
        </div>
      </form>
    </base-form>
  </div>
{% endblock %}