{% load i18n %} {% load static %} {% load horillafilters %}
{% include 'filter_tags.html' %}
{% 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 %}
{% if allowances %}
  <div class="oh-layout--grid-3">
    {% for allowance in allowances %}
    <div class="oh-kanban-card {% if allowance.is_fixed == True %} row-status--orange {% elif allowance.is_fixed == False %} row-status--yellow {% endif %}"
        data-toggle="oh-modal-toggle" data-target = "#objectDetailsModal" hx-get="{% url 'single-allowance-view' allowance.id %}?{{pd}}&view=card&instances_ids={{allowance_ids}}" hx-target = "#objectDetailsModalTarget">
        <div class="oh-kanban-card__avatar">
        <div class="oh-kanban-card__profile-container">
            <img
            src="https://ui-avatars.com/api/?name={{allowance}}&background=random"
            class="oh-kanban-card__profile-image"
            alt="Username"
            />
        </div>
        </div>
        <div class="oh-kanban-card__details">
        <span class="oh-card__title oh-card__title--sm fw-bold" style="font-size:18px;">{{allowance}}</span>


        <span class="oh-timeoff-modal__stat-title fw-bold text-dark mt-2 mb-1">{% trans "Amount" %}</span>
            {% if allowance.is_fixed %}
                <span class="oh-timeoff-modal__stat-title">{{allowance.amount}}</span>
            {% else %}
                {% if allowance.based_on == "basic_pay" %}
                    <span class="oh-timeoff-modal__stat-title">{{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 class="oh-timeoff-modal__stats-container mb-1">
          <div class="oh-timeoff-modal__stat mt-2">
            <span class="oh-timeoff-modal__stat-title fw-bold text-dark" style="width:135px;">{% trans "One Time Allowance" %}</span>
            {% if allowance.one_time_date %}
              <span class="oh-timeoff-modal__stat-title">{% trans "On" %}</span> <span class="oh-timeoff-modal__stat-count dateformat_changer"> {{allowance.one_time_date}}</span>
            {% else %}
              <span class="oh-timeoff-modal__stat-title">{% trans "No" %}</span>
            {% endif %}
          </div>
          <div class="oh-timeoff-modal__stat mt-2">
            <span class="oh-timeoff-modal__stat-title fw-bold text-dark">{% trans "Taxable" %}</span>
            <span class="oh-timeoff-modal__stat-title">{{ allowance.is_taxable|yes_no }}</span>
          </div>
        </div>

        </div>
        {% if perms.payroll.change_allowance or perms.payroll.delete_allowance %}
          <div class="oh-kanban-card__dots">
            <div class="oh-dropdown" x-data="{show: false}" onclick="event.stopPropagation()">
                <button
                class="oh-btn oh-btn--transparent text-muted p-3"
                @click="show = !show"
                title='{% trans "Actions" %}'>
                <ion-icon name="ellipsis-vertical-sharp"></ion-icon>
                </button>
                <div
                class="oh-dropdown__menu oh-dropdown__menu--dark-border oh-dropdown__menu--right"
                x-show="show"
                @click.outside="show = false"
                >
                <ul class="oh-dropdown__items">
                  {% if perms.payroll.change_allowance %}
                    <li class="oh-dropdown__item">
                    <a onclick="event.stopPropagation();"
                      href="{% url 'update-allowance' allowance.id %}"
                    >{% trans "Edit" %}</a>
                    </li>
                  {% endif %}
                  {% if perms.payroll.delete_allowance %}
                    <li class="oh-dropdown__item">
                    <a class="text-danger"
                      onclick = "event.preventDefault();event.stopPropagation();"
                      hx-confirm="{% trans 'Do you want to delete this Allowance?' %}"
                      hx-post="{% url 'delete-allowance' allowance.id %}?{{pd}}&view=card"
                      hx-target="#payroll-allowance-container"
                      title="{% trans 'Delete' %}"

                    >{% trans "Delete" %}</a
                    >
                    </li>
                  {% endif %}
                </ul>
                </div>
            </div>
          </div>
        {% endif %}
    </div>
    {% endfor %}
  </div>

  <div class="oh-pagination">
    <span
      class="oh-pagination__page"
      >
      {% trans "Page" %} {{ allowances.number }} {% trans "of" %} {{ allowances.paginator.num_pages }}.
      </span
    >
    <nav class="oh-pagination__nav">
      <div class="oh-pagination__input-container me-3">
        <span class="oh-pagination__label me-1">{% trans "Page" %}</span>
        <input
          type="number"
          name="page"
          class="oh-pagination__input"
          value="{{allowances.number}}"
          hx-get="{% url 'filter-allowance' %}?{{pd}}&view=card"
          hx-target="#payroll-allowance-container"
          min="1"
        />
        <span class="oh-pagination__label">{% trans "of" %} {{allowances.paginator.num_pages}}</span>
      </div>
      <ul class="oh-pagination__items">
        {% if allowances.has_previous %}
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a hx-target='#payroll-allowance-container' hx-get="{% url 'filter-allowance' %}?{{pd}}&view=card&page=1" class="oh-pagination__link">{% trans "First" %}</a>
        </li>
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a hx-target='#payroll-allowance-container' hx-get="{% url 'filter-allowance' %}?{{pd}}&view=card&page={{ allowances.previous_page_number }}" class="oh-pagination__link">{% trans "Previous" %}</a>
        </li>
        {% endif %}
        {% if allowances.has_next %}
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a hx-target='#payroll-allowance-container' hx-get="{% url 'filter-allowance' %}?{{pd}}&view=card&page={{ allowances.next_page_number }}" class="oh-pagination__link">{% trans "Next" %}</a>
        </li>
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a hx-target='#payroll-allowance-container' hx-get="{% url 'filter-allowance' %}?{{pd}}&view=card&page={{ allowances.paginator.num_pages }}" class="oh-pagination__link">{% trans "Last" %}</a>
        </li>
        {% endif %}

      </ul>
    </nav>
  </div>
{% else %}
<!-- start of empty page -->
<div class="oh-404">
  <img
    style="width: 150px; height: 150px;"
    src="{% static 'images/ui/no-results.png' %}"
    class="oh-404__image mb-4"
  />
  <h5 class="oh-404__subtitle">
    {% trans "No search result found!" %}
  </h5>
</div>
<!-- end of empty page -->
{% endif %}
