{% extends "index.html" %}
{% block content %}
{% include "generic/components.html" %}
<script>
    function submitForm(elem) {
        $(elem).siblings(".add_more_submit").click();
    }
    function enlargeImage(src, $element) {
        var enlargeDocContainer = $element
            .parents()
            .closest("li")
            .find("#enlargeDocContainer");
        enlargeDocContainer.empty();
        style =
            "width:100%; height:90%; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); background:white";
        var enlargedImage = $("<iframe>").attr({ src: src, style: style });
        var name = $("<span>").text(src.split("/").pop().replace(/_/g, " "));
        enlargeDocContainer.append(enlargedImage);
        enlargeDocContainer.append(name);
        setTimeout(function () {
            enlargeDocContainer.show();

            const iframe = document.querySelector("iframe").contentWindow;
            var iframe_document = iframe.document;
            iframe_image = iframe_document.getElementsByTagName("img")[0];
            $(iframe_image).attr("style", "width:100%; height:100%;");
        }, 100);
    }

    function hideEnlargeImage() {
        var enlargeDocContainer = $(".enlargeDocContainer");
        enlargeDocContainer.empty();
    }

    $(document).on("click", function (event) {
        if (!$(event.target).closest("#enlargeDocContainer").length) {
            hideEnlargeImage();
        }
    });
</script>
<style>
    .enlarge-image-container {
        display: none;
        position: fixed;
        top: 40%;
        left: 40%;
        transform: translate(-50%, -50%);
        width: 30%;
        height: 50%;
        z-index: 9999;
    }

    .enlarge-image-container img {
        max-width: 100%;
        height: auto;
        border-radius: 5%;
    }

    .oh-rate:not(:checked)>label {
        font-size: 40px;
    }

    .star {
        font-size: 20px !important;
    }

    .ul {
        margin: 0;
    }

    body {
        background-color: #f9f9f9 !important;
    }
</style>
<div class="oh-checkpoint-badge mb-2"
id="selectedInstances"
data-ids="[]"
data-clicked=""
style="display: none">
</div>

<div class="oh-wrapper" hx-get="/recruitment/profile{{request.path}}?{{request.GET.urlencode}}&instance_ids={{request.GET.instance_ids}}" hx-trigger="load">
</div>
{% endblock content %}

{% comment %} {% extends 'index.html' %} {% load i18n %} {% load horillafilters %} {% load static %} {% block content %} {% load recruitmentfilters %}
<script>
  function submitForm(elem) {
    $(elem).siblings(".add_more_submit").click();
  }
  function enlargeImage(src, $element) {
    var enlargeDocContainer = $element
      .parents()
      .closest("li")
      .find("#enlargeDocContainer");
    enlargeDocContainer.empty();
    style =
      "width:100%; height:90%; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); background:white";
    var enlargedImage = $("<iframe>").attr({ src: src, style: style });
    var name = $("<span>").text(src.split("/").pop().replace(/_/g, " "));
    enlargeDocContainer.append(enlargedImage);
    enlargeDocContainer.append(name);
    setTimeout(function () {
      enlargeDocContainer.show();

      const iframe = document.querySelector("iframe").contentWindow;
      var iframe_document = iframe.document;
      iframe_image = iframe_document.getElementsByTagName("img")[0];
      $(iframe_image).attr("style", "width:100%; height:100%;");
    }, 100);
  }

  function hideEnlargeImage() {
    var enlargeDocContainer = $(".enlargeDocContainer");
    enlargeDocContainer.empty();
  }

  $(document).on("click", function (event) {
    if (!$(event.target).closest("#enlargeDocContainer").length) {
      hideEnlargeImage();
    }
  });
</script>
<style>
  .enlarge-image-container {
    display: none;
    position: fixed;
    top: 40%;
    left: 40%;
    transform: translate(-50%, -50%);
    width: 30%;
    height: 50%;
    z-index: 9999;
  }
  .enlarge-image-container img{
    max-width: 100%;
    height: auto;
    border-radius: 5%;
  }
  .oh-rate:not(:checked)>label {
    font-size:40px;
  }
  .star {
    font-size:20px !important;
  }
  .ul {
    margin:0;
  }
  body {
    background-color: #f9f9f9 !important;
  }
</style>
{% include "generic/components.html" %}

{% include "generic/components.html" %}

<div id="showImageContainer"></div>

