{% load i18n %}
<div class="oh-modal__dialog-header">
  <span class="oh-modal__dialog-title" id="objectCreateModalLabel"
    >{% trans "Add Stage" %}</span
  >
  <button class="oh-modal__close" aria-label="Close">
    <ion-icon name="close-outline"></ion-icon>
  </button>
</div>

<div class="oh-modal__dialog-body" id="objectCreateModalBody">
  <form
    hx-post="{% url 'rec-stage-create' %}"
    class="oh-general__tab-target oh-profile-section"
    hx-target="#objectCreateModalTarget"
  >
    <div>
      {% csrf_token %}
      <div class="row" id="stageFormCreate">
        <div class="col-12 col-sm-12 col-md-12 col-lg-6">
          <label class="oh-label" for="">{% trans "Stage" %} *</label>
          {{form.stage}} {{form.stage.errors}}
        </div>
        <div class="col-12 col-sm-12 col-md-12 col-lg-6">
          <label class="oh-label" for="">{% trans "Recruitment" %} *</label>
          {{form.recruitment_id}} {{form.recruitment_id.errors}}
        </div>
        <div class="col-12 col-sm-12 col-md-12 col-lg-6" id="stage_manager">
          <label class="oh-label" for="">{% trans "Stage Managers" %} *</label>
          {{form.stage_managers}} {{form.stage_managers.errors}}
          <ul id="error-list" class="errorlist" style="display: none">
            <li>{% trans "This field is requied" %}</li>
          </ul>
        </div>
        <div class="col-12 col-sm-12 col-md-12 col-lg-6">
          <label class="oh-label" for="">{% trans "Stage Type" %} *</label>
          {{form.stage_type}} {{form.stage_type.errors}}
        </div>
      </div>
    </div>
    <div class="d-flex flex-row-reverse w-100 align-items-right mt-4">
      <button type="submit" class="oh-btn oh-btn--secondary pl-5 pr-5">
        {% trans "Save" %}
      </button>
    </div>
  </form>

  <script>
    $(document).ready(function () {
      $("#stageFormCreate [name=stage_managers]").removeAttr("required");
    });
  </script>
</div>