{% load static i18n offboarding_filter %}
{% if tasks %}
    <div class="oh-timeoff-modal__stat m-0">
        <span class="oh-timeoff-modal__stat-count fw-bold">{% trans "Tasks" %}</span>
        <div class="row ms-2">
            {% for task in tasks %}
            <div class="col-6 ps-0 pb-1 my-1">
                <div class="oh-timeoff-modal__stat-title mb-1">
                    <span
                        class="oh-dot oh-dot--small me-1 oh-dot--color-{{task.status}}"
                    ></span>
                    {{task.task_id.title}}
                </div>
                <div class="" id="task{{task.id}}{{instance.id}}">
                    <select
                        hx-get="{% url "update-task-status" %}?stage_id={{instance.stage_id.id}}&employee_ids={{instance.id}}&task_id={{task.task_id.id}}"
                        hx-swap="none"
                        hx-on-htmx-after-request="$(`#offboardingStageContainer{{instance.stage_id.pk}}`).find('.reload-record').click()"
                        name="task_status"
                        id="task_status{{assinged_tasks.id}}"
                        class="p-2 w-100"
                        onclick="event.stopPropagation()"
                    >
                        {% for t in task.statuses %}
                            {% if task.status == t.0 %}
                                <option value="{{ t.0 }}" selected>
                                    {{ t.1 }}
                                </option>
                            {% else %}
                                <option value="{{ t.0 }}">{{ t.1 }}</option>
                            {% endif %}
                        {% endfor %}
                    </select>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
{% endif %}

<script>
    $(document).on("htmx:afterRequest", function (event, data) {
        $("select[name='task_status']").on("change", function() {
            var value = $(this).val();
            var dot = $(this).closest('.col-6').find('span.oh-dot');

            dot.removeClass().addClass('oh-dot oh-dot--small me-1 oh-dot--color-' + value);
        })
    })
</script>