{% load i18n offboarding_filter %}
<style>
  .oh-dropdown__menu {
    z-index:20
  }
</style>
{% for stage in offboarding.offboarding.stages %}
<div class="oh-accordion-meta" id="accordion{{stage.id}}">
    <div class="oh-accordion-meta__item">
      <div class="oh-accordion-meta__header {% if stage.list|length and stage.grouper.type != "archived"  %} oh-accordion-meta__header--show {% endif %}" style="min-height:50px">
        <span class="oh-accordion-meta__title" data-offboarding-id="{{offboarding.id}}">
          <span class="d-flex" onclick="event.stopPropagation()">
            {% if perms.offboarding.change_offboardingstage or request.user.employee_get|any_manager %}
              <span class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2"
                id="offboardingBadge{{offboarding.id}}_{{forloop.counter}}" title="{{stage.list|length}} {% trans "Employees" %}" onclick="event.stopPropagation()">
                {{ stage.list|length }}
              </span>
            {% endif %}
            {{stage.grouper.title}}
          </span>
        </span>
        {% if request.user.employee_get|is_any_stage_manager or perms.offboarding.change_offboarding or perms.offboarding.change_offboardingemployee %}
        <div class="oh-accordion-meta__actions" onclick="event.stopPropagation()">
          <div class="oh-dropdown" x-data="{open: false}">
            <button class="oh-btn oh-stop-prop oh-accordion-meta__btn" @click="open = !open"
              @click.outside="open = false">
              {% trans "Actions" %}
              <ion-icon class="ms-2 oh-accordion-meta__btn-icon" name="caret-down-outline"></ion-icon>
            </button>
            <div class="oh-dropdown__menu oh-dropdown__menu--right" x-show="open">
              <ul class="oh-dropdown__items">
                {% if perms.offboarding.add_offboardingemployee or request.user.employee_get|any_manager %}
                <li class="oh-dropdown__item">
                  <a hx-get="{% url "add-employee" %}?stage_id={{stage.grouper.id}}" data-target="#objectDetailsModal"
                  data-toggle="oh-modal-toggle" hx-target="#objectDetailsModalTarget" class="oh-dropdown__link">
                  {% trans "Add Employee" %}</a>
                </li>
                {% endif %}
                {% if perms.offboarding.change_offboardingstage or request.user.employee_get|is_offboarding_manager %}
                  <li class="oh-dropdown__item">
                    <a
                      hx-get="{% url "create-offboarding-stage" %}?offboarding_id={{offboarding.offboarding.id}}&instance_id={{stage.grouper.id}}"
                      data-target="#objectDetailsModal"
                      data-toggle="oh-modal-toggle" hx-target="#objectDetailsModalTarget" class="oh-dropdown__link">{% trans "Edit" %}</a>
                  </li>
                {% endif %}
                {% if perms.offboarding.delete_offboarding %}
                  <li class="oh-dropdown__item">
                    <a hx-confirm='{% trans "Are you sure want to delete this stage?" %}' hx-post="{% url "delete-offboarding-stage" %}?ids={{stage.grouper.id}}"
                    hx-target="#offboardingContainer"
                    class="oh-dropdown__link oh-dropdown__link--danger">{% trans "Delete" %}</a>
                  </li>
                {% endif %}
              </ul>
            </div>
          </div>
        </div>
        {% endif %}
      </div>
      <div class="oh-accordion-meta__body {% if stage.grouper.type == "archived" or not stage.list|length %} d-none {% endif %}">
        <div style="width: 100%;overflow-x: scroll; min-height: 200px;">
          <div class="oh-sticky-table__table" style="border:1px solid hsl(213,22%,93%);">
            <div class="oh-sticky-table__thead">
              <div class="oh-sticky-table__tr">
                <div class="oh-sticky-table__th">{% trans "Employee" %}</div>
                <div class="oh-sticky-table__th">{% trans "Notice Period" %}</div>
                <div class="oh-sticky-table__th">{% trans "Start Date" %}</div>
                <div class="oh-sticky-table__th">{% trans "End Date" %}</div>
                {% if request.user.employee_get|is_any_stage_manager or perms.offboarding.change_offboarding or perms.offboarding.change_offboardingemployee %}
                <div class="oh-sticky-table__th">{% trans "Stage" %}</div>
                {% endif %}
                <div class="oh-sticky-table__th text-center">{% trans "Task Status" %}</div>
                <div class="oh-sticky-table__th text-center" style="width: 250px;">{% trans "Actions" %}</div>
                {% for task in stage.grouper.offboardingtask_set.all %}
                {% if request.user.employee_get.offboardingemployee.employeetask_set.all|is_employee_tasks:task or perms.offboarding.add_offboardingtask or request.user.employee_get|any_manager or request.user.employee_get|is_task_manager:task.title %}
                <div class="oh-sticky-table__th" style="width: 200px;" >
                  <div class="d-flex justify-content-between align-items-center">
                    <span>
                      {{task.title}}
                    </span>
                    {% if perms.offboarding.delete_offboardingtask or perms.offboarding.edit_offboardingtask or request.user.employee_get|is_stage_manager:stage.grouper.title or request.user.employee_get|is_task_manager:task.title or request.user.employee_get|is_offboarding_manager %}
                    <div 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="Actions">
                      <ion-icon name="ellipsis-vertical" role="img" class="md hydrated" aria-label="ellipsis vertical"></ion-icon>
                      </button>
                      <div class="oh-dropdown__menu oh-dropdown__menu--right" x-show="open" style="text-align: left !important; display: none;">
                         <ul class="oh-dropdown__items">
                            {% if perms.offboarding.edit_offboardingtask or request.user.employee_get|is_stage_manager:stage.grouper.title or request.user.employee_get|is_task_manager:task.title or request.user.employee_get|is_offboarding_manager %}
                              <li class="oh-dropdown__item">
                                <a class="oh-dropdown__link" hx-get="{% url "offboarding-add-task" %}?stage_id={{stage.grouper.id}}&instance_id={{task.id}}" hx-target="#objectDetailsModalTarget" data-toggle="oh-modal-toggle" data-target="#objectDetailsModal">{% trans "Edit" %}</a>
                              </li>
                            {% endif %}
                            {% if perms.offboarding.delete_offboardingtask or request.user.employee_get|is_stage_manager:stage.grouper.title or request.user.employee_get|is_task_manager:task.title or request.user.employee_get|is_offboarding_manager %}
                              <li class="oh-dropdown__item">
                                <a class="oh-dropdown__link oh-dropdown__link--danger" hx-confirm = 'Do you want to delete task?' hx-post="{% url 'delete-offboarding-task' %}?task_ids={{task.id}}" hx-target="#offboardingContainer" title="{% trans "Delete" %}">{% trans "Delete" %}</a>
                              </li>
                            {% endif %}
                         </ul>
                      </div>
                   </div>
                    {% endif %}
                  </div>
                </div>
                {% endif %}
                {% endfor %}
                {% if perms.offboarding.add_offboardingtask or request.user.employee_get|is_stage_manager:stage.grouper.title or request.user.employee_get|is_offboarding_manager %}
                  <div class="oh-sticky-table__th" style="width: 120px;">
                    <button class="oh-checkpoint-badge text-success" data-toggle="oh-modal-toggle" data-target="#objectDetailsModal" hx-get="{% url "offboarding-add-task" %}?stage_id={{stage.grouper.id}}" hx-target="#objectDetailsModalTarget">
                      {% trans "Add Task" %}
                    </button>
                  </div>
                {% endif %}
              </div>
            </div>
            <div class="oh-sticky-table__tbody" id="tableBody{{stage.grouper.id}}" data-stage-id="{{stage.grouper.id}}" data-archive-stage="{{stage.grouper.is_archived_stage|lower}}" data-offboarding-id="{{offboarding.offboarding.id}}">
              {% include "offboarding/task/table_body.html" %}
            </div>
          </div>
        </div>
        {% if stage.list.has_next or stage.list.has_previous %}
        <div class="oh-pagination">
          <span class="oh-pagination__page">
            {% trans "Page" %} {{ stage.list.number }} {% trans "of" %} {{ stage.list.paginator.num_pages }}.
          </span>
          <nav class="oh-pagination__nav">
            <div class="oh-pagination__input-container me-3">
            <span class="oh-pagination__label me-1">{% trans "Page" %}</span>
            <input
              type="number"
              name="{{stage.dynamic_name}}"
              class="oh-pagination__input"
              value="{{stage.list.number}}"
              hx-get="{% url 'offboarding-pipeline-filter' %}?{{pd}}"
              hx-target="#offboardingBody{{offboarding.offboarding.id}}"
              min="1"
            />
            <span class="oh-pagination__label"
              >{% trans "of" %} {{stage.list.paginator.num_pages}}</span
            >
            </div>
            <ul class="oh-pagination__items">
            {% if stage.list.has_previous %}
            <li class="oh-pagination__item oh-pagination__item--wide">
              <a
              hx-target="#offboardingBody{{offboarding.offboarding.id}}"
              hx-get="{% url 'offboarding-pipeline-filter' %}?{{pd}}&{{stage.dynamic_name}}=1"
              class="oh-pagination__link"
              >{% trans "First" %}</a
              >
            </li>
            <li class="oh-pagination__item oh-pagination__item--wide">
              <a
              hx-target="#offboardingBody{{offboarding.offboarding.id}}"
              hx-get="{% url 'offboarding-pipeline-filter' %}?{{pd}}&{{stage.dynamic_name}}={{ stage.list.previous_page_number }}"
              class="oh-pagination__link"
              >{% trans "Previous" %}</a
              >
            </li>
            {% endif %} {% if stage.list.has_next %}
            <li class="oh-pagination__item oh-pagination__item--wide">
              <a
              hx-target="#offboardingBody{{offboarding.offboarding.id}}"
              hx-get="{% url 'offboarding-pipeline-filter' %}?{{pd}}&{{stage.dynamic_name}}={{ stage.list.next_page_number }}"
              class="oh-pagination__link"
              >{% trans "Next" %}</a
              >
            </li>
            <li class="oh-pagination__item oh-pagination__item--wide">
              <a
              hx-target="#offboardingBody{{offboarding.offboarding.id}}"
              hx-get="{% url 'offboarding-pipeline-filter' %}?{{pd}}&{{stage.dynamic_name}}={{ stage.list.paginator.num_pages }}"
              class="oh-pagination__link"
              >{% trans "Last" %}</a
              >
            </li>
            {% endif %}
            </ul>
          </nav>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
  {% endfor %}
