{% load i18n %}
<style>
    a:hover {
        text-decoration: none;
    }
</style>
{% if employee.payslip_set.all %}
<div class="d-flex flex-row-reverse">
  <span class="m-3">
    <span class="oh-dot oh-dot--small me-1" style="background-color:gray"></span>
    {% trans "Draft" %}
  </span>
  <span class="m-3">
    <span class="oh-dot oh-dot--small me-1" style="background-color:orange"></span>
    {% trans "Review Ongoing" %}
  </span>
  <span class="m-3">
    <span class="oh-dot oh-dot--small me-1" style="background-color:rgb(103, 171, 238)"></span>
    {% trans "Confirmed" %}
  </span>
  <span class="m-3" >
    <span class="oh-dot oh-dot--small me-1" style="background-color:yellowgreen"></span>
    {% trans "Paid" %}
  </span>
</div>

  <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">{% trans "Employee" %}</div>
                <div class="oh-sticky-table__th">{% trans "Start Date" %}</div>
                <div class="oh-sticky-table__th">{% trans "End Date" %}</div>
                <div class="oh-sticky-table__th">{% trans "Status" %}</div>
                <div class="oh-sticky-table__th">{% trans "Gross Pay" %}</div>
                <div class="oh-sticky-table__th">{% trans "Deduction" %}</div>
                <div class="oh-sticky-table__th">{% trans "Net Pay" %}</div>
                <div class="oh-sticky-table__th"></div>
            </div>
        </div>
        <div class="oh-sticky-table__tbody">
            {% for payslip in employee.payslip_set.all %}
              <a href="{% url 'view-created-payslip' payslip.id %}" class="oh-sticky-table__tr" >
                  <div class="oh-sticky-table__sd {% if payslip.status == "review_ongoing" %}row-status--orange {% elif payslip.status == "confirmed" %} row-status--blue {% elif payslip.status == "paid" %} row-status--yellow {% elif payslip.status == "draft" %} row-status--gray{% endif %}">
                    <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={{payslip.employee_id.employee_first_name}}+{{payslip.employee_id.employee_last_name}}&background=random"
                          class="oh-profile__image"
                          alt=""
                        />
                      </div>
                      <span class="oh-profile__name oh-text--dark">{{payslip.employee_id}}</span>
                    </div>

                  </div>

                  </div>
                  <div class="oh-sticky-table__td dateformat_changer">
                    {{payslip.start_date}}
                  </div>
                  <div class="oh-sticky-table__td dateformat_changer">
                    {{payslip.end_date}}
                  </div>
                  <div class="oh-sticky-table__td">
                    {{payslip.get_status_display}}
                  </div>
                  {% if position == "prefix" %}
                    <div class="oh-sticky-table__td">
                      {{currency}} {{payslip.gross_pay|floatformat:2}}
                    </div>
                    <div class="oh-sticky-table__td">
                      {{currency}} {{payslip.deduction|floatformat:2}}
                    </div>
                    <div class="oh-sticky-table__td">
                      {{currency}} {{payslip.net_pay|floatformat:2}}
                    </div>
                  {% else %}
                    <div class="oh-sticky-table__td">
                      {{payslip.gross_pay|floatformat:2}} {{currency}}
                    </div>
                    <div class="oh-sticky-table__td">
                      {{payslip.deduction|floatformat:2}} {{currency}}
                    </div>
                    <div class="oh-sticky-table__td">
                      {{payslip.net_pay|floatformat:2}} {{currency}}
                    </div>
                  {% endif %}
                  <div class="oh-sticky-table__td">
                    <div class="oh-btn-group">
                      <div type="button" id="download" data-id={{payslip.id}} title="{% trans 'Download' %}" class="oh-btn oh-btn--light-bkg w-100"> <ion-icon name="download"></ion-icon></div>
                    </div>
                  </div>
              </a>
            {% 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 Payslips have been generated." %}</h5>
</div>
{% endif %}
<script>
  // Use jQuery to select an element by its ID and add a click event handler
  $("#download").click(function(e) {
    e.preventDefault();
    payslip_id = $(this).data("id");
    window.location.href = `/payroll/payslip-pdf/${payslip_id}`
  });
</script>