{% extends 'index.html' %} {% block content %} {% load i18n %}
<style>
  .sent-to-employee{
    background-color: yellowgreen;
    color: white;
  }
  .payslip__netpay__summary{
    border-radius: 15px;
    padding: 5px 10px;
  }

</style>
<div class="oh-payslip" id="payslips-table">
  {% if perms.payroll.change_payslip %}
    <div class="oh-payslip__header">
      <div class="oh-payslip__header-left"  style="min-width: 170px; height: 35px; border: 1px solid hsl(213,22%,84%); display:flex;">
        <a href="{% url 'payslip-pdf' instance.id %}" type="button" title="{% trans 'Download' %}" class="oh-btn oh-btn--gray-bkg w-100" style="background-color: #dadada;"> <ion-icon name="download"></ion-icon></a>
        {% if perms.payroll.add_payslip %}
          <a
            hx-confirm="{% trans 'Do you want to sent the payslip by mail?' %}" hx-get="{% url "send-slip" %}?id={{instance.id}}&view=individual-payslip" hx-target="#payslips-table"
            title="{% trans 'Send via mail' %}" {% if payslip.sent_to_employee %}class="oh-btn sent-to-employee w-100"{% else %}class="oh-btn oh-btn--light-bkg w-100"{% endif %}> <ion-icon name="mail-outline"></ion-icon></a>
        {% endif %}
      </div>
      <div class="oh-payslip__header-left">
        <div class="oh-payslip__title oh-payslip__title--h2">
          <select name="status" class="oh-select" id="id_status" hx-trigger="change" hx-post="{% url 'payslip-status-update' instance.id %}" hx-target="#payslipBody" >
            {% for choice in instance.status_choices %}
            <option value="{{choice.0}}" {% if instance.status == choice.0  %} selected{% endif %}>{{choice.1}}</option>
            {% endfor %}
          </select>
        </div>
      </div>
    </div>
  {% endif %}
  <div class="oh-payslip__header">
    <div class="oh-payslip__header-left">
      <h1 class="oh-payslip__title oh-payslip__title--h1">
        {% trans "Payslip" %}
      </h1>
      <span class="oh-payslip__title oh-payslip__title--h2 dateformat_changer">{{start_date}}</span> &nbsp
      <span class="oh-payslip__title oh-payslip__title--h2">{% trans "to" %}</span> &nbsp
      <span class="oh-payslip__title oh-payslip__title--h2 dateformat_changer">{{end_date}}</span>
    </div>
    <div class="oh-payslip__header-left">
      <img
        src="{{employee.employee_work_info.company_id.icon.url}}"
        style="width: 50px"
      />
    </div>
  </div>
  <div class="oh-payslip__body" id="payslipBody">
    <!-- Payslip Summary -->
    {% include "payroll/payslip/individual_payslip_summery.html" %}
    <!-- End of Payslip Payable -->
  </div>
</div>
{% endblock content %}
