{% 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 'contract-filter' %}?{{pd}}" hx-target="#payroll-contract-container"></span>
{% endif %}

{% if contract_ids %}
    <div class="oh-modal__dialog oh-modal__dialog--navigation m-0 p-0">
        <button data-action="previous" hx-get="{% url 'single-contract-view' previous %}?{{pd}}&instances_ids={{contract_ids}}"
                hx-target = "#objectDetailsModalTarget" class="oh-modal__diaglog-nav oh-modal__nav-prev">
            <ion-icon name="chevron-back-outline" class="md hydrated" role="img"
            aria-label="chevron back outline"></ion-icon>
        </button>

        <button data-action="next" hx-get="{% url 'single-contract-view' next  %}?{{pd}}&instances_ids={{contract_ids}}"
                hx-target = "#objectDetailsModalTarget" class="oh-modal__diaglog-nav oh-modal__nav-next">
            <ion-icon name="chevron-forward-outline" class="md hydrated" role="img"
            aria-label="chevron forward outline"></ion-icon>
        </button>
    </div>
{% endif %}
{% if contract %}
    <div class="oh-modal__dialog-header pb-0">
    <span class="oh-modal__dialog-title" id="objectDetailsModalLabel">
        <h5 style="margin-bottom: 20px;">{{contract.contract_name}}</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>
    <div class="oh-modal__dialog-body oh-modal__dialog-relative">
        <a class="oh-timeoff-modal__profile-content"
        style="text-decoration: none"
        href="{% url 'employee-view-individual' contract.employee_id.id %}"
        >
            <div class="oh-profile mb-2">
            <div class="oh-profile__avatar">
                <img
                src="{{contract.employee_id.get_avatar}}"
                class="oh-profile__image me-2"
                alt="Mary Magdalene"
                />
            </div>
            <div class="oh-timeoff-modal__profile-info">
                <span class="oh-timeoff-modal__user fw-bold"
                >{{contract.employee_id}}</span
                >
                <span
                class="oh-timeoff-modal__user m-0"
                style="font-size: 18px; color: #4d4a4a"
                >
                {{contract.employee_id.employee_work_info.department_id}} /
                {{contract.employee_id.employee_work_info.job_position_id}}</span
                >
            </div>
            </div>
        </a>
        <div class="oh-modal__dialog-header pt-0">
            <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 "Start Date" %}</span>
                    <span class="oh-timeoff-modal__stat-count dateformat_changer">{{contract.contract_start_date}}</span>
                </div>
                <div class="oh-timeoff-modal__stat" style="margin-left: 20px;">
                    <span class="oh-timeoff-modal__stat-title">{% trans "End Date" %}</span>
                    <span class="oh-timeoff-modal__stat-count dateformat_changer">{{contract.contract_end_date}}</span>
                </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 "Wage Type" %}</span>
                    <span class="oh-timeoff-modal__stat-count">{{contract.get_wage_type_display}}</span>
                </div>
                <div class="oh-timeoff-modal__stat" style="margin-left: 20px;">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Wage" %}</span>
                    <span class="oh-timeoff-modal__stat-count">{{contract.wage}}</span>
                </div>
            </div>
            <div class="oh-timeoff-modal__stats-container mt-3 mb-3">
                <div class="oh-timeoff-modal__stat">
                    {% if contract.calculate_daily_leave_amount %}
                        <span class="oh-timeoff-modal__stat-title">{% trans "Calculate Leave Amount" %}</span>
                        <span class="oh-timeoff-modal__stat-count">{{contract.calculate_daily_leave_amount|yes_no}}</span>
                    {% else %}
                        <span class="oh-timeoff-modal__stat-title">{% trans "Deduction Amount For One Leave" %}</span>
                        <span class="oh-timeoff-modal__stat-count">{{contract.deduction_for_one_leave_amount}}</span>
                    {% endif %}
                </div>
                <div class="oh-timeoff-modal__stat" style="margin-left: 20px;">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Deduct From Basic Pay" %}</span>
                    <span class="oh-timeoff-modal__stat-count">{{contract.deduct_leave_from_basic_pay|yes_no}}</span>
                </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 "Department" %}</span>
                    <span class="oh-timeoff-modal__stat-count">{{contract.department}}</span>
                </div>
                <div class="oh-timeoff-modal__stat" style="margin-left: 20px;">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Job Position" %}</span>
                    <span class="oh-timeoff-modal__stat-count">{{contract.job_position}}</span>
                </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 "Job Role" %}</span>
                    <span class="oh-timeoff-modal__stat-count">{{contract.job_role}}</span>
                </div>
                <div class="oh-timeoff-modal__stat" style="margin-left: 20px;">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Shift" %}</span>
                    <span class="oh-timeoff-modal__stat-count">{{contract.shift}}</span>
                </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 "Work Type" %}</span>
                    <span class="oh-timeoff-modal__stat-count">{{contract.work_type}}</span>
                </div>
                <div class="oh-timeoff-modal__stat" style="margin-left: 20px;">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Filing Status" %}</span>
                    <span class="oh-timeoff-modal__stat-count">{{contract.filing_status}}</span>
                </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 "Pay Frequency" %}</span>
                    <span class="oh-timeoff-modal__stat-count">{{contract.get_pay_frequency_display}}</span>
                </div>
                <div class="oh-timeoff-modal__stat" style="margin-left: 20px;">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Document" %}</span>
                    {% if contract.contract_document %}
                        <a href="{{ contract.contract_document.url }}" target="_blank">{{ contract.contract_document.name }}</a>
                    {% endif %}
                </div>
            </div>
            {% if contract.note %}
                <div class="mt-3 mb-5" style="width:100%;">
                    <div class="oh-timeoff-modal__stat">
                        <span class="oh-timeoff-modal__stat-title">{% trans "Note" %}</span>
                        <span class="oh-timeoff-modal__stat-count">{{contract.note}} </span>
                    </div>
                </div>
            {% endif %}
            <div class="mt-3 mb-5" style="width:100%;">
                <div class="oh-timeoff-modal__stat">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Status" %}</span>
                    <span class="oh-timeoff-modal__stat-count">{{contract.get_contract_status_display}}</span>
                </div>
            </div>
            {% if dashboard != "dashboard" and perms.payroll.delete_contract or perms.payroll.change_contract %}
                <div class="oh-modal__button-container text-center">
                    <div class="oh-btn-group">
                        {% if perms.payroll.change_contract  %}
                            <a href="{% url 'update-contract' contract.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>
                        {% endif %}
                        {% if perms.payroll.delete_contract  %}
                            <button class="oh-btn oh-btn--danger" style="width: 50%;" data-action="delete"
                                hx-confirm="{% trans 'Do you want to delete this Contract?' %}" hx-target="{{delete_hx_target}}"
                                hx-post="{% url 'delete-contract-modal' contract.id %}?{{pd}}&instances_ids={{contract_ids}}"
                                >
                                <ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="create outline" ></ion-icon>{% trans "Delete" %}
                            </button>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        </div>
    </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="margin-top: 8%;margin-left: 29%;width: 190px;height: 190px;" src="{% static 'images/ui/no_request.png' %}" class="oh-404__image mb-4" alt="Page not found. 404."/>
        <h5 class="oh-404__subtitle">{% trans "There have been no contracts signed." %}</h5>
    </div>
{% endif %}