<div class="oh-wrapper" id="section">
    <div class="oh-card mt-4 mb-5">
        <div class="d-flex flex-row-reverse align-items-center">

            {% if next != None %}
                <a href="{% url 'candidate-view-individual' next %}" title='{% trans "Next Candidate" %}'
                    style="color:hsl(8, 77%, 56%);" class="ms-1 me-3 fw-bold">
                    <ion-icon name="arrow-forward-circle-outline" style="font-size:35px;"></ion-icon>
                </a>
            {% else %}
                <a href="#" style="color:hsl(8 50% 83% / 1);" class="ms-1 me-3 fw-bold oh-btn--disabled">
                    <ion-icon name="arrow-forward-circle-outline" style="font-size:35px;"></ion-icon>
                </a>
            {% endif %}

            {% if previous != None %}
                <a href="{% url 'candidate-view-individual' previous %}" title="{% trans 'Previous Candidate' %}"
                    style="color:hsl(8, 77%, 56%);" class="ms-1 me-2 fw-bold">
                    <ion-icon name="arrow-back-circle-outline" style="font-size:35px;"></ion-icon>
                </a>
            {% else %}
                <a href="#" style="color:hsl(8 50% 83% / 1);" class="ms-1 me-2 fw-bold oh-btn--disabled">
                    <ion-icon name="arrow-back-circle-outline" style="font-size:35px;"></ion-icon>
                </a>
            {% endif %}

            {% if perms.recruitment.chanage_candidate %}
                <a href="{% url 'rec-candidate-update' candidate.id %}" class="mt-1 mb-1 m-3">
                    <img src="{% static '/images/ui/edit_btn.png' %}" style="width: 25px; height: auto;"
                        title="{% trans 'Edit' %}">
                </a>
            {% endif %}
            {% if perms.recruitment.change_candidate %}
                <div class='d-flex float-end ms-4'>
                    {% if not candidate.email in emp_list and not candidate.start_onboard %}
                        <button
                            hx-confirm="{% trans 'Are you sure you want to convert this candidate into an employee?' %}"
                            hx-post="{% url 'candidate-conversion' candidate.id %}"
                            class="oh-btn oh-btn--success"
                            style="border-radius:18px;">
                            {% trans "Convert To Employee" %}
                        </button>
                    {% endif %}
                </div>
            {% endif %}
        </div>
        <div class="row">
            <div class="col-12 col-sm-12 col-md-12 col-lg-4">
                <div class="d-flex align-items-center">
                    <div class="oh-profile oh-profile--lg me-3">
                        <div class="oh-profile__avatar">
                            <img src="{{candidate.get_avatar}}" class="oh-profile-section__avatar preview"
                                alt="Username" style="border-radius:10%" onmouseover="showImage(this) $('#showImageContainer').addClass('enlarge-image-container'); " onmouseout="hideshowImage() $('#showImageContainer').removeClass('enlarge-image-container'); " />
                        </div>
                        <span class="oh-profile__active-badge oh-profile__active-badge--secondary"
                            title="Active"></span>
                    </div>
                    <div class="oh-profile__info-container">
                        <h1 class="oh-profile__info-name">{{candidate}}</h1>
                        <p class="oh-profile__info-designation">
                            {{candidate.job_position_id}}
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-12 col-lg-8 d-flex align-items-center justify-content-between">
                <ul class="oh-profile__info-list">
                    <li class="oh-profile__info-list-item">
                        <span class="oh-profile__info-label">
                            <ion-icon name="mail-outline"></ion-icon>
                            <span>{% trans "Email" %}:</span>
                        </span>
                        <span class="oh-profile__info-value">{{candidate.email}}</span>
                    </li>

                    <li class="oh-profile__info-list-item">
                        <span class="oh-profile__info-label">
                            <ion-icon name="call-outline"></ion-icon>
                            <span>{% trans "Phone" %}:</span>
                        </span>
                        <span class="oh-profile__info-value">{{candidate.mobile}}</span>
                    </li>
                </ul>
                {% with request.user.employee_get.candidate_rating.all as candidate_ratings %}
                    <form>
                        <div class="d-block mb-0">
                            <div class="oh-rate" style="pointer-events:none;">
                                {% for i in "54321" %}
                                <input type="radio" id="star{{i}}{{cand.id}}" name="rating" class="rating-radio"
                                    value="{{i}}" disabled {% if candidate.candidate_rating.all|avg_rating:candidate == i %}
                                    checked {% endif %} />
                                <label for="star{{i}}{{cand.id}}">5 {% trans "Stars" %}</label>
                                {% endfor %}
                            </div>
                            <span id="rating-radio-error"></span>
                        </div>
                    </form>
                {% endwith %}
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 col-md-12 col lg-12">
                <ul
                    class="oh-general__tabs oh-general__tabs--border oh-general__tabs--profile oh-general__tabs--no-grow oh-profile-section__tab mt-5">
                    <li class="oh-general__tab">
                        <a href="#" class="oh-general__tab-link oh-general__tab-link--active" data-action="general-tab"
                            data-target="#personal">{% trans "About" %}</a>
                    </li>
                    <li class="oh-general__tab">
                        <a href="#" class="oh-general__tab-link" data-action="general-tab" data-target="#resume">{% trans "Resume" %}</a>
                    </li>
                    <li class="oh-general__tab">
                        <a href="#" class="oh-general__tab-link" data-action="general-tab" data-target="#survey">{% trans "Survey" %}</a>
                    </li>
                    <li class="oh-general__tab">
                        <a href="#" class="oh-general__tab-link" data-action="general-tab" data-target="#note"
                            hx-get="{% url 'view-note' candidate.id %}" hx-target="#note">
                            {% trans "Notes" %}
                        </a>
                    </li>
                    <li class="oh-general__tab">
                        <a href="#" class="oh-general__tab-link" data-action="general-tab" data-target="#history">{% trans "History" %}</a>
                    </li>
                    <li class="oh-general__tab">
                        <a href="#" class="oh-general__tab-link" data-action="general-tab" data-target="#document">{% trans "Documents" %}</a>
                    </li>
                    {% if request.user|stage_manages:candidate.recruitment_id or perms.recruitment.view_candidate %}
                        <li class="oh-general__tab">
                            <a href="#" class="oh-general__tab-link" data-action="general-tab" data-target="#rating">{% trans "Rating" %}</a>
                        </li>
                    {% endif %}
                    {% if candidate.hired %}
                        <li class="oh-general__tab">
                            <a href="#" class="oh-general__tab-link" data-action="general-tab" data-target="#onboarding">{% trans "Onboarding" %}</a>
                        </li>
                    {% endif %}
                    <li class="oh-general__tab">
                        <span hx-get="{% url 'get-mail-log-rec' %}?candidate_id={{candidate.id}}" hx-target="#maillog"
                            hx-trigger="load" class="oh-general__tab-link" data-action="general-tab"
                            data-target="#maillog" style="cursor: pointer;">{% trans "Mail Log" %}</span>
                    </li>
                    <li class="oh-general__tab">
                        <a href="#" class="oh-general__tab-link" data-action="general-tab" data-target="#interview">{% trans "Scheduled Interviews" %}</a>
                    </li>
                </ul>

                <div class="oh-general__tab-target oh-profile__info-tab mb-4" id="personal">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-4">
                            <div class="oh-card oh-card--margin">
                                <div class="oh-card__header">
                                    <span class="oh-card__title oh-card__title--sm fw-bold me-2">{% trans "Personal Information" %}</span>
                                </div>
                                <div class="oh-card__body mt-4">
                                    <ul class="oh-profile__card-info-list">
                                        <li class="oh-profile__card-info-item">
                                            <span class="oh-profile__info-label mb-1">
                                                <ion-icon name="calendar-outline"></ion-icon>
                                                <span>{% trans "Date of Birth" %}</span>
                                            </span>
                                            <span
                                                class="oh-profile__info-value dateformat_changer">{{candidate.dob}}</span>
                                        </li>
                                        <li class="oh-profile__card-info-item">
                                            <span class="oh-profile__info-label mb-1">
                                                <ion-icon name="transgender-outline"></ion-icon>
                                                <span>{% trans "Gender" %}</span>
                                            </span>
                                            <span class="oh-profile__info-value">{{candidate.gender|capfirst}}</span>
                                        </li>
                                        <li class="oh-profile__card-info-item">
                                            <span class="oh-profile__info-label mb-1">
                                                <ion-icon name="home-outline"></ion-icon>
                                                <span>{% trans "Address" %}</span>
                                            </span>
                                            <p class="oh-profile__info-value mb-0">
                                                {{candidate.address}}
                                            </p>
                                        </li>
                                        <li class="oh-profile__card-info-item">
                                            <span class="oh-profile__info-label mb-1">
                                                <ion-icon name="flag-outline"></ion-icon>
                                                <span>{% trans "Country" %}</span>
                                            </span>
                                            <span class="oh-profile__info-value">
                                                {{candidate.country}}
                                            </span>
                                        </li>
                                        <li class="oh-profile__card-info-item">
                                            <span class="oh-profile__info-label mb-1">
                                                <ion-icon name="compass-outline"></ion-icon>
                                                <span>{% trans "State" %}</span>
                                            </span>
                                            <span class="oh-profile__info-value">
                                                {{candidate.state}}
                                            </span>
                                        </li>
                                        <li class="oh-profile__card-info-item">
                                            <span class="oh-profile__info-label mb-1">
                                                <ion-icon name="brush-outline"></ion-icon>
                                                <span>{% trans "Portfolio" %}</span>
                                            </span>
                                            <span class="oh-profile__info-value">
                                                {{candidate.portfolio}}
                                            </span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-8">
                            <div class="oh-card oh-card--margin">
                                <div class="oh-card__header">
                                    <span class="oh-card__title oh-card__title--sm fw-bold me-2">{% trans "Recruitment Information" %}</span>
                                </div>
                                <div class="oh-card__body mt-4">
                                    <div class="row">
                                        <div class="col-12 col-sm-12 col-md-12 col-lg-6">
                                            <ul class="oh-profile__card-info-list">
                                                <li class="oh-profile__card-info-item">
                                                    <span class="oh-profile__info-label mb-1">
                                                        <ion-icon name="construct-outline"></ion-icon>
                                                        <span>{% trans "Recruitment" %}</span>
                                                    </span>
                                                    <span
                                                        class="oh-profile__info-value">{{candidate.recruitment_id}}</span>
                                                </li>
                                                <li class="oh-profile__card-info-item">
                                                    <span class="oh-profile__info-label mb-1">
                                                        <ion-icon name="briefcase-outline"></ion-icon>

                                                        <span>{% trans "Department" %}</span>
                                                    </span>
                                                    <span
                                                        class="oh-profile__info-value">{{candidate.job_position_id.department_id}}</span>
                                                </li>
                                                <li class="oh-profile__card-info-item">
                                                    <span class="oh-profile__info-label mb-1">
                                                        <ion-icon name="file-tray-stacked-outline"></ion-icon>
                                                        <span>{% trans "Source" %}</span>
                                                    </span>
                                                    {% if candidate.get_source_display != None %}
                                                        <span class="oh-profile__info-value">{{candidate.get_source_display}}</span>
                                                    {% endif %}
                                                </li>
                                            </ul>
                                        </div>

                                        <div class="col-12 col-sm-12 col-md-12 col-lg-6">
                                            <ul class="oh-profile__card-info-list">
                                                <li class="oh-profile__card-info-item">
                                                    <span class="oh-profile__info-label mb-1">
                                                        <ion-icon name="file-tray-stacked-outline"></ion-icon>
                                                        <span>{% trans "Current Stage" %}</span>
                                                    </span>
                                                    <span class="oh-profile__info-value">{{candidate.stage_id}}</span>
                                                </li>
                                                <li class="oh-profile__card-info-item">
                                                    <span class="oh-profile__info-label mb-1">
                                                        <ion-icon name="briefcase-outline"></ion-icon>
                                                        <span>{% trans "Job Position" %}</span>
                                                    </span>
                                                    <span
                                                        class="oh-profile__info-value">{{candidate.job_position_id}}</span>
                                                </li>
                                                <li class="oh-profile__card-info-item">
                                                    <span class="oh-profile__info-label mb-1">
                                                        <ion-icon name="people-outline"></ion-icon>
                                                        <span>{% trans "Referral" %}</span>
                                                    </span>
                                                    <span class="oh-profile__info-value">{{candidate.referral}}</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="oh-general__tab-target oh-profile__info-tab mb-4 d-none" id="note">
                </div>

                <div class="oh-general__tab-target oh-profile__info-tab mb-4 d-none" id="interview">
                    {% include "candidate/candidate_interview_view.html" %}
                </div>

                <!-- start of comment modal -->
                <div class="oh-modal" id="shiftcommentModal" role="dialog" aria-labelledby="emptagModal"
                    aria-hidden="true">
                    <div class="oh-modal__dialog" id="shiftRequestCommentForm">
                    </div>
                </div>
                <!-- end of comment modal -->

                <div class="oh-modal" id="createModal" role="dialog" aria-hidden="true">
                    <div class="oh-modal__dialog" style="max-width: 550px">
                        <div class="oh-modal__dialog-header">
                            <button onclick="$(this).closest('#createModal').removeClass('oh-modal--show');"
                                type="button" class="oh-modal__close" aria-label="Close"><ion-icon
                                    name="close-outline"></ion-icon></button>
                        </div>

                        <div class="oh-modal__dialog-body" id="createTarget"></div>
                    </div>
                </div>
            </div>
            <div class="oh-general__tab-target oh-profile__info-tab mb-4 d-none" id="history">
                {% include "candidate/history.html" %}
            </div>
            <div class="oh-general__tab-target oh-profile__info-tab mb-4 d-none" id="document">
                {% include "candidate/document.html" %}
            </div>
            <div class="oh-general__tab-target oh-profile__info-tab mb-4 d-none" id="rating">
                {% include "candidate/rating_tab.html" %}
            </div>
            <div class="oh-general__tab-target oh-profile__info-tab mb-4 d-none" id="maillog">
            </div>
            <div class="oh-general__tab-target oh-profile__info-tab mb-4 d-none" id="resume">
                {% if candidate.resume %}
                <iframe id="iframe_pdf" src="{{candidate.resume.url}}" style="width: 100%; height: 500px"
                    frameborder="0"></iframe>
                {% else %}
                <p>{% trans "This candidate does not have a resume on file." %}</p>
                {% endif %}
            </div>
            <div class="oh-general__tab-target oh-profile__info-tab mb-4" id="survey">
                <!-- #3 -->
                {% if candidate.recruitmentsurveyanswer_set.all %}
                {% for surveys in candidate.recruitmentsurveyanswer_set.all %}
                <div class="oh-survey__table">
                    {% for question, answer_list in surveys.answer.items %}
                    {% if question != "csrfmiddlewaretoken" %}
                    <div class="oh-survey__table-row">
                        <div class="oh-survey__table-col">
                            {% if question|slice:"0:11" == "percentage_" %}
                            {{ question|slice:"11:" }}
                            {% elif question|slice:"0:7" == "rating_" %}
                            {{ question|slice:"7:" }}
                            {% elif question|slice:"0:5" == "file_" %}
                            {{ question|slice:"5:" }}
                            {% else %}
                            {{ question }}
                            {% endif %}
                        </div>
                        <div class="oh-survey__table-col">
                            {% if answer_list|length > 1 %}
                            {{ answer_list|join:", " }}
                            {% else %}
                            {% if answer_list.0 == "on" or answer_list.0 == "off"%}
                            {{ answer_list.0|on_off }}
                            {% elif question|slice:"0:11" == "percentage_" %}
                            {{ answer_list.0 }}%
                            {% elif question|slice:"0:5" == "file_" %}
                            <a href="/media/{{ answer_list.0 }}" target="_blank">{{ answer_list.0 }}</a>
                            {% elif question|slice:"0:7" == "rating_" %}
                            <div class="oh-rate">
                                <input type="radio" id="star5{{question.id}}" value="5" disabled {% if answer_list.0 == '5' %} checked {% endif %} />
                                <label for="star5{{question.id}}" title="5 Stars">5 {% trans "Stars" %}</label>
                                <input type="radio" id="star4{{question.id}}" value="4" disabled {% if answer_list.0 == '4' %} checked {% endif %} />
                                <label for="star4{{question.id}}" title="4 Stars">4 {% trans "Stars" %}</label>
                                <input type="radio" id="star3{{question.id}}" value="3" disabled {% if answer_list.0 == '3' %} checked {% endif %} />
                                <label for="star3{{question.id}}" title="3 Stars">3 {% trans "Stars" %}</label>
                                <input type="radio" id="star2{{question.id}}" value="2" disabled {% if answer_list.0 == '2' %} checked {% endif %} />
                                <label for="star2{{question.id}}" title="2 Stars">2 {% trans "Stars" %}</label>
                                <input type="radio" id="star1{{question.id}}" value="1" disabled {% if answer_list.0 == '1' %} checked {% endif %} />
                                <label for="star1{{question.id}}" title="1 Star">1 {% trans "Star" %}</label>
                            </div>
                            {% else %}
                            {{ answer_list.0 }}
                            {% endif %}
                            {% endif %}
                        </div>
                    </div>
                    {% endif %}
                    {% endfor %}
                </div>
                {% endfor %}
                {% else %}
                <div class='d-flex mt-5' style='margin-left:30%;'>
                    <img style="width: 80px;height: 80px;" src="{% static 'images/ui/editor.png' %}" />
                    <h5 class="oh-404__subtitle mt-4 ml-2">{% trans "No survey templates have been established yet." %}
                    </h5>
                </div>
                {% endif %}
            </div>
            <div class="oh-general__tab-target oh-profile__info-tab mb-4 d-none" id="onboarding">
                <style>
                    .onboarding-task-status {
                        padding: 20px;
                        margin-top: 5px;
                        font-weight: 700;
                    }

                    .onboarding-task-status--ongoing {
                        border-left: solid 4px yellow;
                        background-color: rgba(255, 255, 0, 0.113);
                    }

                    .onboarding-task-status--stuck {
                        border-left: solid 4px rgb(255, 60, 0);
                        background-color: rgb(255, 60, 0, 0.113);
                    }

                    .onboarding-task-status--todo,
                    .onboarding-task-status--None {
                        border-left: solid 4px rgb(205, 205, 205);
                        background-color: rgba(205, 205, 205, 0.113);
                    }

                    .onboarding-task-status--done {
                        border-left: solid 4px rgb(154, 205, 50);
                        background-color: rgba(154, 205, 50, 0.113);
                    }

                    .onboarding-task-status--scheduled {
                        border-left: solid 4px rgb(0, 255, 255);
                        background-color: rgb(0, 255, 255, 0.133);
                    }

                    .oh-sticky-table__tr:hover {
                        background-color: #fff
                    }
                </style>
                <div class="oh-sticky-table">
                    <div class="oh-sticky-table__table oh-table--sortable">
                        <div class="oh-sticky-table__thead">
                            <div class="oh-sticky-table__tr">
                                <div class="oh-sticky-table__th"></div>
                            </div>
                        </div>
                        <div class="oh-sticky-table__tbody">
                            {% for task in candidate.candidate_task.all %}
                            <div class="oh-sticky-table__tr">
                                <div class="oh-sticky-table__td">
                                    <div class="oh-sticky-table__sd d-flex justify-content-between"
                                        style="width: 500px;overflow: hidden;">
                                        <div class="oh-profile oh-profile--md">
                                            <span class="oh-profile__name oh-text--dark">{{
                                                task.onboarding_task_id.task_title }}</span>
                                        </div>
                                        <span
                                            class="oh-recuritment_tag  {% if task.status == 'done' %} done-task {% elif task.status == 'scheduled' %} scheduled-task{% elif task.status == 'ongoing' %} ongoing-task{% elif task.status == 'stuck' %} dd stuck-task {% elif task.status == 'todo' %} todo-task{% endif %}">
                                            <select hx-swap="none"
                                                hx-get="{% url 'change-task-status' %}?task_id={{task.id}}"
                                                name="status" style="width: 150px;" id="task_status{{task.id}}">
                                                {% for status in task.choice %}
                                                    <option value="{{status.0}}" {% if status.0 == task.status %} selected {% endif %}>{{status.1}} </option>
                                                {% endfor %}
                                            </select>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
