{% load basefilters %}
{% load horillafilters %}
{% load static %}
{% load i18n %}
{% include 'filter_tags.html' %}
<div class="oh-tabs__contents">
  <!-- start of shift request tab -->
  <div class="oh-tabs__content oh-tabs__content--active" id="shift_request">
    {% if data %}
      <div class="oh-table_sticky--wrapper">
        <div class="oh-sticky-dropdown--header">
          <div class="oh-dropdown" x-data="{open: false}">
            <button class="oh-sticky-dropdown_btn " @click="open = !open"><ion-icon name="ellipsis-vertical-sharp"
              role="img" class="md hydrated" aria-label="ellipsis vertical sharp"></ion-icon></button>
            <div class="oh-dropdown__menu oh-sticky-table_dropdown" x-show="open" @click.outside="open = false">
            <ul class="oh-dropdown__items" id="shiftRequestCells">
            </ul>
            </div>
          </div>
        </div>
      </div>
      <div id="shift-request-table" data-table-name="shift_request_tab">
        <!-- start of sticky table -->
        <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" style="width:10px">
                  <div class="centered-div">
                    <input
                      type="checkbox"
                      class="oh-input oh-input__checkbox all-shift-requests"
                      title='{% trans "Select All" %}'
                    />
                  </div>
                </div>
                <div
                  class="oh-sticky-table__th {% if request.sort_option.order == '-employee_id__employee_first_name' %}arrow-up {% elif request.sort_option.order == 'employee_id__employee_first_name' %}arrow-down {% else %}arrow-up-down {% endif %}"
                  hx-target="#view-container"
                  hx-get="{% url 'shift-request-search' %}?{{pd}}&sortby=employee_id__employee_first_name"
                >
                  {% trans "Employee" %}
                </div>
                <div data-cell-index="2" data-cell-title='{% trans "Requested Shift" %}' class="oh-sticky-table__th">{% trans "Requested Shift" %}</div>
                <div data-cell-index="3" data-cell-title='{% trans "Previous/Current Shift" %}' class="oh-sticky-table__th">{% trans "Previous/Current Shift" %}</div>
                <div data-cell-index="4" data-cell-title='{% trans "Requested Date" %}'
                  class="oh-sticky-table__th {% if request.sort_option.order == '-requested_date' %}arrow-up {% elif request.sort_option.order == 'requested_date' %}arrow-down {% else %}arrow-up-down {% endif %}"
                  hx-get="{% url 'shift-request-search' %}?{{pd}}&sortby=requested_date"
                  hx-target="#view-container"
                >{% trans "Requested Date" %}</div>
                <div data-cell-index="5" data-cell-title='{% trans "Requested Till" %}'
                  class="oh-sticky-table__th {% if request.sort_option.order == '-requested_till' %}arrow-up {% elif request.sort_option.order == 'requested_till' %}arrow-down {% else %}arrow-up-down {% endif %}"
                  hx-get="{% url 'shift-request-search' %}?{{pd}}&sortby=requested_till"
                  hx-target="#view-container"
                >{% trans "Requested Till" %}</div>
                <div data-cell-index="6" data-cell-title='{% trans "Status" %}' class="oh-sticky-table__th">{% trans "Status" %}</div>
                <div data-cell-index="7" data-cell-title='{% trans "Description" %}' class="oh-sticky-table__th">{% trans "Description" %}</div>
                <div class="oh-sticky-table__th" style="width:115px;">{% trans "Comment" %}</div>
                <div class="oh-sticky-table__th" style="width: 192px;">{% trans "Actions" %}</div>
                {% if perms.base.change_shiftrequest or request.user|is_reportingmanager %}
                  <div class="oh-sticky-table__th oh-sticky-table__right " style="width:180px;">{% trans "Confirmation" %}</div>
                {% endif %}
              </div>
            </div>
            <div class="oh-sticky-table__tbody">
              {% for shift_request in data %}
                  <div class="oh-sticky-table__tr"
                      draggable="true"
                      hx-get="{% url 'shift-request-details' shift_request.id %}?instances_ids={{requests_ids}}"
                      hx-target="#objectDetailsModalTarget"
                      data-toggle='oh-modal-toggle'
                      data-target = '#objectDetailsModal'
                  >
                    <div class="oh-sticky-table__sd
                      {% if shift_request.approved %} row-status--yellow
                      {% elif  shift_request.canceled %} row-status--red
                      {% endif %}"
                      onclick="event.stopPropagation();"
                    >
                      <div class="centered-div">
                        <input
                          type="checkbox"
                          id="{{shift_request.id}}"
                          onchange="highlightRow($(this))"
                          class="oh-input employee-checkbox oh-input__checkbox all-shift-requests-row"
                        />
                      </div>
                    </div>
                    <div class="oh-sticky-table__td" >
                      <div class="oh-profile oh-profile--md">
                        <div class="oh-profile__avatar mr-1">
                          <img src="{{shift_request.employee_id.get_avatar}}" class="oh-profile__image" alt="Username">
                        </div>
                        <span class="oh-profile__name oh-text--dark">{{shift_request.employee_id}}</span>
                      </div>
                    </div>
                    <div class="oh-sticky-table__td" data-cell-index="2">{{shift_request.shift_id}}</div>
                    <div class="oh-sticky-table__td" data-cell-index="3">{{shift_request.previous_shift_id}}</div>
                    <div class="oh-sticky-table__td dateformat_changer" data-cell-index="4">{{shift_request.requested_date}}</div>
                    <div class="oh-sticky-table__td dateformat_changer" data-cell-index="5">{{shift_request.requested_till}}</div>
                    <div class="oh-sticky-table__td" data-cell-index="6">{% if shift_request.approved %}{% trans "Approved" %}{% elif shift_request.canceled %}{% trans "Rejected" %}{% else %}{% trans "Requested" %}{% endif %}</div>
                    <div class="oh-sticky-table__td" data-cell-index="7">{{shift_request.description|truncatechars:30}}</div>

                    <div class="oh-sticky-table__td" onclick="event.stopPropagation();">

                        <button type="button" hx-get="{% url 'view-shift-comment' shift_request.id %}" hx-target="#commentContainer"
                                data-target = '#activitySidebar' title="View Comment"  class="oh-btn oh-btn--light oh-activity-sidebar__open w-100" style="flex: 1 0 auto; width:20px;height: 40.68px; padding: 0;" onclick="event.stopPropagation()">
                                <ion-icon name="newspaper-outline" role="img" class="md hydrated" aria-label="newspaper outline"></ion-icon>
                        </button>

                    </div>

                    <div class="oh-sticky-table__td" onclick="event.stopPropagation();">
                      <div class="oh-btn-group" >
                        {% if shift_request.approved == False and not shift_request.canceled   %}
                          <a hx-get="{% url 'shift-request-update' shift_request.id %}" hx-target='#shiftRequestModalUpdateBody' data-toggle="oh-modal-toggle" data-target='#shiftRequestModalUpdate' class="oh-btn oh-btn--light-bkg w-50" title="{% trans 'Edit' %}"><ion-icon name="create-outline"></ion-icon></a>
                        {% else %}
                          <button class="oh-btn oh-btn--light-bkg w-50" disabled><ion-icon name="create-outline" ></ion-icon></button></td>
                        {% endif %}
                        <a
                          class="oh-btn oh-btn--light-bkg w-50"
                          data-toggle="oh-modal-toggle"
                          data-target="#objectCreateModal"
                          hx-get="{% url 'shift-request-duplicate' shift_request.id %}?{{pg}}"
                          title="{% trans 'Duplicate' %}"
                          hx-target="#objectCreateModalTarget"
                          style= "cursor: pointer;"
                        >
                        <ion-icon name="copy-outline"></ion-icon>
                        </a>
                        {% if shift_request.approved == False and shift_request.canceled == False %}
                          <form action="{% url 'shift-request-delete' shift_request.id  %}" onsubmit="return confirm('{% trans "Are you sure you want to delete this shift request?" %}');" method='post' class="w-75">
                            {% csrf_token %}
                            <button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" title="{% trans 'Remove' %}"><ion-icon name="trash-outline"></ion-icon></button>
                          </form>
                        {% elif perms.base.change_shiftrequest or request.user|is_reportingmanager %}
                          <form action="{% url 'shift-request-delete' shift_request.id  %}" onsubmit="return confirm('{% trans "Are you sure you want to delete this shift request?" %}');" method='post' class="w-75">
                            {% csrf_token %}
                            <button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" title="{% trans 'Remove' %}"><ion-icon name="trash-outline"></ion-icon></button>
                          </form>
                        {% else %}
                          <button class="oh-btn oh-btn--light-bkg w-50" disabled><ion-icon name="trash-outline"></ion-icon></button></td>
                        {% endif %}
                      </div>
                    </div>
                    {% if perms.base.change_shiftrequest or request.user|is_reportingmanager %}
                      <div class="oh-sticky-table__td oh-sticky-table__right " onclick="event.stopPropagation();">
                        <div class="oh-btn-group" >
                            {% if shift_request.approved == False and shift_request.canceled == False %}
                              <a  href="{% url 'shift-request-approve' shift_request.id %}"
                                  title="{% trans 'Approve' %}"
                                  onclick="return confirm('{% trans "Do you want to approve this request?" %}')"
                                  class="oh-btn oh-btn--success w-100">
                                  <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
                              </a>
                            {% else %}
                              <a  href="#" title="{% trans 'Approve' %}"
                                  class="oh-btn oh-btn--success oh-btn--disabled w-100">
                                  <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
                              </a>
                            {% endif %}

                            {% if shift_request.canceled == False %}
                              <a
                                  href="{% url 'shift-request-cancel' shift_request.id %}"
                                  title="{% trans 'Reject' %}"
                                  onclick="return confirm('{% trans "Do you want to reject this request?" %}')"
                                  class="oh-btn oh-btn--danger w-100">
                                  <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
                              </a>
                            {% else %}
                              <a type="submit" href="#" title="{% trans 'Reject' %}"
                                  class="oh-btn oh-btn--danger oh-btn--disabled
                                  w-100" >
                                  <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
                              </a>
                            {% endif %}
                        </div>
                      </div>
                    {% endif %}
                  </div>
              {% endfor %}
            </div>
          </div>
        </div>
        <!-- end of sticky table -->
      </div>

      <!-- start of pagination -->
      <div class="oh-pagination">
        <span class="oh-pagination__page">
          {% trans "Page" %} {{ data.number }} {% trans "of" %} {{ data.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="page" class="oh-pagination__input" value="{{data.number}}"
              hx-get="{% url 'shift-request-search' %}?{{pd}}" hx-target="#view-container" min="1" />
            <span class="oh-pagination__label">{% trans "of" %} {{data.paginator.num_pages}}</span>
          </div>
          <ul class="oh-pagination__items">
            {% if data.has_previous %}
            <li class="oh-pagination__item oh-pagination__item--wide">
              <a hx-target='#view-container' hx-get="{% url 'shift-request-search' %}?{{pd}}&page=1"
                class="oh-pagination__link">{% trans "First" %}</a>
            </li>
            <li class="oh-pagination__item oh-pagination__item--wide">
              <a hx-target='#view-container'
                hx-get="{% url 'shift-request-search' %}?{{pd}}&page={{ data.previous_page_number }}"
                class="oh-pagination__link">{% trans "Previous" %}</a>
            </li>
            {% endif %}
            {% if data.has_next %}
            <li class="oh-pagination__item oh-pagination__item--wide">
              <a hx-target='#view-container'
                hx-get="{% url 'shift-request-search' %}?{{pd}}&page={{ data.next_page_number }}"
                class="oh-pagination__link">{% trans "Next" %}</a>
            </li>
            <li class="oh-pagination__item oh-pagination__item--wide">
              <a hx-target='#view-container'
                hx-get="{% url 'shift-request-search' %}?{{pd}}&page={{ data.paginator.num_pages }}"
                class="oh-pagination__link">{% trans "Last" %}</a>
            </li>
            {% endif %}
          </ul>
        </nav>
      </div>
      <!-- end of pagination -->
    {% else %}
      <!-- start of empty page -->
      <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;" >
        <img
          style="width: 150px; height: 150px"
          src="{% static 'images/ui/no-results.png' %}"
          class="oh-404__image mb-4"
        />
        <h5 class="oh-404__subtitle">
          {% trans "No search result found!" %}
        </h5>
      </div>
      <!-- end of empty page -->
    {% endif %}
  </div>
  <!-- end of shift request tab -->


  <!-- start of shift allocation tab -->
  <div class="oh-tabs__content" id="allocated_shift">
    {% if allocated_data %}
      <div class="oh-table_sticky--wrapper">
        <div class="oh-sticky-dropdown--header">
          <div class="oh-dropdown" x-data="{open: false}">
            <button class="oh-sticky-dropdown_btn " @click="open = !open"><ion-icon name="ellipsis-vertical-sharp"
              role="img" class="md hydrated" aria-label="ellipsis vertical sharp"></ion-icon></button>
            <div class="oh-dropdown__menu oh-sticky-table_dropdown" x-show="open" @click.outside="open = false">
            <ul class="oh-dropdown__items" id="allocationRequestCells">
            </ul>
            </div>
          </div>
        </div>
      </div>
      <div id="shift-allocation-request-table" data-table-name="allocation_request_tab">
        <!-- start of sticky table -->
        <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" style="width:10px">
                  <div class="centered-div">
                    <input
                      type="checkbox"
                      class="oh-input oh-input__checkbox all-shift-requests"
                      title='{% trans "Select All" %}'
                    />
                  </div>
                </div>
                <div
                  class="oh-sticky-table__th {% if request.sort_option.order == '-employee_id__employee_first_name' %}arrow-up {% elif request.sort_option.order == 'employee_id__employee_first_name' %}arrow-down {% else %}arrow-up-down {% endif %}"
                  hx-target="#view-container"
                  hx-get="{% url 'shift-request-search' %}?{{pd}}&sortby=employee_id__employee_first_name"
                >
                  {% trans "Employee" %}
                </div>
                <div
                  class="oh-sticky-table__th {% if request.sort_option.order == '-reallocate_to__employee_first_name' %}arrow-up {% elif request.sort_option.order == 'reallocate_to__employee_first_name' %}arrow-down {% else %}arrow-up-down {% endif %}"
                  hx-target="#view-container"
                  hx-get="{% url 'shift-request-search' %}?{{pd}}&sortby=reallocate_to__employee_first_name"
                  style="width:210px;"
                >
                  {% trans "Allocated Employee" %}
                </div>
                <div class="oh-sticky-table__th">{% trans "User Availability" %}</div>
                <div data-cell-index="12" data-cell-title='{% trans "Requested Shift" %}' class="oh-sticky-table__th">{% trans "Requested Shift" %}</div>
                <div data-cell-index="13" data-cell-title='{% trans "Previous/Current Shift" %}' class="oh-sticky-table__th">{% trans "Previous/Current Shift" %}</div>
                <div data-cell-index="14" data-cell-title='{% trans "Requested Date" %}'
                  class="oh-sticky-table__th {% if request.sort_option.order == '-requested_date' %}arrow-up {% elif request.sort_option.order == 'requested_date' %}arrow-down {% else %}arrow-up-down {% endif %}"
                  hx-get="{% url 'shift-request-search' %}?{{pd}}&sortby=requested_date"
                  hx-target="#view-container"
                >{% trans "Requested Date" %}</div>
                <div data-cell-index="15" data-cell-title='{% trans "Requested Till" %}'
                  class="oh-sticky-table__th {% if request.sort_option.order == '-requested_till' %}arrow-up {% elif request.sort_option.order == 'requested_till' %}arrow-down {% else %}arrow-up-down {% endif %}"
                  hx-get="{% url 'shift-request-search' %}?{{pd}}&sortby=requested_till"
                  hx-target="#view-container"
                >{% trans "Requested Till" %}</div>
                <div data-cell-index="16" data-cell-title='{% trans "Description" %}' class="oh-sticky-table__th">{% trans "Description" %}</div>
                <div class="oh-sticky-table__th" style="width:115px;">{% trans "Comment" %}</div>
                <div class="oh-sticky-table__th">{% trans "Actions" %}</div>
                {% if perms.base.change_shiftrequest or request.user|is_reportingmanager %}
                  <div class="oh-sticky-table__th oh-sticky-table__right" style="width:180px;">{% trans "Confirmation" %}</div>
                {% endif %}
              </div>
            </div>
            <div class="oh-sticky-table__tbody">
              {% for shift_request in allocated_data %}
                  <div class="oh-sticky-table__tr"
                      draggable="true"
                      hx-get="{% url 'shift-allocation-request-details' shift_request.id %}?instances_ids={{allocated_ids}}"
                      hx-target="#objectDetailsModalTarget"
                      data-toggle='oh-modal-toggle'
                      data-target = '#objectDetailsModal'
                  >
                    <div class="oh-sticky-table__sd
                      {% if shift_request.approved %} row-status--yellow
                      {% elif  shift_request.canceled %} row-status--red
                      {% endif %}"
                      onclick="event.stopPropagation();"
                    >
                      <div class="centered-div">
                        <input
                          type="checkbox"
                          id="{{shift_request.id}}"
                          onchange="highlightRow($(this))"
                          class="oh-input employee-checkbox oh-input__checkbox all-shift-requests-row"
                        />
                      </div>
                    </div>
                    <div class="oh-sticky-table__td" >
                      <div class="oh-profile oh-profile--md">
                        <div class="oh-profile__avatar mr-1">
                          <img src="{{shift_request.employee_id.get_avatar}}" class="oh-profile__image" alt="Username">
                        </div>
                        <span class="oh-profile__name oh-text--dark">{{shift_request.employee_id}}</span>
                      </div>
                    </div>
                    <div class="oh-sticky-table__td">
                      <div class="oh-profile oh-profile--md">
                        <div class="oh-profile__avatar mr-1">
                          <img src="{{shift_request.reallocate_to.get_avatar}}" class="oh-profile__image">
                        </div>
                        <span class="oh-profile__name oh-text--dark">{{shift_request.reallocate_to}}</span>
                      </div>
                    </div>
                    <div class="oh-sticky-table__td">
                      {% if shift_request.reallocate_approved == True %}
                        <div class="d-flex align-items-center">
                          <span class="oh-dot oh-dot--small me-1 oh-dot--color  oh-dot--success "></span><span class=" link-success ">{% trans "Available" %}</span>
                        </div>
                      {% elif shift_request.reallocate_canceled == True %}
                        <div class="d-flex align-items-center">
                          <span class="oh-dot oh-dot--small me-1 oh-dot--color  oh-dot--danger "></span><span class=" link-danger ">{% trans "Not Available" %}</span>
                        </div>
                      {% else %}
                        <div class="d-flex align-items-center">
                          <span class="oh-dot oh-dot--small me-1 oh-dot--color" style="background-color:grey;"></span><span class=" link-secondary ">{% trans "Not Marked" %}</span>
                        </div>
                      {% endif %}
                    </div>
                    <div class="oh-sticky-table__td" data-cell-index="12">{{shift_request.shift_id}}</div>
                    <div class="oh-sticky-table__td" data-cell-index="13">{{shift_request.previous_shift_id}}</div>
                    <div class="oh-sticky-table__td dateformat_changer" data-cell-index="14">{{shift_request.requested_date}}</div>
                    <div class="oh-sticky-table__td dateformat_changer" data-cell-index="15">{{shift_request.requested_till}}</div>
                    <div class="oh-sticky-table__td" data-cell-index="16">{{shift_request.description|truncatechars:17}}</div>

                    <div class="oh-sticky-table__td" onclick="event.stopPropagation();">

                        <button type="button" hx-get="{% url 'view-shift-comment' shift_request.id %}" hx-target="#commentContainer"
                                data-target = '#activitySidebar' title="View Comment"  class="oh-btn oh-btn--light oh-activity-sidebar__open w-100" style="flex: 1 0 auto; width:20px;height: 40.68px; padding: 0;" onclick="event.stopPropagation()">
                                <ion-icon name="newspaper-outline" role="img" class="md hydrated" aria-label="newspaper outline"></ion-icon>
                        </button>

                    </div>

                    {% if perms.base.change_shiftrequest or request.user|is_reportingmanager %}
                      <div class="oh-sticky-table__td" onclick="event.stopPropagation();">
                        <div class="oh-btn-group" >
                          {% if shift_request.approved == False and not shift_request.canceled   %}
                            <a hx-get="{% url 'shift-allocation-request-update' shift_request.id %}" hx-target='#shiftRequestModalUpdateBody' data-toggle="oh-modal-toggle" data-target='#shiftRequestModalUpdate' class="oh-btn oh-btn--light-bkg w-50" title="{% trans 'Edit' %}"><ion-icon name="create-outline"></ion-icon></a>
                          {% else %}
                            <button class="oh-btn oh-btn--light-bkg w-50" disabled><ion-icon name="create-outline" ></ion-icon></button></td>
                          {% endif %}
                          {% if shift_request.approved == False and shift_request.canceled == False %}
                            <form action="{% url 'shift-request-delete' shift_request.id  %}" onsubmit="return confirm('{% trans "Are you sure you want to delete this shift request?" %}');" method='post' class="w-50">
                              {% csrf_token %}
                              <button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" title="{% trans 'Remove' %}"><ion-icon name="trash-outline"></ion-icon></button>
                            </form>
                          {% elif perms.base.change_shiftrequest or request.user|is_reportingmanager %}
                            <form action="{% url 'shift-request-delete' shift_request.id  %}" onsubmit="return confirm('{% trans "Are you sure you want to delete this shift request?" %}');" method='post' class="w-50">
                              {% csrf_token %}
                              <button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" title="{% trans 'Remove' %}"><ion-icon name="trash-outline"></ion-icon></button>
                            </form>
                          {% else %}
                            <button class="oh-btn oh-btn--light-bkg w-50" disabled><ion-icon name="trash-outline"></ion-icon></button></td>
                          {% endif %}
                        </div>
                      </div>
                    {% endif %}

                    <div class="oh-sticky-table__td oh-sticky-table__right" onclick="event.stopPropagation();">

                      <div class="oh-btn-group" >

                        {% if request.user.employee_get == shift_request.reallocate_to and not request.user|is_reportingmanager %}
                          {% if shift_request.approved == True or shift_request.canceled == True or shift_request.reallocate_approved == True %}
                            <button class='oh-btn oh-btn--success w-100' disabled>
                              <ion-icon name="checkmark-outline"></ion-icon>
                            </button></td>
                          {% else %}
                            <a href="/shift-allocation-request-approve/{{shift_request.id}}/" onclick="return confirm('{% trans "Are you available for this shift reallocation?" %}')" class='oh-btn oh-btn--success w-100' title='{% trans "Available" %}'>
                              <ion-icon name="checkmark-outline"></ion-icon>
                            </a></td>
                          {% endif %}
                        {% endif %}

                        {% if perms.base.change_shiftrequest or request.user|is_reportingmanager %}
                          {% if shift_request.approved == False and shift_request.canceled == False %}
                            <a href="/shift-request-approve/{{shift_request.id}}/" onclick="return confirm('{% trans "Do you want to approve this request?" %}')" class='oh-btn oh-btn--success w-100' title='{% trans "Approve" %}'>
                              <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
                            </a>

                          {% else %}
                            <button class='oh-btn oh-btn--success w-100' disabled>
                              <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
                            </button></td>
                          {% endif %}
                        {% endif %}

                        {% if request.user.employee_get == shift_request.reallocate_to and not request.user|is_reportingmanager %}
                          {% if shift_request.reallocate_canceled == True or shift_request.approved == True %}
                            <button class='oh-btn oh-btn--danger w-100' disabled>
                              <ion-icon name="close-circle-outline"></ion-icon>
                            </button></td>
                          {% else %}
                            <a href="/shift-allocation-request-cancel/{{shift_request.id}}/" onclick="return confirm('{% trans "Are you not available for this shift reallocation?" %}')" class='oh-btn oh-btn--danger w-100' title='{% trans "Not available" %}'>
                              <ion-icon name="close-circle-outline"></ion-icon>
                            </a></td>
                          {% endif %}
                        {% endif %}

                        {% if request.user.employee_get == shift_request.employee_id and not request.user|is_reportingmanager %}

                          {% if shift_request.approved == False and not shift_request.canceled   %}
                            <a hx-get="{% url 'shift-allocation-request-update' shift_request.id %}" hx-target='#shiftRequestModalUpdateBody' data-toggle="oh-modal-toggle" data-target='#shiftRequestModalUpdate' class="oh-btn oh-btn--light-bkg w-50" title="{% trans 'Edit' %}"><ion-icon name="create-outline"></ion-icon></a>
                          {% else %}
                            <button class="oh-btn oh-btn--light-bkg w-50" disabled><ion-icon name="create-outline" ></ion-icon></button></td>
                          {% endif %}
                          {% if shift_request.approved == False and shift_request.canceled == False %}
                            <form action="{% url 'shift-request-delete' shift_request.id  %}" onsubmit="return confirm('{% trans "Are you sure you want to delete this shift request?" %}');" method='post' class="w-50">
                              {% csrf_token %}
                              <button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" title="{% trans 'Remove' %}"><ion-icon name="trash-outline"></ion-icon></button>
                            </form>
                          {% else %}
                            <button class="oh-btn oh-btn--light-bkg w-50" disabled><ion-icon name="trash-outline"></ion-icon></button></td>
                          {% endif %}
                        {% endif %}


                        {% if request.user|is_reportingmanager %}
                          {% if shift_request.canceled == True %}
                            <button disabled class='oh-btn oh-btn--danger w-100'>
                              <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
                            </button></td>
                          {% else %}
                            <a href="/shift-allocation-request-cancel/{{shift_request.id}}/" onclick="return confirm('{% trans "Do you want to reject this request?" %}')" class='oh-btn oh-btn--danger w-100' title='{% trans "Reject" %}'>
                              <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
                            </a></td>
                          {% endif %}
                        {% endif %}
                      </div>

                    </div>


                  </div>
              {% endfor %}
            </div>
          </div>
        </div>
        <!-- end of sticky table -->
      </div>

      <!-- start of pagination -->
      <div class="oh-pagination">
        <span class="oh-pagination__page">
          {% trans "Page" %} {{ allocated_data.number }} {% trans "of" %} {{ allocated_data.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="page" class="oh-pagination__input" value="{{allocated_data.number}}"
              hx-get="{% url 'shift-request-search' %}?{{pd}}" hx-target="#view-container" min="1" />
            <span class="oh-pagination__label">{% trans "of" %} {{allocated_data.paginator.num_pages}}</span>
          </div>
          <ul class="oh-pagination__items">
            {% if allocated_data.has_previous %}
            <li class="oh-pagination__item oh-pagination__item--wide">
              <a hx-target='#view-container' hx-get="{% url 'shift-request-search' %}?{{pd}}&page=1"
                class="oh-pagination__link">{% trans "First" %}</a>
            </li>
            <li class="oh-pagination__item oh-pagination__item--wide">
              <a hx-target='#view-container'
                hx-get="{% url 'shift-request-search' %}?{{pd}}&page={{ allocated_data.previous_page_number }}"
                class="oh-pagination__link">{% trans "Previous" %}</a>
            </li>
            {% endif %}
            {% if allocated_data.has_next %}
            <li class="oh-pagination__item oh-pagination__item--wide">
              <a hx-target='#view-container'
                hx-get="{% url 'shift-request-search' %}?{{pd}}&page={{ allocated_data.next_page_number }}"
                class="oh-pagination__link">{% trans "Next" %}</a>
            </li>
            <li class="oh-pagination__item oh-pagination__item--wide">
              <a hx-target='#view-container'
                hx-get="{% url 'shift-request-search' %}?{{pd}}&page={{ allocated_data.paginator.num_pages }}"
                class="oh-pagination__link">{% trans "Last" %}</a>
            </li>
            {% endif %}
          </ul>
        </nav>
      </div>
      <!-- end of pagination -->
    {% else %}
      <!-- start of empty page -->
      <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;" >
        <img
          style="width: 150px; height: 150px"
          src="{% static 'images/ui/no-results.png' %}"
          class="oh-404__image mb-4"
        />
        <h5 class="oh-404__subtitle">
          {% trans "No search result found!" %}
        </h5>
      </div>
      <!-- end of empty page -->
    {% endif %}
    </div>
    <!-- end of shift allocation tab -->
</div>

    <!-- start of comment modal -->
    <div
      class="oh-modal"
      id="shiftcommentModal"
      role="dialog"
      aria-labelledby="emptagModal"
      aria-hidden="true"
    >
      <div class="oh-modal__dialog">
        <div class="oh-modal__dialog-header">
          <h2 class="oh-modal__dialog-title" id="createModalTitle">
            {% trans "Add Comment" %}
          </h2>
          <button class="oh-modal__close" aria-label="Close">
            <ion-icon name="close-outline"></ion-icon>
          </button>
        </div>
        <div class="oh-modal__dialog-body" id="shiftRequestCommentForm"></div>
      </div>
    </div>
    <!-- end of comment modal -->

    <script src="{% static '/base/actions.js' %}"></script>
<script>
  function addingShiftIds() {
    var ids = JSON.parse($("#selectedShifts").attr("data-ids") || "[]");
    var selectedCount = 0;

    $(".all-shift-requests-row").each(function () {
      if ($(this).is(":checked")) {
        ids.push(this.id);
      } else {
        var index = ids.indexOf(this.id);
        if (index > -1) {
          ids.splice(index, 1);
        }
      }
    });

    ids = makeShiftListUnique(ids);
    selectedCount = ids.length;

    getCurrentLanguageCode(function (code) {
      languageCode = code;
      var message = rowMessages[languageCode];
      $("#selectedShifts").attr("data-ids", JSON.stringify(ids));
      if (selectedCount === 0) {
        $("#exportShifts").css("display", "none");
        $("#unselectAllShifts").css("display", "none");
        $("#selectedShowShifts").css("display", "none");
      } else {
        $("#exportShifts").css("display", "inline-flex");
        $("#unselectAllShifts").css("display", "inline-flex");
        $("#selectedShowShifts").css("display", "inline-flex");
        $("#selectedShowShifts").text(selectedCount + " - " + message);
      }
    });
  }

  $(document).ready(function () {
    $(".all-shift-requests-row").change(function () {
      var parentTable = $(this).closest(".oh-sticky-table");
      var body = parentTable.find(".oh-sticky-table__tbody");
      var parentCheckbox = parentTable.find(".all-shift-requests");
      parentCheckbox.prop(
        "checked",
        body.find(".all-shift-requests-row:checked").length ===
          body.find(".all-shift-requests-row").length
      );
      addingShiftIds();
    });

    $(".all-shift-requests").change(function () {
      addingShiftIds();
    });

    tickShiftCheckboxes();

    $("#selectAllShifts").click(function () {
      $("#selectedShifts").attr("data-clicked", 1);
      $("#selectedShowShifts").removeAttr("style");
      var savedFilters = JSON.parse(localStorage.getItem("savedFilters"));

      if (savedFilters && savedFilters["filterData"] !== null) {
        var filter = savedFilters["filterData"];
        $.ajax({
          url: '{% url "shift-select-filter" %}',
          data: { page: "all", filter: JSON.stringify(filter) },
          type: "GET",
          dataType: "json",
          success: function (response) {
            var employeeIds = response.employee_ids;
            var selectedCount = employeeIds.length;
            for (var i = 0; i < employeeIds.length; i++) {
              var empId = employeeIds[i];
              $("#" + empId).prop("checked", true);
            }
            $("#selectedShifts").attr("data-ids", JSON.stringify(employeeIds));

            count = makeShiftListUnique(employeeIds);
            tickShiftCheckboxes(count);
          },
          error: function (xhr, status, error) {
            console.error("Error:", error);
          },
        });
      } else {
        $.ajax({
          url: '{% url "shift-select" %}',
          data: { page: "all" },
          type: "GET",
          dataType: "json",
          success: function (response) {
            var employeeIds = response.employee_ids;
            var selectedCount = employeeIds.length;
            for (var i = 0; i < employeeIds.length; i++) {
              var empId = employeeIds[i];
              $("#" + empId).prop("checked", true);
            }
            var previousIds = $("#selectedShifts").attr("data-ids");
            $("#selectedShifts").attr(
              "data-ids",
              JSON.stringify(
                Array.from(
                  new Set([...employeeIds, ...JSON.parse(previousIds)])
                )
              )
            );
            count = makeShiftListUnique(employeeIds);
            tickShiftCheckboxes(count);
          },
          error: function (xhr, status, error) {
            console.error("Error:", error);
          },
        });
      }
    });

    $("#unselectAllShifts").click(function () {
      $("#selectedShifts").attr("data-clicked", 0);
      $.ajax({
        url: '{% url "shift-select" %}',
        data: { page: "all", filter: "{}" },
        type: "GET",
        dataType: "json",
        success: function (response) {
          var employeeIds = response.employee_ids;
          for (var i = 0; i < employeeIds.length; i++) {
            var empId = employeeIds[i];
            $("#" + empId).prop("checked", false);
            $(".all-shift-requests").prop("checked", false);
          }
          var ids = JSON.parse($("#selectedShifts").attr("data-ids") || "[]");
          var uniqueIds = makeListUnique(ids);
          toggleHighlight(uniqueIds);
          $("#selectedShifts").attr("data-ids", JSON.stringify([]));

          count = [];
          tickShiftCheckboxes(count);
        },
        error: function (xhr, status, error) {
          console.error("Error:", error);
        },
      });
    });
    $("#exportShifts").click(function (e) {
      exportShiftRequests();
    });
  });
  // toggle colums //
  toggleColumns("shift-request-table", "shiftRequestCells");
  localStorageShiftRequestCells = localStorage.getItem("shift_request_tab");

  if (!localStorageShiftRequestCells) {
    $("#shiftRequestCells").find("[type=checkbox]").prop("checked", true);
  }
  $("[type=checkbox]").change();

  toggleColumns("shift-allocation-request-table", "allocationRequestCells");
  localStorageShiftRequestCells = localStorage.getItem("allocation_request_tab");
  if (!localStorageShiftRequestCells) {
    $("#allocationRequestCells").find("[type=checkbox]").prop("checked", true);
  }
  $("[type=checkbox]").change();

  $(document).ready(function () {
    const activeTab = localStorage.getItem("shiftRequestActiveTab");
    if (activeTab != null) {
      $(".oh-tabs__content--active").toggleClass("oh-tabs__content--active");
      $(".oh-tabs__tab--active").toggleClass("oh-tabs__tab--active");
      $(`[data-target="${activeTab}"]`).toggleClass("oh-tabs__tab--active");
      $(activeTab).toggleClass("oh-tabs__content--active");
    }
    $(".oh-tabs__tab[data-target]").click(function (e) {
      e.preventDefault();
      localStorage.setItem(
        "shiftRequestActiveTab",
        $(this).attr("data-target")
      );
    });
  });
</script>