{% load i18n %} {% load static %}
{% load basefilters %}
{% load attendancefilters %}
{% if messages %}
<div class="oh-wrapper">
  {% for message in messages %}
  <div class="oh-alert-container">
    <div class="oh-alert oh-alert--animated {{message.tags}}">
      {{ message }}
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}

<div class="oh-wrapper mt-4">
	{% if employee.employee_work_info.shift_id or shift_data%}
	<span class="fw-bold" style="font-size:17px;"> {% if employee.employee_work_info.shift_id %} {% trans "Current Shift" %} &nbsp : &nbsp {{employee.employee_work_info.shift_id}} {% endif %}</span>
	<button style="display:inline-block;"
			class="oh-btn oh-btn--secondary ms-3"
			data-toggle="oh-modal-toggle"
			data-target="#shiftRequestModal"
			hx-get="{% url 'shift-request-reallocate' %}?emp_id={{request.user.employee_get.id}}"
			hx-target="#shiftRequestTargetModal"
		>
		<ion-icon name="add-sharp" class="mr-1 md hydrated" role="img" aria-label="add sharp"></ion-icon>{% trans "Reallocate Shift." %}
	</button>
	{% endif %}

  <div class="oh-tabs mt-3">
    <ul class="oh-tabs__tablist">
      <li class="oh-tabs__tab oh-tabs__tab--active" data-target="#shift_tab_1">
        <div>
          <img
            src="{% static 'images/ui/work-from-home (1).png' %}"
            alt=""
            style="width: 25px; height: 25px; margin-right: 3px"
          />
          {% trans "Work type request" %}
        </div>
        <button
          class="oh-btn oh-btn--secondary-outline oh-stop-prop oh-accordion-meta__btn p-2"
          title="Add"
          hx-get="{% url 'work-type-request' %}?emp_id={{emp_id}}"
          hx-target="#objectCreateModalTarget"
          data-target="#objectCreateModal"
          data-toggle="oh-modal-toggle"
        >
          <ion-icon
            class="md hydrated"
            name="add-outline"
            role="img"
            aria-label="add outline"
          ></ion-icon>
        </button>
      </li>
      <li class="oh-tabs__tab" data-target="#shift_tab_3">
        <div>
          <img
            src="{% static 'images/ui/work-from-home.png' %}"
            alt=""
            style="width: 25px; height: 25px; margin-right: 3px"
          />
          {% trans "Rotating work type" %}
        </div>
        {% if not request.GET.profile and perms.base.add_rotatingworktypeassign or request.user|is_reportingmanager %}
        	<button
        	  class="oh-btn oh-btn--secondary-outline oh-stop-prop oh-accordion-meta__btn p-2"
        	  title="{% trans 'Add' %}"
        	  hx-get="{% url 'rotating-work-type-assign-add' %}?emp_id={{emp_id}}"
        	  hx-target="#objectCreateModalTarget"
        	  data-target="#objectCreateModal"
        	  data-toggle="oh-modal-toggle"
        	>
        	  <ion-icon
        	    class="md hydrated"
        	    name="add-outline"
        	    role="img"
        	    aria-label="add outline"
        	  ></ion-icon>
        	</button>
        {% endif%}
      </li>
      <li class="oh-tabs__tab" data-target="#shift_tab_4">
        <div>
          <img
            src="{% static 'images/ui/time-management.png' %}"
            alt=""
            style="width: 25px; height: 25px; margin-right: 3px; opacity: 0.5"
          />
          {% trans "Shift request" %}
        </div>
        <button
          class="oh-btn oh-btn--secondary-outline oh-stop-prop oh-accordion-meta__btn p-2"
          title="Add"
          hx-get="{% url 'shift-request' %}?emp_id={{emp_id}}"
          hx-target="#objectCreateModalTarget"
          data-target="#objectCreateModal"
          data-toggle="oh-modal-toggle"
        >
          <ion-icon
            class="md hydrated"
            name="add-outline"
            role="img"
            aria-label="add outline"
          ></ion-icon>
        </button>
      </li>
      <li class="oh-tabs__tab" data-target="#shift_tab_2">
        <div>
          <img
            src="{% static 'images/ui/shift.png' %}"
            alt=""
            style="width: 25px; height: 25px; margin-right: 3px"
          />
          {% trans "Rotating Shift" %}
        </div>
        {% if not request.GET.profile and perms.add_rotatingworktypeassign or request.user|is_reportingmanager %}
        	<button
        	  class="oh-btn oh-btn--secondary-outline oh-stop-prop oh-accordion-meta__btn p-2"
        	  title="Add"
        	  hx-get="{% url 'rotating-shift-assign-add' %}?emp_id={{emp_id}}"
        	  hx-target="#objectCreateModalTarget"
        	  data-target="#objectCreateModal"
        	  data-toggle="oh-modal-toggle"
        	>
        	  <ion-icon
        	    class="md hydrated"
        	    name="add-outline"
        	    role="img"
        	    aria-label="add outline"
        	  ></ion-icon>
        	</button>
        {% endif %}
      </li>
    </ul>
    <div class="oh-tabs__contents" id="view-container">
      <div class="oh-tabs__content oh-tabs__content--active" id="shift_tab_1">
        <!-- Sticky Table -->
        {% if work_data %}
        	<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">
        	          <div class="d-flex">
        	            <div>
        	              {% trans "Employee" %}
        	            </div>
        	          </div>
        	        </div>
        	        <div class="oh-sticky-table__th">
        	          {% trans "Requested Work Type" %}
        	        </div>
        	        <div class="oh-sticky-table__th">
        	          {% trans "Previous/Current Work Type" %}
        	        </div>
        	        <div class="oh-sticky-table__th">
        	          {% trans "Requested Date" %}
        	        </div>
        	        <div class="oh-sticky-table__th">
        	          {% trans "Requested Till" %}
        	        </div>
        	        <div class="oh-sticky-table__th">{% trans "Description" %}</div>
        	        <div class="oh-sticky-table__th">{% trans "Actions" %}</div>
        	        {% if not request.GET.profile %}
						{% if perms.base.change_worktyperequest or request.user|is_reportingmanager %}
        	        		<div class="oh-sticky-table__th"></div>
        	        		<div class="oh-sticky-table__th"></div>
						{% endif %}
        	        {% endif %}
        	      </div>
        	    </div>
        	    {% for work_type_request in work_data %}
        	    	<div class="oh-sticky-table__tbody">
        	    	  <div
        	    	    class="oh-sticky-table__tr"
        	    	    hx-get="{% url 'work-type-request-single-view' work_type_request.id %}?instances_ids={{work_type_requests_ids}}"
        	    	    hx-target="#objectDetailsModalTarget"
        	    	    data-target="#objectDetailsModal"
        	    	    data-toggle="oh-modal-toggle"
        	    	    draggable="true"
        	    	  >
        	    	    <div class="oh-sticky-table__sd">
        	    	      <div class="d-flex">
        	    	        <div class="oh-profile oh-profile--md">
        	    	          <div class="oh-profile__avatar mr-1">
        	    	            <img
        	    	              src="https://ui-avatars.com/api/?name={{work_type_request.employee_id}}&amp;background=random"
        	    	              class="oh-profile__image"
        	    	              alt="Username"
        	    	            />
        	    	          </div>
        	    	          <span class="oh-profile__name oh-text--dark"
        	    	            >{{work_type_request.employee_id}}</span
        	    	          >
        	    	        </div>
        	    	      </div>
        	    	    </div>
        	    	    <div class="oh-sticky-table__td">
        	    	      {{work_type_request.work_type_id}}
        	    	    </div>
        	    	    <div class="oh-sticky-table__td">
        	    	      {{work_type_request.previous_work_type_id}}
        	    	    </div>
        	    	    <div class="oh-sticky-table__td dateformat_changer">
        	    	      {{work_type_request.requested_date}}
        	    	    </div>
        	    	    <div class="oh-sticky-table__td dateformat_changer">
        	    	      {{work_type_request.requested_till}}
        	    	    </div>
        	    	    <div class="oh-sticky-table__td">
        	    	      {{work_type_request.description}}
        	    	    </div>
        	    	    <div class="oh-sticky-table__td">
        	    	      	<div class="oh-btn-group" onclick="event.stopPropagation();">
        	    	      	  	{% if work_type_request.approved == False and not work_type_request.canceled %}
        	    	      	  		<a
        	    	      	  		  hx-get="{% url 'work-type-request-update' work_type_request.id %}"
        	    	      	  		  hx-target="#workTypeRequestUpdateModalBody"
        	    	      	  		  data-toggle="oh-modal-toggle"
        	    	      	  		  data-target="#workTypeRequestUpdateModal"
        	    	      	  		  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>
        	    	      	  	{% endif %} {% if work_type_request.approved == False %}
        	    	      	  		<form hx-confirm="{% trans 'Are you sure you want to delete this work type request?' %}" hx-post="{% url 'work-type-request-delete' work_type_request.id  %}" hx-target="#shift_target" 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>
        	    	      	  	{% endif %}
        	    	      	</div>
        	    	    </div>
        	    	    {% if not request.GET.profile %}
							{% if perms.base.change_worktyperequest or request.user|is_reportingmanager %}
        	    	    		<div
        	    	    		  class="oh-sticky-table__td"
        	    	    		  onclick="event.stopPropagation();"
        	    	    		>
        	    	    		  {% if work_type_request.approved == False and work_type_request.canceled == False %}
								  	<a href="/work-type-request-approve/{{work_type_request.id}}/"
        	    	    		  	   onclick="return confirm('{% trans "Do you want to approve this request?" %}')"
										 class='oh-btn oh-btn--info'>
										 {% trans "Approve"%}
									</a>
								  {% else %}
        	    	    		  	<button class="oh-btn oh-btn--info w-100" disabled>
        	    	    		  	  {% trans "Approve" %}
        	    	    		  	</button>
        	    	    		  {% endif %}
        	    	    		</div>
        	    	    		<div
        	    	    		  class="oh-sticky-table__td"
        	    	    		  onclick="event.stopPropagation();"
        	    	    			>
        	    	    			{% if work_type_request.canceled == False %}
										<a href="/work-type-request-cancel/{{work_type_request.id}}/"
        	    	    				   onclick="return confirm('{% trans "Do you want to cancel this request?" %}')"
										   class='oh-btn oh-btn--primary'>
											{% trans "Cancel" %}
										</a>
									{% else %}
        	    	    				<button disabled class="oh-btn oh-btn--primary w-100">
        	    	    				  {% trans "Canceled" %}
        	    	    				</button>
        	    	    			{% endif %}
        	    	    		</div>
        	    	    	{% endif %}
						{% endif %}
        	    	  </div>
        	    	</div>
        	    {% endfor %}
        	  </div>
        	</div>
        {% else %}
        	<div
        	  class="d-flex justify-content-center align-items-center"
        	  style="height: 40vh"
        	>
        	  <h5 class="oh-404__subtitle">
        	    {% trans "No work type request has been created." %}
        	  </h5>
        	</div>
        {% endif %}
      </div>
      <div class="oh-tabs__content" id="shift_tab_2">
        {% if rshift_assign %}
        	<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">
        	          <div class="d-flex">
        	            <div>
        	              {% trans "Employee" %}
        	            </div>
        	          </div>
        	        </div>
        	        <div class="oh-sticky-table__th">{% trans "Title" %}</div>
        	        <div class="oh-sticky-table__th">{% trans "Based On" %}</div>
        	        <div class="oh-sticky-table__th">{% trans "Rotate" %}</div>
        	        <div class="oh-sticky-table__th">
        	          {% trans "Start Date" %}
        	        </div>
        	        <div class="oh-sticky-table__th">
        	          {% trans "Current Shift" %}
        	        </div>
        	        <div class="oh-sticky-table__th">
        	          {% trans "Next Switch" %}
        	        </div>
        	        <div class="oh-sticky-table__th">{% trans "Next Shift" %}</div>
					<div class="oh-sticky-table__th">{% trans "Status" %}</div>
					{% if not request.GET.profile and perms.base.change_rotatingworktypeassign or perms.base.delete_rotatingshiftassign or request.user|check_manager:rshift or request.user|is_reportingmanager  %}
						<div class="oh-sticky-table__th">{% trans "Actions" %}</div>
        	        {% endif %}
        	      </div>
        	    </div>
        	    <div class="oh-sticky-table__tbody">
        	    	{% for rshift in rshift_assign %}
        	    		<div class="oh-sticky-table__tr" draggable="true" data-toggle="oh-modal-toggle" data-target="#objectDetailsModal" hx-get="{% url 'rshift-individual-view' rshift.id %}?instances_ids={{rshift_assign_ids}}" hx-target = "#objectDetailsModalTarget">
        	    			<div class="oh-sticky-table__sd">
        	    			  <div class="d-flex">
        	    			    <div class="oh-profile oh-profile--md">
        	    			      <div class="oh-profile__avatar mr-1">
        	    			      		<img
        	    			      		  src="https://ui-avatars.com/api/?name={{rshift.employee_id.employee_first_name}}+{{rshift.employee_id.employee_last_name}}&background=random"
        	    			      		  class="oh-profile__image"
        	    			      		  alt="Username"
        	    			      		/>
        	    			      </div>
        	    			      <span class="oh-profile__name oh-text--dark"
        	    			        >{{rshift.employee_id}}</span
        	    			      >
        	    			    </div>
        	    			  </div>
        	    			</div>
        	    			<div class="oh-sticky-table__td">
        	    			  {{rshift.rotating_shift_id}}
        	    			</div>
        	    			<div class="oh-sticky-table__td">
        	    			  {{rshift.get_based_on_display }}
        	    			</div>
        	    			<div class="oh-sticky-table__td">
        	    			  {% if rshift.based_on == 'after' %}
								{% trans "Rotate after" %}{{rshift.rotate_after_day}}{% trans "days" %}
							{% elif rshift.based_on == "weekly" %}
								{% trans "Weekly every" %}{{rshift.rotate_every_weekend}}
        	    			  {% elif rshift.based_on == "monthly" %}
								{% if rshift.rotate_every == "1" %}
									{% trans "Rotate every " %}{{rshift.rotate_every}}{% trans "st day of month " %}
								{% elif rshift.rotate_every == "2" %}
									{% trans "Rotate every " %}{{rshift.rotate_every}}{% trans "nd day of month " %}
								{% elif rshift.rotate_every == "3" %}
									{% trans "Rotate every " %}{{rshift.rotate_every}}{% trans "rd day of month" %}
								{% elif rshift.rotate_every == "last" %}
									{% trans "Rotate every last day of month" %}
								{% else %}
									{% trans "Rotate every " %}{{rshift.rotate_every}}{% trans "th day of month " %}
								{% endif %}
							{% endif %}
        	    			</div>
        	    			<div class="oh-sticky-table__td dateformat_changer">{{rshift.start_date}}</div>
        	    			<div class="oh-sticky-table__td">{{rshift.current_shift}}</div>
        	    			<div class="oh-sticky-table__td dateformat_changer">
        	    			  {{rshift.next_change_date}}
        	    			</div>
        	    			<div class="oh-sticky-table__td">{{rshift.next_shift}}</div>
							<div class="oh-sticky-table__td">
								{% if rshift.is_active %}
									{% trans "Is Active" %}
								{% else %}
									{% trans "Archived" %}
								{% endif %}
							</div>
        	    			{% if not request.GET.profile and perms.base.change_rotatingworktypeassign or perms.base.delete_rotatingshiftassign or request.user|check_manager:rshift or request.user|is_reportingmanager %}
        	    				<div class="oh-sticky-table__td" onclick="event.stopPropagation();">
        	    				  <div class="oh-btn-group">
        	    				    {% if perms.base.change_rotatingshiftassign or perms.base.change_rotatingworktypeassign or request.user|check_manager:rshift or request.user|is_reportingmanager  %}
        	    				    	<a
        	    				    	  hx-get="{% url 'rotating-shift-assign-update' rshift.id %}"
        	    				    	  hx-target="#objectUpdateModalTarget"
        	    				    	  hx-swap="innerHTML"
        	    				    	  data-target="#objectUpdateModal"
        	    				    	  data-toggle="oh-modal-toggle"
        	    				    	  type="button"
        	    				    	  class="oh-btn oh-btn--light-bkg w-50"
        	    				    	  title="{% trans 'Update' %}"
        	    				    	>
        	    				    	  <ion-icon name="create-outline"></ion-icon
        	    				    	></a>
        	    				    {% endif %}
									{% if perms.base.delete_rotatingshiftassign or request.user|is_reportingmanager %}
        	    				    	<form hx-confirm="{% trans 'Are you sure you want to delete this rotating shift assign?' %}"
											  hx-post="{% url 'rotating-shift-assign-delete' rshift.id %}"
											  hx-target="#shift_target"
											  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>
        	    				    {% endif %}
        	    				  </div>
        	    				</div>
        	    			{% endif %}
        	    		</div>
        	    	{% endfor %}
        	    </div>
        	  </div>
        	</div>
        {% else %}
        	<div
        	  class="d-flex justify-content-center align-items-center"
        	  style="height: 40vh"
        	>
        	  <h5 class="oh-404__subtitle">
        	    {% trans "No rotating shift has been assigned." %}
        	  </h5>
        	</div>
        {% endif %}
      </div>
      <div class="oh-tabs__content" id="shift_tab_3">
        {% if rwork_type_assign %}
        	<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">
        	          <div class="d-flex">
        	            <div>
        	              {% trans "Employee" %}
        	            </div>
        	          </div>
        	        </div>
        	        <div class="oh-sticky-table__th">{% trans "Title" %}</div>
        	        <div class="oh-sticky-table__th">{% trans "Based On" %}</div>
        	        <div class="oh-sticky-table__th">{% trans "Rotate" %}</div>
        	        <div class="oh-sticky-table__th" >
        	          {% trans "Start Date" %}
        	        </div>
        	        <div class="oh-sticky-table__th">
        	          {% trans "Current Work Type" %}
        	        </div>
        	        <div class="oh-sticky-table__th" >
        	          {% trans "Next Switch" %}
        	        </div>
        	        <div class="oh-sticky-table__th">
        	          {% trans "Next Work Type" %}
        	        </div>
					<div class="oh-sticky-table__th">
						{% trans "Status" %}
					</div>
					{% if not request.GET.profile and perms.base.change_rotatingworktypeassign or perms.base.delete_rotatingworktypeassign or request.user|check_manager:rwork_type or request.user|is_reportingmanager   %}
						<div class="oh-sticky-table__th">{% trans "Actions" %}</div>
        	        {% endif %}
        	      </div>
        	    </div>
        	    <div class="oh-sticky-table__tbody">
        	    	{% for rwork_type in rwork_type_assign %}
        	    		<div class="oh-sticky-table__tr" hx-get="{% url "rwork-individual-view" rwork_type.id %}?instances_ids={{rwork_type_assign_ids}}"
							        data-toggle="oh-modal-toggle" data-target="#objectDetailsModal"
							        hx-target="#objectDetailsModalTarget" draggable="true">
        	    			<div class="oh-sticky-table__sd">
        	    				<div class="d-flex">
        	    				  <div class="oh-profile oh-profile--md">
        	    				    <div class="oh-profile__avatar mr-1">
        	    				      <img
        	    				        src="https://ui-avatars.com/api/?name={{rwork_type.employee_id.employee_first_name}}+{{rwork_type.employee_id.employee_last_name}}&background=random"
        	    				        class="oh-profile__image"
        	    				        alt="Username"
        	    				      />
        	    				    </div>
        	    				    <span class="oh-profile__name oh-text--dark"
        	    				      >{{rwork_type.employee_id}}</span
        	    				    >
        	    				  </div>
        	    				</div>
        	    			</div>
        	    			<div class="oh-sticky-table__td">
        	    			  {{rwork_type.rotating_work_type_id}}
        	    			</div>
        	    			<div class="oh-sticky-table__td">
        	    			  {{rwork_type.get_based_on_display}}
        	    			</div>
        	    			<div class="oh-sticky-table__td">
        	    				{% if rwork_type.based_on == 'after' %}
									{% trans "Rotate after" %}{{rwork_type.rotate_after_day}}{% trans " days" %}
								{% elif rwork_type.based_on == "weekly" %}
									{% trans "Weekly every" %}{{rwork_type.rotate_every_weekend}}
								{% elif rwork_type.based_on == "monthly" %}
									{% if rwork_type.rotate_every == "1" %}
										{% trans "Rotate every "%}{{rwork_type.rotate_every}}{% trans "st day of month " %}
									{% elif rwork_type.rotate_every == "2" %}
										{% trans "Rotate every" %}{{rwork_type.rotate_every}}{% trans "nd day of month " %}
        	    					{% elif rwork_type.rotate_every == "3" %}
										{% trans "Rotate every " %}{{rwork_type.rotate_every}}{% trans "rd day of month" %}
									{% elif rwork_type.rotate_every == "last" %}
										{% trans "Rotate every last day of month " %}
									{% else %}
										{% trans "Rotate every " %}{{rwork_type.rotate_every}}{% trans "th day of month " %}
									{% endif %}
								{% endif %}
        	    			</div>
        	    			<div class="oh-sticky-table__td dateformat_changer">{{rwork_type.start_date}}</div>
        	    			<div class="oh-sticky-table__td">
        	    			  {{rwork_type.current_work_type}}
        	    			</div>
        	    			<div class="oh-sticky-table__td dateformat_changer">
        	    			  {{rwork_type.next_change_date}}
        	    			</div>
        	    			<div class="oh-sticky-table__td">
        	    			  {{rwork_type.next_work_type}}
        	    			</div>
							<div class="oh-sticky-table__td">
								{% if rwork_type.is_active %}
									{% trans "Is Active" %}
								{% else %}
									{% trans "Archived" %}
								{% endif %}
							</div>
        	    			{% if not request.GET.profile and perms.base.change_rotatingworktypeassign or perms.base.delete_rotatingworktypeassign or request.user|check_manager:rwork_type  %}
        	    				<div class="oh-sticky-table__td" onclick="event.stopPropagation();">
        	    					<div class="oh-btn-group">
        	    						{% if perms.base.change_rotatingworktypeassign or request.user|check_manager:rwork_type or request.user|is_reportingmanager %}
        	    							<a
        	    							  hx-get="{% url 'rotating-work-type-assign-update' rwork_type.id %}"
        	    							  hx-target="#objectUpdateModalTarget"
        	    							  data-target="#objectUpdateModal"
        	    							  data-toggle="oh-modal-toggle"
        	    							  type="button"
        	    							  class="oh-btn oh-btn--light-bkg w-50"
        	    							  title="{% trans 'Update' %}"
        	    							>
        	    							  <ion-icon name="create-outline"></ion-icon
        	    							></a>
        	    						{% endif %}
										{% if perms.base.delete_rotatingworktypeassign or request.user|is_reportingmanager %}
											<form hx-post="{% url 'rotating-work-type-assign-delete' rwork_type.id %}" class="w-50"
												hx-confirm="{% trans 'Are you sure you want to delete this rotating work type assign?' %}" hx-target="#shift_target">
												{% 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>
        	    						{% endif %}
        	    					</div>
        	    				</div>
        	    			{% endif %}
        	    		</div>
        	    	{% endfor %}
        	    </div>
        	  </div>
        	</div>
        {% else %}
        	<div
        	  class="d-flex justify-content-center align-items-center"
        	  style="height: 40vh"
        		>
        	  <h5 class="oh-404__subtitle">
        	    {% trans "No rotating work type has been assigned." %}
        	  </h5>
        	</div>
        {% endif %}
      </div>
    </div>
    <div class="oh-tabs__content" id="shift_tab_4">
    	{% if shift_data %}
    		<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">
    		          <div class="d-flex">
    		            <div>
    		              {% trans "Employee" %}
    		            </div>
    		          </div>
    		        </div>
    		        <div class="oh-sticky-table__th">
    		          {% trans "Requested Shift" %}
    		        </div>
    		        <div class="oh-sticky-table__th">
    		          {% trans "Previous/Current Shift" %}
    		        </div>
    		        <div class="oh-sticky-table__th" >
    		          {% trans "Requested Date" %}
    		        </div>
    		        <div class="oh-sticky-table__th" >
    		          {% trans "Requested Till" %}
    		        </div>
    		        <div class="oh-sticky-table__th">{% trans "Description" %}</div>
    		        <div class="oh-sticky-table__th">{% trans "Actions" %}</div>
        	        {% if not request.GET.profile %}
						{% if perms.base.change_shiftrequest or request.user|check_manager:shift_request %}
        	        		<div class="oh-sticky-table__th"></div>
        	        		<div class="oh-sticky-table__th"></div>
						{% endif %}
        	        {% endif %}
    		      </div>
    		    </div>
    		    {% for shift_request in shift_data %}
    		    	<div class="oh-sticky-table__tbody">
    		    	  <div draggable="true" class="oh-sticky-table__tr" data-toggle="oh-modal-toggle"
						   data-target="#objectDetailsModal" hx-get="{% url 'shift-request-details' shift_request.id %}?instances_ids={{shift_requests_ids}}" hx-target="#objectDetailsModalTarget"
    		    	  		>
    		    	    <div class="oh-sticky-table__sd">
    		    	      <div class="d-flex">
    		    	        <div class="oh-profile oh-profile--md">
    		    	          <div class="oh-profile__avatar mr-1">
    		    	            <img
    		    	              src="https://ui-avatars.com/api/?name={{shift_request.employee_id}}&amp;background=random"
    		    	              class="oh-profile__image"
    		    	              alt="Username"
    		    	            />
    		    	          </div>
    		    	          <span class="oh-profile__name oh-text--dark"
    		    	            >{{shift_request.employee_id}}</span
    		    	          >
    		    	        </div>
    		    	      </div>
    		    	    </div>
    		    	    <div class="oh-sticky-table__td">{{shift_request.shift_id}}</div>
    		    	    <div class="oh-sticky-table__td">
    		    	      {{shift_request.previous_shift_id}}
    		    	    </div>
    		    	    <div class="oh-sticky-table__td dateformat_changer">
    		    	      {{shift_request.requested_date}}
    		    	    </div>
    		    	    <div class="oh-sticky-table__td dateformat_changer">
    		    	      {{shift_request.requested_till}}
    		    	    </div>
    		    	    <div class="oh-sticky-table__td">
    		    	      {{shift_request.description}}
    		    	    </div>
    		    	    <div class="oh-sticky-table__td">
    		    	      <div class="oh-btn-group" onclick="event.stopPropagation();">
    		    	        {% comment %} start of edit button {% endcomment %}
							{% 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>
    		    	        {% endif %} {% comment %} end of edit button {% endcomment %}
    		    	        {% if shift_request.approved == False %}
								<form
									hx-confirm="{% trans "Are you sure you want to delete this shift request?" %}"
									hx-post="{% url 'shift-request-delete' shift_request.id %}"
									hx-target="#shift_target"
									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>
    		    	        {% endif %}
    		    	      </div>
    		    	    </div>
    		    	    	{% if not request.GET.profile %}
								{% if perms.base.change_shiftrequest or request.user|check_manager:shift_request %}
    		    	    			<div
    		    	    			  class="oh-sticky-table__td"
    		    	    			  onclick="event.stopPropagation();"
    		    	    				>
    		    	    				{% 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--info'>
												{% trans "Approve" %}
											</a>
										{% else %}
    		    	    			  		<button class="oh-btn oh-btn--info w-100" disabled>
    		    	    			  		  {% trans "Approve" %}
    		    	    			  		</button>
    		    	    			  	{% endif %}
    		    	    			</div>
    		    	    			<div
    		    	    			  class="oh-sticky-table__td"
    		    	    			  onclick="event.stopPropagation();"
    		    	    				>
    		    	    				{% if shift_request.canceled == False %}
											<a href="/shift-request-cancel/{{shift_request.id}}/"
    		    	    						onclick="return confirm('{% trans "Do you want to cancel this request?" %}')" class='oh-btn oh-btn--primary'>
												{% trans "Cancel" %}
											</a>
										{% else %}
    		    	    					<button disabled class="oh-btn oh-btn--primary w-100">
    		    	    					  {% trans "Canceled" %}
    		    	    					</button>
    		    	    				{% endif %}
    		    	    			</div>
								{% endif %}
							{% endif %}
						</div>
					</div>
				{% endfor %}
    		</div>
		{% else %}
			<div
			  class="d-flex justify-content-center align-items-center"
			  style="height: 40vh"
			>
			  <h5 class="oh-404__subtitle">
				{% trans "No Shift request has been created." %}
			  </h5>
			</div>
		{% endif %}
    </div>
  </div>
</div>


<div
  class="oh-modal"
  id="rotatingWorkTypeAssignDetailModal"
  role="dialog"
  aria-labelledby="rotatingWorkTypeAssignDetailModalLabel"
  aria-hidden="true"
  >
  <div class="oh-modal__dialog" id="rotatingWorkTypeAssignDetail"> </div>
</div>

<div
  class="oh-modal"
  id="workTypeRequestUpdateModal"
  role="dialog"
  aria-labelledby="workTypeRequestUpdateModal"
  aria-hidden="true"
  >
  <div class="oh-modal__dialog">
    <div class="oh-modal__dialog-header">
      <h5 class="oh-modal__dialog-title" id="workTypeRequestUpdateModalLabel">
        {% trans "Work type Request" %}
      </h5>
      <button
        class="oh-modal_close--custom"
        onclick="event.stopPropagation(); var modalElement = this.closest('.oh-modal'); modalElement.classList.toggle('oh-modal--show');"
      >
        <ion-icon name="close-outline"></ion-icon>
      </button>
    </div>

    <div
      class="oh-modal__dialog-body"
      id="workTypeRequestUpdateModalBody"
    ></div>
  </div>
</div>

<div
  class="oh-modal"
  id="shiftRequestModalUpdate"
  role="dialog"
  aria-labelledby="shiftRequestModalUpdate"
  aria-hidden="true"
  >
  <div class="oh-modal__dialog">
    <div class="oh-modal__dialog-header">
      <h5 class="oh-modal__dialog-title" id="shiftRequestModalUpdateLabel">
        {% trans "Update Shift Request" %}
      </h5>
      <button class="oh-modal__close" aria-label="Close">
        <ion-icon name="close-outline"></ion-icon>
      </button>
    </div>

    <div class="oh-modal__dialog-body" id="shiftRequestModalUpdateBody"></div>
  </div>
</div>

<div
  class="oh-modal"
  id="shiftRequestModal"
  role="dialog"
  aria-labelledby="shiftRequestModal"
  aria-hidden="true"
  >
  <div class="oh-modal__dialog">
    <div class="oh-modal__dialog-header">
      <h5 class="oh-modal__dialog-title" id="shiftRequestModalLabel">
        {% trans "Shift Request" %}
      </h5>
      <button class="oh-modal__close" aria-label="Close">
        <ion-icon name="close-outline"></ion-icon>
      </button>
    </div>
    <div class="oh-modal__dialog-body" id="shiftRequestModal">
      <div id="shiftRequestTargetModal"></div>
    </div>
  </div>

</div>



<script>
  $(document).ready(function () {
	const activeTab = localStorage.getItem('EmployeeShiftActiveTab')
	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("EmployeeShiftActiveTab",$(this).attr('data-target'))
		var newActiveTab = $(this).attr('data-target')
		$(".oh-tabs__content--active").toggleClass('oh-tabs__content--active');
		$(".oh-tabs__tab--active").toggleClass('oh-tabs__tab--active');
		$(`[data-target="${newActiveTab}"]`).toggleClass("oh-tabs__tab--active");
		$(newActiveTab).toggleClass("oh-tabs__content--active");
	});
});
</script>