{% load static %} {% load i18n %} {% load basefilters %} {% 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="{% url 'assign-filter' %}?{{pd}}" hx-target="#assignedLeaves"></span>
{% endif %}
<div class="oh-modal__dialog-header">
    <h2 class="oh-modal__dialog-title" id="assignedLeaveModalLabel">
        {% trans "Details" %}
    </h2>
    <button class="oh-modal__close" aria-label="Close">
        <ion-icon name="close-outline"></ion-icon>
    </button>
</div>

<div class="oh-modal__dialog-body oh-modal__dialog-relative">
    {% if available_leave %}
        <div class="oh-modal__dialog oh-modal__dialog--navigation m-0 p-0">
            <button hx-get="{% url 'available-leave-single-view' previous_instance %}?{{pd}}&instances_ids={{instance_ids_json}}"
                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 'available-leave-single-view' next_instance %}?{{pd}}&instances_ids={{instance_ids_json}}"
                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>
        <a class="oh-timeoff-modal__profile-content" style="text-decoration: none"
            href="{% url 'employee-view-individual' available_leave.employee_id.id %}">
            <div class="oh-profile mb-2">
                <div class="oh-profile__avatar">
                    <img src="{{available_leave.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">{{available_leave.employee_id}}</span>
                    <span class="oh-timeoff-modal__user m-0" style="font-size: 18px; color: #4d4a4a">
                        {{available_leave.employee_id.employee_work_info.department_id}} /
                        {{available_leave.employee_id.employee_work_info.job_position_id}}</span>
                </div>
            </div>
        </a>
        <div class="oh-modal__dialog-header" style="padding-top: 5px">
            <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 "Leave Type" %}</span>
                    <span class="oh-timeoff-modal__stat-count">{{available_leave.leave_type_id}}</span>
                </div>
                <div class="oh-timeoff-modal__stat" style="margin-left: 20px">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Available Days" %}</span>
                    <span class="oh-timeoff-modal__stat-count">{{available_leave.available_days}}</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 "Carryforward Days" %}</span>
                    <span class="oh-timeoff-modal__stat-count">{{available_leave.carryforward_days}}</span>
                </div>
                <div class="oh-timeoff-modal__stat" style="margin-left: 20px">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Total Leave Days" %}</span>
                    <span class="oh-timeoff-modal__stat-count">{{available_leave.total_leave_days}}</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 "Assigned Date" %}</span>
                    <span class="oh-timeoff-modal__stat-count dateformat_changer">{{available_leave.assigned_date}}</span>
                </div>
                <div class="oh-timeoff-modal__stat" style="margin-left: 20px">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Leave Reset Date" %}</span>
                    <span class="oh-timeoff-modal__stat-count dateformat_changer">{{available_leave.reset_date}}</span>
                </div>
            </div>
            {% if perms.leave.change_availableleave or perms.leave.delete_availableleave or request.user|is_reportingmanager %}
                <div class="oh-modal__button-container text-center">
                    <div class="oh-btn-group">
                        {% if request.user|is_reportingmanager or perms.leave.change_availableleave %}
                            <a hx-get="{% url 'available-leave-update' available_leave.id %}?{{pd}}"
                                hx-target='#objectUpdateModalTarget' data-toggle="oh-modal-toggle" data-target='#objectUpdateModal'
                                class="oh-btn oh-btn--info w-50" title="{% trans 'Edit' %}">
                                <ion-icon name="create-outline"></ion-icon>
                            </a>
                        {% endif %}
                        {% if request.user|is_reportingmanager or perms.leave.delete_availableleave %}
                            <form hx-confirm="{% trans 'Are you sure you want to delete this assigned leave?' %}"
                                hx-post="{% url 'assign-delete' available_leave.id %}?{{pd}}&instances_ids={{instance_ids_json}}"
                                hx-target="#objectDetailsModalTarget" style="width: 50%">
                                {% csrf_token %}
                                <button type='submit' class="oh-btn oh-btn--secondary w-100" title="{% trans 'Remove' %}" data-action="delete">
                                    <ion-icon name="trash-outline"></ion-icon>
                                </button>
                            </form>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        </div>
    {% else %}
        <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
            <img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);"
                src="{% static 'images/ui/employee_shift.png' %}" class="" alt="Page not found. 404." />
            <h5 class="oh-404__subtitle">{% trans "Assigned Leave type not found." %}</h5>
        </div>
    {% endif %}
</div>
