{% load basefilters %}
{% load i18n %} {% load horillafilters %} {% load static %}
{% 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-get="{% url 'work-type-request-search' %}?{{pd}}" hx-target="#view-container" hx-trigger="load"></span>
{% endif %}
{% if work_type_request %}
    <div class="oh-modal__dialog-header">
        <span class="oh-modal__dialog-title" id="workTypeRequestSingleViewModalLabel">
            {% trans "Details" %}
        </span>
        <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 request.GET.instances_ids %}
            <div class="oh-modal__dialog oh-modal__dialog--navigation m-0 p-0">
                <button
                    hx-get="{% url 'work-type-request-single-view' previous %}?instances_ids={{requests_ids}}&dashboard={{dashboard}}"
                    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 'work-type-request-single-view' next %}?instances_ids={{requests_ids}}&dashboard={{dashboard}}"
                    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 %}
            <a class="oh-timeoff-modal__profile-content" style="text-decoration:none;"
                href="{% url 'employee-view-individual' work_type_request.employee_id.id %}">
                <div class="oh-profile mb-2">
                    <div class="oh-profile__avatar">
                        <img src="{{work_type_request.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">{{work_type_request.employee_id}}</span>
                        <span class="oh-timeoff-modal__user m-0" style="font-size: 18px; color: #4d4a4a">
                            {{work_type_request.employee_id.employee_work_info.department_id}} /
                            {{work_type_request.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 mb-3">
                <div class="oh-timeoff-modal__stat">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Requested work type" %}</span>
                    <span class="oh-timeoff-modal__stat-count">{{work_type_request.work_type_id}}</span>
                </div>
                <div class="oh-timeoff-modal__stat" style="margin-left: 20px;">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Previous work type" %}</span>
                    <span class="oh-timeoff-modal__stat-count">{{work_type_request.previous_work_type_id}}</span>
                </div>
            </div>
            <div class="oh-timeoff-modal__stats-container mb-3">
                <div class="oh-timeoff-modal__stat">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Requested date" %}</span>
                    <span
                        class="oh-timeoff-modal__stat-count dateformat_changer">{{work_type_request.requested_date}}</span>
                </div>
                <div class="oh-timeoff-modal__stat" style="margin-left: 20px;">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Requested till" %}</span>
                    <span
                        class="oh-timeoff-modal__stat-count dateformat_changer">{{work_type_request.requested_till}}</span>
                </div>
            </div>
            <div class="oh-timeoff-modal__stats-container mb-3">
                <div class="oh-timeoff-modal__stat">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Description" %}</span>
                    <span class="oh-timeoff-modal__stat-count">{{work_type_request.description}}</span>
                </div>
                <div class="oh-timeoff-modal__stat" style="margin-left: 20px;">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Is permenent work type" %}</span>
                    <span class="oh-timeoff-modal__stat-count">
                        {% if work_type_request.is_permanent_work_type == True %}
                            {% trans "Yes" %}
                        {% else %}
                            {% trans "No" %}
                        {% endif %}
                    </span>
                </div>
            </div>
            {% if perms.base.change_worktyperequest or request.user|is_reportingmanager or perms.base.delete_worktyperequest %}
                <div class="oh-modal__button-container text-center">
                    <div class="oh-btn-group">
                        {% if perms.base.change_worktyperequest and dashboard == 'true' %}
                            <a href="/work-type-request-approve/{{work_type_request.id}}/" class="oh-btn oh-btn--success w-50"
                                onclick="return confirm('{% trans "Do you want to approve this request?" %}')" title="{% trans 'Approve' %}"
                                >
                                {% trans "Approve" %}
                            </a>
                            <a href="/work-type-request-cancel/{{work_type_request.id}}/"
                                onclick="return confirm('{% trans "Do you want to cancel this request?" %}')"
                                class="oh-btn oh-btn--danger w-50" title="{% trans 'Reject' %}"
                                >
                                {% trans "Reject" %}
                            </a>
                        {% else %}
                            {% if perms.base.change_worktyperequest or perms.base.delete_worktyperequest %}
                                {% if work_type_request.approved == False and not work_type_request.canceled %}
                                    <a hx-get="{% url 'work-type-request-update' work_type_request.id %}"
                                        hx-target='#workTypeRequestUpdateModalBody' data-toggle="oh-modal-toggle"
                                        data-target='#workTypeRequestUpdateModal' class="oh-btn oh-btn--info w-50"
                                        title="{% trans 'Edit' %}"><ion-icon name="create-outline"></ion-icon></a>
                                {% else %}
                                    <button class="oh-btn oh-btn--info w-50" disabled><ion-icon name="create-outline"></ion-icon></button>
                                    </td>
                                {% endif %}
                                {% if work_type_request.approved == False and work_type_request.canceled == False %}
                                    <form hx-confirm="{% trans 'Are you sure you want to delete this work type request?' %}"
                                        hx-post="{% url 'work-type-request-delete' work_type_request.id  %}?instances_ids={{requests_ids}}"
                                        hx-target="#objectDetailsModalTarget" style="width: 50%">
                                        {% csrf_token %}
                                        <button type='submit' class="oh-btn oh-btn--secondary w-100" title="{% trans 'Remove' %}"><ion-icon
                                                name="trash-outline"></ion-icon></button>
                                    </form>
                                {% else %}
                                    <button class="oh-btn oh-btn--secondary w-50" disabled><ion-icon
                                            name="trash-outline"></ion-icon></button></td>
                                {% endif %}
                            {% endif %}
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
{% else %}
    <div class="oh-modal__dialog-header">
        <span class="oh-modal__dialog-title" style="margin-left: 30px"></span>
        <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">
        <img style="margin-left: 33%; width: 150px; height: 150px" src="{% static 'images/ui/employee_shift.png' %}"
            class="oh-404__image mb-2" alt="Page not found. 404." />
        <h5 class="oh-404__subtitle">
            {% trans "There are no work type requets to display." %}
        </h5>
    </div>
{% endif %}
