{% load i18n %} {% load static %}
<script>
    function skillChange(selectElement) {
        var selectedSkill = selectElement.val();
        var parentForm = selectElement.parents().closest("form");
        if (selectedSkill && selectedSkill.includes("create")) {
            let dynamicskills = $("#dynamicSkills");
            var view = parentForm.serialize();
            dynamicskills.attr("hx-vals", `{"data":"${view}"}`);
            dynamicskills.click();
        }
    }
    $(document).ready(function(){
        $("[name= 'skills']").on("change", function(){
            skillChange($(this))
        })
    });
    {% if dynamic %}
    setTimeout(function () {
      $('#dynamicCreateModal').removeClass('oh-modal--show');
    }, 500);
  {% endif %}
</script>
<script>
    $(document).ready(function() {
        function formatOption(option) {
            if (!option.id) {
                return option.text;
            }
            var $option = $('<span></span>').text(option.text);
            {% comment %} if (option.id === 'create') {
                $option.addClass('text-info');
            } {% endcomment %}
            return $option;
        }
        $('[name = "skills"]').select2({
            templateResult: formatOption,
            templateSelection: formatOption
        });
    });
</script>
{% if messages %}
<div class="oh-wrapper">
  {% for message in messages %}
  <div class="oh-alert-container">
    <div class="oh-alert oh-alert--animated {{message.tags}}">
      {{ message }}
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}
<div class="oh-modal__dialog-header">
    <h5 class="oh-modal__dialog-title" id="addRecruitmentModalLabel"
      >{% if duplicate %}{% trans "Duplicate Recruitment" %}{% else %}{% trans "Add Recruitment" %}{% endif %}</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="addRecruitmentModalBody">
    <form
        action="{% url 'recruitment-create' %}"
        method="post"
        class="oh-general__tab-target oh-profile-section"
    >
        <div>
            {% csrf_token %}
            <div class="row" id="recruitmentUpdateContainer">
                <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                    {% for error in form.non_field_errors %}
                    <ul class="errorlist">
                        <li>{{error}}</li>
                    </ul>
                    {% endfor %}
                    <label
                        class="oh-label required-star"
                        for="{{form.title.id_for_label}}"
                        >{% trans "Title" %}</label
                    >
                    {{form.title}} {{form.title.errors}}
                </div>
                <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                    <label
                        class="oh-label required-star"
                        for="{{form.description.id_for_label}}"
                        >{% trans "Description" %}</label
                    >
                    {{form.description}} {{form.description.errors}}
                </div>
                <div
                    class="col-12 col-sm-12 col-md-12 col-lg-6"
                    id="openPositionUpdateContainer"
                >
                    <label
                        class="oh-label required-star"
                        for="{{form.open_positions.id_for_label}}"
                        >{% trans "Job Position" %}</label
                    >
                    {{form.open_positions}} {{form.open_positions.errors}}
                </div>
                <div class="col-12 col-sm-12 col-md-12 col-lg-6">
                    <label
                        class="oh-label required-star"
                        for="{{form.recruitment_managers.id_for_label}}"
                        >{% trans "Managers" %}</label
                    >
                    {{form.recruitment_managers}}
                    {{form.recruitment_managers.errors}}
                </div>
                <div class="col-12 col-sm-12 col-md-12 col-lg-6">
                    <label class="oh-label" for="{{form.start_date.id_for_label}}"
                        >{% trans "Start Date" %}</label
                    >
                    {{form.start_date}} {{form.start_date.errors}}
                </div>
                <div class="col-12 col-sm-12 col-md-12 col-lg-6">
                    <label class="oh-label" for="{{form.end_date.id_for_label}}"
                        >{% trans "End Date" %}</label
                    >
                    {{form.end_date}} {{form.end_date.errors}}
                </div>
                <div class="col-12 col-sm-12 col-md-12 col-lg-6">
                    <label class="oh-label" for="{{form.vacancy.id_for_label}}"
                        >{% trans "Vacancy" %}</label
                    >
                    {{form.vacancy}} {{form.vacancy.errors}}
                </div>
                <div class="col-12 col-sm-12 col-md-12 col-lg-6">
                    <label class="oh-label" for="{{form.company_id.id_for_label}}"
                        >{% trans "Company" %}</label
                    >
                    {{form.company_id}} {{form.company_id.errors}}
                </div>
                <div class="col-12 col-sm-12 col-md-12 col-lg-6">
                    <label
                        class="oh-label"
                        for="{{form.survey_templates.id_for_lable}}"
                        >{% trans "Survey Templates" %}</label
                    >
                    {{form.survey_templates}}
                </div>
                <div class="col-12 col-sm-12 col-md-12 col-lg-6">
                    <label class="oh-label" for="{{form.skills.id_for_lable}}"
                        >{% trans "Skills" %}</label
                    >
                    {{form.skills}}
                </div>
                <div class="col-12 col-sm-12 col-md-12 col-lg-4">
                    <label
                        class="oh-label"
                        for="id_is_published"
                        title="{{form.is_published.help_text|safe}}"
                        >{% trans "Is Published?" %}</label
                    >
                    <div class="w-100 d-flex" style="align-items: center">
                        <div class="oh-switch">{{form.is_published}}</div>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-12 col-lg-4">
                    <label
                        class="oh-label"
                        for="id_optional_profile_image"
                        title="{{form.optional_profile_image.help_text|safe}}"
                        >{% trans "Optional Profile Image?" %}</label
                    >
                    <div class="w-100 d-flex" style="align-items: center">
                        <div class="oh-switch">{{form.optional_profile_image}}</div>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-12 col-lg-4">
                    <label
                        class="oh-label"
                        for="id_optional_optional_resume"
                        title="{{form.optional_resume.help_text|safe}}"
                        >{% trans "Optional Resume?" %}</label
                    >
                    <div class="w-100 d-flex" style="align-items: center">
                        <div class="oh-switch">{{form.optional_resume}}</div>
                    </div>
                </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"
                hx-post="{% url 'recruitment-create' %}"
                hx-target="#objectCreateModalTarget"
            >
                {% trans "Add" %}
            </button>
        </div>
    </form>
</div>

<script>
    $(".oh-general__tab-target.oh-profile-section [name=description]").hide();
</script>
