{% load i18n static %}
{% if overtime_attendances %}
<div class="oh-sticky-table h-100">
    <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"
                  >
                  {% trans "Employee" %}
                </div>
                <div class="oh-sticky-table__th">{% trans "Check-In" %}</div>
                <div
                  class="oh-sticky-table__th"
                  >
                  {% trans "In Date" %}
                </div>
                <div class="oh-sticky-table__th">{% trans "Check-Out" %}</div>
                <div
                  class="oh-sticky-table__th"
                  >
                  {% trans "Out Date" %}
                </div>
                <div
                  class="oh-sticky-table__th"
                  >
                  {% trans "Overtime" %}
                </div>
                <div class="oh-sticky-table__th">{% trans "Actions" %}</div>
            </div>
        </div>
        {% for attendance in overtime_attendances %}
            <div class="oh-sticky-table__tbody">
                <div
                  class="oh-sticky-table__tr"
                  draggable="false"
                  data-toggle="oh-modal-toggle"
                  data-target="#objectDetailsModalW25"
                  hx-target="#objectDetailsModalW25Target"
                  hx-get="{% url 'user-request-one-view' attendance.id %}?ot=true&instances_ids={{ot_attendances_ids}}"
                  >
                    <div class="oh-sticky-table__sd">
                        <div class="oh-profile oh-profile--md">
                            <div class="oh-profile__avatar mr-1">
                              <img
                              src="{{attendance.employee_id.get_avatar}}"
                                class="oh-profile__image"
                                alt=""
                              />
                            </div>
                            <span class="oh-profile__name oh-text--dark"
                              >{{attendance.employee_id}}</span
                            >
                        </div>
                    </div>
                    <div class="oh-sticky-table__td timeformat_changer">
                      {{attendance.attendance_clock_in}}
                    </div>
                    <div class="oh-sticky-table__td dateformat_changer">
                      {{attendance.attendance_clock_in_date}}
                    </div>
                    <div class="oh-sticky-table__td timeformat_changer">
                      {{attendance.attendance_clock_out}}
                    </div>
                    <div class="oh-sticky-table__td dateformat_changer">
                      {{attendance.attendance_clock_out_date}}
                    </div>
                    <div class="oh-sticky-table__td">
                      {{attendance.attendance_overtime}}
                    </div>
                    <div class="oh-sticky-table__td">
                        <a
                            href="{% url 'approve-overtime' attendance.id %}"
                            onclick="event.stopPropagation()"
                            class="oh-btn oh-btn--info"
                            >
                            {% trans "Approve" %}
                        </a>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>
{% else %}
<div style="height: 380px; display:flex;align-items: center;justify-content: center;" class="">
  <div style="" class="">
  <img style="display: block;width: 70px;margin: 20px auto ;" src="{% static "/images/ui/overtime-icon.png" %}" class="" alt=""/>
  <h3 style="font-size:16px" class="oh-404__subtitle">{% trans "No Overtime to Validate...." %}</h3>
  </div>
</div>
{% endif %}
