{% load i18n recruitmentfilters %}
{% for stage in ordered_stages %}
<!-- Movable #{{forloop.counter}} -->
<div class="oh-tabs__movable ui-sortable stage" data-stage-sequence="{{stage.sequence}}" data-stage-id="{{stage.id}}"
    data-recruitment-id="{{rec.id}}">
    <div class="pipeline-header" onclick="$(this).next().toggleClass('d-none')" {% if request.user.employee_get in stage.stage_managers.all %}
        style=" background-color: hsl(38.08deg 100% 50% / 8%);" {% endif %}>
        <div class="pipeline-toggle w-75" data-stage-id="{{stage.id}}">
            <div class="oh-tabs__input-badge-container">
                <span class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2 stage_count"
                    data-rec-stage-badge="{{rec.id}}"
                    id="stageCount{{stage.id}}">
                    0</span>
                <input class="oh-tabs__movable-title oh-table__editable-input" value="{{stage}}"
                {% if perms.recruitment.change_stage or request.user|recruitment_manages:rec %}
                    hx-post="{% url 'stage-title-update' stage.id %}" name='stage' {% endif %} hx-target="#ohMessages"
                    style="min-width: 160px;" readonly="" />
            </div>
        </div>
        <div class="d-flex justify-content-between custom-scroll">
            <div class="avatars" id="avatarsContainer">
                {% for manager in stage.stage_managers.all %}
                <a href="#" class="avatars__item" title="{{manager}}"><img class="avatar" src="{{manager.get_avatar}}"
                        alt=""></a>
                {% endfor %}
            </div>
        </div>
        <div class="d-flex">
            {% if  perms.recruitment.add_candidate or request.user.employee_get in stage.stage_managers.all or request.user.employee_get in rec.recruitment_managers.all %}
            <button onclick="event.stopPropagation()" style="display: inline-block;padding: 0px;
                  border-radius: 6px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 50px;
                  height: 28px;" class="oh-btn oh-btn--secondary-outline float-end ms-3"
                hx-get="{% url 'add-candidate-to-stage' %}?stage_id={{stage.id}}" hx-target="#createTarget"
                data-toggle="oh-modal-toggle" data-target="#createModal" title="Add Candidate">
                <ion-icon name="add-outline" class="m-0 md hydrated" role="img" aria-label="add outline"></ion-icon>
            </button>
            {% endif %}
            {% if perms.recruitment.change_stage or request.user|recruitment_manages:rec or perms.recruitment.delete_stage or request.user.employee_get in stage.stage_managers.all or request.user.employee_get in rec.recruitment_managers.all %}
                <div onclick="event.stopPropagation()" class="oh-dropdown" x-data="{open: false}">
                    <button class="oh-btn oh-stop-prop oh-btn--transparent oh-accordion-meta__btn" @click="open = !open"
                        @click.outside="open = false" title="{% trans " Actions" %}">
                        <ion-icon name="ellipsis-vertical"></ion-icon>
                    </button>
                    <div class="oh-dropdown__menu oh-dropdown__menu--right" x-show="open">
                        <ul class="oh-dropdown__items">
                            {% if perms.recruitment.change_stage or request.user|recruitment_manages:rec or request.user.employee_get in stage.stage_managers.all %}
                            <li class="oh-dropdown__item" style="cursor: pointer;">
                                <a hx-get='{% url "stage-update-pipeline" stage.id %}' hx-target="#objectUpdateModalTarget"
                                    data-toggle="oh-modal-toggle" data-target="#objectUpdateModal"
                                    class="oh-dropdown__link">{% trans "Edit" %}</a>
                            </li>
                            <li class="oh-dropdown__item" style="cursor: pointer;">
                                <a hx-get="{% url 'send-mail' %}?stage_id={{stage.id}}" hx-target="#objectCreateModalTarget"
                                data-toggle="oh-modal-toggle" data-target="#objectCreateModal" class="oh-dropdown__link">
                                {% trans "Bulk mail" %}
                                </a>
                            </li>
                            {% endif %}
                            {% if perms.recruitment.delete_stage %}
                            <li class="oh-dropdown__item">
                                <form method="post" action="{% url 'rec-stage-delete' stage.id %}"
                                onsubmit="return confirm('{% trans "Are you sure you want to delete this stage?" %}');">
                                    {% csrf_token %}
                                    <button type="submit" class="oh-dropdown__link oh-dropdown__link--danger">
                                        {% trans "Delete" %}
                                    </button>
                                </form>
                            </li>
                            {% endif %}
                        </ul>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
    <div class="oh-tabs__movable-body position-relative pipeline_items recruitment_items {% if stage.stage_type == 'cancelled' %}d-none{% endif %}"
        id="pipelineStageContainer{{stage.id}}"
        data-stage-toggle-id="{{stage.id}}"
        hx-get="{% url 'candidate-stage-component' %}?stage_id={{stage.id}}"
        hx-trigger="load"
        >
        <div class="animated-background"></div>
    </div>
</div>
{% endfor %}