{% 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.add_candidate or request.user|is_stagemanager %}
            <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 %}
            <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 %}
                        <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>
        </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 %}