{% 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 hx-trigger="load" hx-get="{{load_hx_url}}" hx-target="{{load_hx_target}}" ></span>
{% endif %}
{% if deduction %}
    {% if request.GET.instances_ids %}
        <div class="oh-modal__dialog oh-modal__dialog--navigation m-0 p-0">
            <button hx-get="{% url 'single-deduction-view' previous %}?{{pd}}&instances_ids={{deduction_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-deduction-view' next  %}?{{pd}}&instances_ids={{deduction_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 %}
    <div class="oh-modal__dialog-header">
        <span class="oh-modal__dialog-title" id="addEmployeeObjectiveModalLabel">
            <h5 style="margin-bottom: 20px;">{{deduction.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">
            {% if deduction.is_tax %}
                <div class="oh-timeoff-modal__stat">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Tax" %}</span>
                    <span class="oh-timeoff-modal__stat-count">{{deduction.is_tax|yes_no}}</span>
                </div>
            {% else %}
            <div class="oh-timeoff-modal__stat">
                <span class="oh-timeoff-modal__stat-title">{% trans "Pretax" %}</span>
                <span class="oh-timeoff-modal__stat-count">{{deduction.is_pretax|yes_no}}</span>
            </div>
            {% endif %}
            <div class="oh-timeoff-modal__stat" style="margin-left: 20px;">
                <span class="oh-timeoff-modal__stat-title">{% trans "One Time deduction" %}</span>
                {% if deduction.one_time_date %}
                    <span class="oh-timeoff-modal__stat-count">{% trans "On" %}</span> <span
                        class="oh-timeoff-modal__stat-count dateformat_changer"> {{deduction.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 deduction.is_condition_based %}
                    <span class="oh-timeoff-modal__stat-count">{{deduction.get_field_display}}
                    {{deduction.get_condition_display}} {{deduction.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 deduction.update_compensation %}
                    {% if deduction.is_fixed %}
                        <span class="oh-timeoff-modal__stat-count">{{deduction.amount|currency_symbol_position}}{% trans "Deduct From" %}
                            {{deduction.get_update_compensation_display}}</span>
                    {% else %}
                        <span class="oh-timeoff-modal__stat-count">{{deduction.rate}}% {% trans "of" %}
                            {{deduction.get_update_compensation_display}}</span>
                    {% endif %}
                {% else %}
                    {% if deduction.is_fixed %}
                        <span class="oh-timeoff-modal__stat-count">{{deduction.amount|currency_symbol_position}}</span>
                    {% else %}
                        <span class="oh-timeoff-modal__stat-count">{% trans "Employer Rate :" %} {{deduction.employer_rate}}% {% trans "of" %} {{deduction.get_based_on_display}}</span>
                        <span class="oh-timeoff-modal__stat-count">{% trans "Employee Rate :" %} {{deduction.rate}}% {% trans "of" %} {{deduction.get_based_on_display}}</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 deduction.has_max_limit %}
                    <span class="oh-timeoff-modal__stat-count">{{deduction.maximum_amount|currency_symbol_position}}{% trans "For working days on a month" %}</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 "Deduction Eligibility" %}</span>
                <span class="oh-timeoff-modal__stat-count">If {{deduction.get_if_choice_display}}
                    {{deduction.get_if_condition_display}} {{deduction.if_amount}}</span>
            </div>
        </div>
        {% if perms.payroll.change_deduction or perms.payroll.delete_deduction %}
            <div class="oh-modal__button-container text-center">
                <div class="oh-btn-group">
                    <a href="{% url 'update-deduction' deduction.id %}" class="oh-btn oh-btn--info" style="width: 50%;">
                        <ion-icon name="create-outline" role="img" class="md hydrated" aria-label="create outline"></ion-icon>
                        {% trans "Edit" %}
                    </a>
                    <a onclick="event.preventDefault();event.stopPropagation();"
                        hx-confirm="{% trans 'Do you want to delete this deduction?' %}"
                        hx-post="{% url 'delete-deduction' deduction.id %}?{{pd}}&instances_ids={{deduction_ids}}"
                        hx-target="#objectDetailsModalTarget" class="oh-btn oh-btn--danger" style="width: 50%;"
                        data-action="delete">
                        <ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="create outline"></ion-icon>
                        {% trans "Delete" %}
                    </a>
                </div>
            </div>
        {% endif %}
    </div>
{% else %}
    <div class="oh-modal__dialog-header">
        <span class="oh-modal__dialog-title"></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>
        <h2 class="mb-4"></h2>
    </div>
    <div class="oh-modal__dialog-body oh-modal__dialog-relative">
        <img style="margin-left: 33%; width: 150px; height: 150px" src="{% static 'images/ui/deduction_icon.png' %}"
            class="oh-404__image mb-2" alt="Page not found. 404." />
        <h5 class="oh-404__subtitle">
            {% trans "There are currently no deductions to consider." %}
        </h5>
    </div>
{% endif %}
