{% from "components/text_input.html" import TextInput %}
{% from "components/options_input.html" import OptionsInput %}
{% from "components/phone_input.html" import PhoneInput %}
{% from "components/date_picker.html" import DatePicker %}
{% from 'components/save_button.html' import SaveButton %}

<base-form inline-template>
  <form method="POST" action='{{ form_action }}'>
    {{ form.csrf_token }}
    <div class='panel'>
      <div class='panel__content'>
        <div class='form-row'>
          <div class='form-col form-col--half'>
            {{ TextInput(form.first_name, validation='requiredField', inset_form=True) }}
          </div>

          <div class='form-col form-col--half'>
            {{ TextInput(form.last_name, validation='requiredField', inset_form=True) }}
          </div>
        </div>

        {{ TextInput(form.email, validation='email', inset_form=True) }}
        {{ PhoneInput(form.phone_number, form.phone_ext) }}

        {{ OptionsInput(form.service_branch, inset_form=True) }}
        {{ OptionsInput(form.citizenship, inset_form=True) }}
        {{ OptionsInput(form.designation, inset_form=True) }}


        <div class="usa-input">
          {{ DatePicker(form.date_latest_training, mindate=mindate, maxdate=maxdate, inset_form=True) }}
        </div>
      </div>
    </div>

    <div class='action-group'>
      {{ SaveButton(text=("fragments.edit_user_form.save_details_button" | translate), additional_classes="usa-button-big" )}}
    </div>
  </form>
</base-form>