{% load i18n %} {% load static %} {% load horillafilters %}
{% 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>
    <span class="oh-span__class" hx-trigger="load" hx-get="{% url 'filter-allowance' %}?{{pd}}"
        hx-target="#payroll-allowance-container"></span>
{% endif %}
{% if request.GET.instances_ids %}
    <div class="oh-modal__dialog oh-modal__dialog--navigation m-0 p-0">
        <button hx-get="{% url 'single-allowance-view' previous %}?{{pd}}&instances_ids={{allowance_ids}}"
            hx-target = "#objectDetailsModalTarget" class="oh-modal__diaglog-nav oh-modal__nav-prev"
            data-action="previous"
            >
            <ion-icon name="chevron-back-outline" class="md hydrated" role="img"
            aria-label="chevron back outline"></ion-icon>
        </button>

        <button hx-get="{% url 'single-allowance-view' next  %}?{{pd}}&instances_ids={{allowance_ids}}"
            hx-target = "#objectDetailsModalTarget" class="oh-modal__diaglog-nav oh-modal__nav-next"
            data-action="next"
            >
            <ion-icon name="chevron-forward-outline" class="md hydrated" role="img"
            aria-label="chevron forward outline"></ion-icon>
        </button>
    </div>
{% endif %}
{% if allowance %}
<div class="oh-modal__dialog-header">
  <span class="oh-modal__dialog-title" id="addEmployeeObjectiveModalLabel">
    <h5 style="margin-bottom: 20px;">{{allowance.title}}</h5>
  </span>
  <button
    type="button"
    class="oh-modal__close"
    data-dismiss="oh-modal"
    aria-label="Close"
    data-toggle="oh-modal-toggle"
  >
    <ion-icon name="close-outline"></ion-icon>
  </button>
    <div class="oh-timeoff-modal__stats-container mb-3">
      <div class="oh-timeoff-modal__stat">
          <span class="oh-timeoff-modal__stat-title">{% trans "Taxable" %}</span>
          <span class="oh-timeoff-modal__stat-count">{{allowance.is_taxable|yes_no}}</span>
      </div>
      <div class="oh-timeoff-modal__stat" style="margin-left: 20px;">
          <span class="oh-timeoff-modal__stat-title">{% trans "One Time Allowance" %}</span>
          {% if allowance.one_time_date %}
            <span class="oh-timeoff-modal__stat-count">{% trans "On" %}</span> <span class="oh-timeoff-modal__stat-count dateformat_changer"> {{allowance.one_time_date}}</span>
          {% else %}
            <span class="oh-timeoff-modal__stat-count">{% trans "No" %}</span>
          {% endif %}
      </div>
    </div>
    <div class="oh-timeoff-modal__stats-container mt-3 mb-3">
        <div class="oh-timeoff-modal__stat">
            <span class="oh-timeoff-modal__stat-title">{% trans "Condition Based" %}</span>
            {% if allowance.is_condition_based %}
              <span class="oh-timeoff-modal__stat-count">{{allowance.get_field_display}} {{allowance.get_condition_display}} {{allowance.value}}</span>
            {% else %}
            <span class="oh-timeoff-modal__stat-count">{% trans "No" %}</span>
            {% endif %}
        </div>
        <div class="oh-timeoff-modal__stat" style="margin-left: 20px;">
                <span class="oh-timeoff-modal__stat-title">{% trans "Amount" %}</span>
                {% if allowance.is_fixed %}
                    <span class="oh-timeoff-modal__stat-count">{{allowance.amount}}</span>
                {% else %}
                    {% if allowance.based_on == "basic_pay" %}
                        <span class="oh-timeoff-modal__stat-count">{{allowance.rate}}% of {{allowance.get_based_on_display}}</span>
                    {% endif %}
                        {% if allowance.based_on == "attendance" %}
                            <span class="oh-timeoff-modal__stat-title">{{allowance.per_attendance_fixed_amount|currency_symbol_position}}{% trans "Amount Per Attendance" %}</span>
                        {% endif %}
                        {% if allowance.based_on == "shift_id" %}
                            <span class="oh-timeoff-modal__stat-title">{{allowance.shift_per_attendance_amount|currency_symbol_position}}{% trans "Amount Per" %} {{allowance.shift_id}}</span>
                        {% endif %}
                        {% if allowance.based_on == "work_type_id" %}
                            <span class="oh-timeoff-modal__stat-title">{{allowance.work_type_per_attendance_amount|currency_symbol_position}}{% trans "Amount Per" %} {{allowance.work_type_id}}</span>
                        {% endif %}
                        {% if allowance.based_on == "overtime" %}
                            <span class="oh-timeoff-modal__stat-title">{{allowance.amount_per_one_hr|currency_symbol_position}}{% trans "Amount Per One Hour" %}</span>
                        {% endif %}
                {% endif %}
        </div>
    </div>
    <div class="oh-timeoff-modal__stats-container mt-3 mb-3">
        <div class="oh-timeoff-modal__stat">
            <span class="oh-timeoff-modal__stat-title">{% trans "Has Maximum Limit" %}</span>
            {% if allowance.has_max_limit %}
                <span class="oh-timeoff-modal__stat-count">{{allowance.maximum_amount|currency_symbol_position}} {% if allowance.based_on == "basic_pay" %}{% trans "For working days on a month" %}{% endif %}</span>
            {% else %}
                <span class="oh-timeoff-modal__stat-count">{% trans "No" %}</span>
            {% endif %}
        </div>
        <div class="oh-timeoff-modal__stat" style="margin-left: 20px;">
            <span class="oh-timeoff-modal__stat-title">{% trans "Allowance Eligibility" %}</span>
            <span class="oh-timeoff-modal__stat-count">If {{allowance.get_if_choice_display}} {{allowance.get_if_condition_display}} {{allowance.if_amount}}</span>
        </div>
    </div>
    {% if perms.payroll.change_allowance or perms.payroll.delete_allowance %}
        <div class="oh-modal__button-container text-center">
            <div class="oh-btn-group">
                {% if perms.payroll.change_allowance %}
                    <a href="{% url 'update-allowance' allowance.id %}" class="oh-btn oh-btn--info" style="width: 100%;">
                    <ion-icon
                    name="create-outline"
                    role="img"
                    class="md hydrated"
                    aria-label="create outline"
                    ></ion-icon>{% trans "Edit" %}
                    </a>
                {% endif %}
                {% if perms.payroll.delete_allowance %}
                    <button class="oh-btn oh-btn--danger"style="width: 100%;" data-action="delete"
                        hx-confirm="{% trans 'Do you want to delete this Allowance?' %}"
                        hx-post="{% url 'delete-allowance' allowance.id %}?{{pd}}&instances_ids={{allowance_ids}}&view=card"
                        hx-target="#objectDetailsModalTarget" >
                        <ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="create outline"></ion-icon>
                        {% trans "Delete" %}
                    </button>
                {% endif %}
            </div>
        </div>
    {% endif %}
</div>
{% else %}
    <div class="oh-modal__dialog-header">
        <button type="button" class="oh-modal__close" data-dismiss="oh-modal" aria-label="Close" data-toggle="oh-modal-toggle">
            <ion-icon name="close-outline"></ion-icon>
        </button>
        <img style="width: 150px; height: 150px;margin-left: 30%;" src="{% static 'images/ui/payment.png' %}" class="oh-404__image mb-4" alt="Page not found. 404."/>
        <h5 class="oh-404__subtitle">
        {% trans "There are currently no allowances to consider." %}
        </h5>
    </div>
{% endif %}
