{% load i18n %}
{% load recruitmentfilters %}
{% if perms.employee.view_employee %}
<form  id='employee-create-form' enctype="multipart/form-data">
  <div class="container py-5 h-100">
    <div class="row d-flex justify-content-center align-items-center h-100">
      <div class="col-lg-8 col-xl-6">
        <div class="card rounded-3">
          <div class="card-body pl-5 pr-5 pb-5 pt-5">
            {% if messages %}
            <div class="oh-alert-container">
                {% for message in messages %}
                <div class="oh-alert oh-alert--animated {{message.tags}}">
                      {{ message }}
                    </div>
                {% endfor %}
            </div>
            {% endif %}
            <h3 class="mb-4">{% trans "New Employee" %}</h3>

            <div class="row">
                <div class="col-md-6 ">
                    {{form.employee_first_name.errors}}
                    <div class="form-outline mb-4">{{form.employee_first_name}}</div>
                  </div>

                  <div class="col-md-6">
                    {{form.employee_last_name.errors}}

                  <div class="form-outline mb-4">{{form.employee_last_name}}</div>
                </div>
              <div class="col-md-6">
                {{form.email.errors}}
                <div class="form-outline mb-4">{{form.email}}</div>
              </div>
              <div class="col-md-6">
                {{form.phone.errors}}
                <div class="form-outline mb-4">{{form.phone}}</div>
              </div>
              <div class="col-md-6">
                {{form.dob.errors}}
                <div class="form-outline mb-4">{{form.dob}}</div>
              </div>
              <div class="col-md-6">
                {{form.gender.errors}}
                <div class="form-outline mb-4">{{form.gender}}</div>
              </div>
            </div>
            <div>


                {{form.address.errors}}
                <div class="form-outline mb-4">{{form.address}}</div>
                {{form.country.errors}}
                <div class="form-outline mb-4">{{form.country}}</div>


                {{form.qualification.errors}}
                <div class="form-outline mb-4">{{form.qualification}}</div>
                {{form.experience.errors}}
                <div class="form-outline mb-4">{{form.experience}}</div>
                {{form.martial_status.errors}}
                <div class="form-outline mb-4">{{form.martial_status}}</div>
                {{form.children.errors}}
                <div class="form-outline mb-4">{{form.children}}</div>
                {{form.employee_profile.errors}}
                <label class="text-secondary" for="id_{{form.employee_profile.name}}">{{form.employee_profile.label}}</label>
                {{form.employee_profile}}
            </div>



            <label for="id_groups" class="text-secondary">{% trans "User Groups" %}</label>
            {{perm_form.groups}}
            <label for="id_groups" class="text-secondary">{% trans "User Permissions" %}</label>
            {{perm_form.user_permissions}}
            <table class="table">
                <tr>
                    <td class="w-50">
                        <label class="text-secondary" for="id_{{form.hired.name}}"
                        >{{form.is_active.label}}</label
                        >
                      </td>
                      <td class="w-50">
                        <label for="superuser" class="text-secondary"> {% trans "Admin Level User" %}</label>
                      </td>
                </tr>
                <tr>
                  <td class="w-50">{{form.is_active}}</td>
                  <td class="w-50">
                  <input type="checkbox" name="superuser" id="superuser">
                  </td>
                </tr>
              </table>
            <button
              hx-post="{% url 'employee-create'  %}"
              hx-target = '#employee-create-form'
              hx-encoding = 'multipart/form-data'
              class="btn btn-success btn-lg ml-auto mr-auto"
            >
              {% trans "Submit" %}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  {% endif %}



<script>
</script>