</div>
<script>
    $(document).ready(function () {
        // Active tab script
        function activeCandTab() {
            var activeTab = localStorage.getItem("activeCandTab");
            if (
                !$(`[data-target="${activeTab}"]`).length &&
                $(`[data-target="#personal"]`).length
            ) {
                $(`[data-target="#personal"]`)[0].click();
            } else if (activeTab != null) {
                $(".oh-general__tab-link--active").removeClass(
                    "oh-general__tab-link--active"
                );
                $(`[data-target='${activeTab}']`).addClass(
                    "oh-general__tab-link--active"
                );
                $(".oh-general__tab-target").addClass("d-none");
                $(activeTab).removeClass("d-none");
                $(`[data-target="${activeTab}"]`)[0].click()
            }
        }
        activeCandTab();
        $("[data-action=general-tab]").click(function (e) {
            e.preventDefault();
            const targetId = $(this).attr("data-target");
            localStorage.setItem("activeCandTab", targetId);
        });
    });

    // Profile picture enlarging

    function showImage(image) {
        var showImageContainer = document.getElementById("showImageContainer");
        showImageContainer.innerHTML = "";

        var enlargedImage = document.createElement("img");
        enlargedImage.src = image.src;
        showImageContainer.appendChild(enlargedImage);

        setTimeout(function () {
            showImageContainer.style.display = "block";
        }, 250);
    }

    function hideshowImage() {
        var showImageContainer = document.getElementById("showImageContainer");
        showImageContainer.innerHTML = ""; // Clear the content
        showImageContainer.style.display = "none";
    }
</script>
{% endblock content %} {% endcomment %}