{% load static %} {% load i18n %} {% load mathfilters %} {% load helpdeskfilters %}
{% include 'filter_tags.html' %}
{% if my_tickets or allocated_tickets or all_tickets %}
    <div class="oh-kanban" style="overflow: hidden">
        <div class="oh-tabs__content" id="tab_1">
            {% if my_tickets %}
                <div class="ui-sortable">
                    <div class="oh-kanban ui-sortable drop-target">
                        {% for status, label in ticket_status %}
                        <div
                            class="oh-kanban__section"
                            id="kanban{{status}}"
                            data-status-id="{{status}}"
                            style="position:sticky;top:0"
                        >
                            <div class="oh-kanban__section-head">
                                <div class="d-flex">
                                    <span
                                        class="oh-badge oh-badge--small oh-badge--round ms-2 mr-2"
                                    ></span>
                                    <span
                                        class="oh-kanban__section-title"
                                        data-type="label"
                                        ><span
                                            class="oh-tabs__movable-title"
                                            name="status"
                                            style="width: 160px"
                                            >{{label}}</span
                                        >
                                    </span>
                                </div>

                                <div
                                    class="oh-kanban__head-actions oh-kanban__dropdown"
                                >
                                    <div
                                        class="oh-kanban__head-actions oh-kanban__dropdown"
                                    >
                                        <div
                                            class="oh-dropdown me-4"
                                        >
                                            <a
                                                class=""
                                                data-toggle="oh-modal-toggle"
                                                data-target="#objectCreateModal"
                                                hx-get="{% url 'ticket-create' %}?status={{status}}"
                                                hx-target="#objectCreateModalTarget"
                                                title="Add Tickets"
                                            >
                                                <ion-icon
                                                    name="add-sharp"
                                                    role="img"
                                                    class="md hydrated mt-1"
                                                    aria-label="add sharp"
                                                ></ion-icon>
                                            </a>

                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div
                                class="oh-kanban__section-body ui-sortable candidate-container"
                                data-ticket-id="{{status}}"
                            >
                                {% for ticket in my_tickets %} {% if ticket.status == status %}

                                <div
                                    class="oh-kanban__card candidate change-ticket
                                            {% if ticket.status == 'new' %}row-status--blue
                                            {% elif ticket.status == 'in_progress' %}row-status--orange
                                            {% elif ticket.status == 'resolved' %}row-status--yellowgreen
                                            {% elif ticket.status == 'on_hold' %}row-status--red
                                            {% elif ticket.status == 'canceled' %}row-status--grey{% endif %}"
                                    data-ticket-id="{{ticket.id}}"
                                    id="canididate-{{ticket.id}}"
                                    style="cursor: pointer; overflow: visible"
                                    data-candidate="{{ticket.name}}"
                                    data-job-position="{{ticket.job_position_id}}"
                                    onclick="window.location.href = `{% url 'ticket-detail' ticket.id %}`"
                                >

                                    <div class="oh-kanban__card-head">
                                        <div class="border-bottom pb-3">
                                            <span
                                                class="oh-profile__name oh-text--dark"
                                                data-type="label"
                                                style="font-weight: 600"
                                                title="{{ticket}}"
                                                >{{ticket|truncatechars:15}}</span
                                            ><br/>
                                            <span
                                            class="oh-kanban__card-footer-text oh-text--light"
                                            >{{ticket.created_date}}</span
                                        >
                                        </div>
                                        <div
                                            class="oh-kanban__card-actions oh-kanban__dropdown"
                                        >
                                            <button class="oh-btn oh-btn--small
                                                oh-btn--transparent oh-kanban__btn
                                                oh-kanban__dropdown-toggle action-button"
                                                title={% trans "Actions" %}
                                                onclick="event.stopPropagation()">
                                                <ion-icon
                                                    name="ellipsis-vertical-sharp"
                                                    role="img"
                                                    class="md hydrated"
                                                    aria-label="ellipsis vertical sharp"
                                                >
                                                </ion-icon>
                                            </button>
                                            <div
                                                class="oh-dropdown oh-kanban__dropdown-menu d-none"
                                            >
                                                <div
                                                    class="oh-dropdown__menu oh-dropdown__menu--right"
                                                >
                                                    <ul class="oh-dropdown__items">
                                                        <li
                                                            class="oh-dropdown__item"
                                                        >
                                                            <a
                                                                style="
                                                                    color: inherit;
                                                                    text-decoration: none;
                                                                "
                                                                class="oh-dropdown__link oh-dropdown__link--secondary"
                                                                data-toggle="oh-modal-toggle"
                                                                data-target="#objectCreateModal"
                                                                hx-get="{% url 'ticket-update' ticket.id %}"
                                                                hx-target="#objectCreateModalTarget"
                                                                onclick="event.stopPropagation()"
                                                                >{% trans "Edit" %}</a
                                                            >
                                                        </li>
                                                        <li
                                                            class="oh-dropdown__item"
                                                        >
                                                            {% if ticket.is_active %}
                                                                <a
                                                                    href="{% url 'ticket-archive' ticket.id %}"
                                                                    onclick="event.stopPropagation();return confirm('{% trans "Do you want to archive this ticket?" %}');"
                                                                    class="oh-dropdown__link"
                                                                    >{% trans "Archive" %}</a
                                                                >
                                                            {% else %}
                                                                <a
                                                                    href="{% url 'ticket-archive' ticket.id %}"
                                                                    onclick="event.stopPropagation();return confirm('{% trans "Do you want to un-archive this ticket?" %}');"
                                                                    class="oh-dropdown__link"
                                                                    >{% trans "Un-archive" %}</a
                                                                >
                                                            {% endif %}
                                                        </li>
                                                        {% if ticket.status == 'new' %}
                                                            <li
                                                                class="oh-dropdown__item"
                                                            >
                                                                <form
                                                                    action="{% url 'ticket-delete' ticket.id %}"
                                                                    onsubmit="return confirm('{% trans "Are you sure you want to delete	this Ticket?" %}');"
                                                                    method="post"
                                                                >
                                                                    {% csrf_token %}
                                                                    <button
                                                                        class="oh-dropdown__link oh-dropdown__link--danger"
                                                                        onclick="event.stopPropagation()"
                                                                    >
                                                                        {% trans "Delete" %}
                                                                    </button>
                                                                </form>
                                                            </li>
                                                        {% endif %}
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="oh-kanban__card-footer" style="position:relative;padding-top:0">
                                        <div class="d-flex justify-content-between">
                                            <div>
                                                <span
                                                    class="oh-kanban__card-footer-text oh-text" style="font-weight:600;"
                                                    >{% trans "owner" %}</span
                                                ><br />

                                                <span
                                                    class="oh-kanban__card-footer-text oh-text--light"
                                                    >{{ticket.employee_id}} </span
                                                >
                                            </div>
                                            <div title="{{ticket.priority}} priority" style="text-align:right">
                                                {% if ticket.priority == 'low' %}
                                                    <form hx-swap="none" hx-post='{% url "update-priority" ticket.id %}' method="post">
                                                        {% csrf_token %}
                                                        <div class="d-flex">
                                                            <div class="oh-rate" onclick="event.stopPropagation();$(this).parents().closest('form').find('button').click()">
                                                                {% for i in "321" %}
                                                                    <input type="radio" id="star{{i}}{{ticket.id}}" name="rating" class="rating-radio" value="{{i}}" {% if '1' == i %} checked {% endif %}/>
                                                                    <label for="star{{i}}{{ticket.id}}"
                                                                    {% if i == '1' %}title="{% trans 'Low' %}"{% elif i == '2' %}title="{% trans 'Medium' %}"{% else %}title="{% trans 'High' %}"{% endif %}></label>
                                                                {% endfor %}
                                                            </div>
                                                            <button type="submit" hidden="true" onclick="event.stopPropagation()"></button>
                                                            <span id="rating-radio-error"></span>
                                                        </div>
                                                    </form>
                                                {% elif ticket.priority == 'medium' %}
                                                    <form hx-swap="none" hx-post='{% url "update-priority" ticket.id %}' method="post">
                                                        {% csrf_token %}
                                                        <div class="d-flex">
                                                            <div class="oh-rate" onclick="event.stopPropagation();$(this).parents().closest('form').find('button').click()">
                                                                {% for i in "321" %}
                                                                    <input type="radio" id="star{{i}}{{ticket.id}}" name="rating" class="rating-radio" value="{{i}}" {% if '2' == i %} checked {% endif %}/>
                                                                    <label for="star{{i}}{{ticket.id}}"
                                                                    {% if i == '1' %}title="{% trans 'Low' %}"{% elif i == '2' %}title="{% trans 'Medium' %}"{% else %}title="{% trans 'High' %}"{% endif %}></label>
                                                                {% endfor %}
                                                            </div>
                                                            <button type="submit" hidden="true" onclick="event.stopPropagation()"></button>
                                                            <span id="rating-radio-error"></span>
                                                        </div>
                                                    </form>
                                                {% else %}
                                                    <form hx-swap="none" hx-post='{% url "update-priority" ticket.id %}' method="post">
                                                        {% csrf_token %}
                                                        <div class="d-flex">
                                                            <div class="oh-rate" onclick="event.stopPropagation();$(this).parents().closest('form').find('button').click()">
                                                                {% for i in "321" %}
                                                                    <input type="radio" id="star{{i}}{{ticket.id}}" name="rating" class="rating-radio" value="{{i}}" {% if '3' == i %} checked {% endif %}/>
                                                                    <label for="star{{i}}{{ticket.id}}"
                                                                    {% if i == '1' %}title="{% trans 'Low' %}"{% elif i == '2' %}title="{% trans 'Medium' %}"{% else %}title="{% trans 'High' %}"{% endif %}></label>
                                                                {% endfor %}
                                                            </div>
                                                            <button type="submit" hidden="true" onclick="event.stopPropagation()"></button>
                                                            <span id="rating-radio-error"></span>
                                                        </div>
                                                    </form>
                                                {% endif %}
                                                <div>
                                                    <span class='float-end' title = 'due {% if ticket.deadline == today %}today {% else %}in {{ticket.deadline|sub:today}}{% endif %}'><ion-icon class="text-{% if ticket.deadline < today %}danger {% elif ticket.deadline == today %}warning {% else %}success{% endif %}" name="time-sharp"></ion-icon></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {% if ticket.assigned_to.all %}
                                        <div class="oh-kanban__card-footer" style="position:relative;padding-top:0">
                                            <span
                                                class="oh-kanban__card-footer-text oh-text" style="font-weight:600;"
                                                >{% trans "Assignees" %}</span
                                            >
                                            <button onclick="event.stopPropagation();$(this).siblings('.oh-kanban__card-content').toggleClass('oh-kanban__card-content--hide')" class="oh-kanban__card-body-collapse oh-kanban__card-collapse--down" aria-label="Toggle Options" title="{% trans 'Assignees' %}"></button>
                                            <div class="oh-kanban__card-content oh-kanban__card-content--hide">
                                                <span class="oh-kanban__card-footer-text oh-text--light">
                                                    {{ticket.assigned_to.all|join:", "}}
                                                </span>
                                            </div>
                                        </div>
                                    {% endif %}
                                </div>
                                {% endif %} {% endfor %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            {% else %}
                <!-- start of empty page -->
				<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;" >
					<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 %}

        </div>
        <div class="oh-tabs__content" id="tab_2">
            {% if allocated_tickets %}
                <div class="ui-sortable">
                    <div class="oh-kanban ui-sortable drop-target">
                        {% for status, label in ticket_status %}

                        <div
                            class="oh-kanban__section"
                            id="kanban{{status}}"
                            data-status-id="{{status}}"
                        >
                            <div class="oh-kanban__section-head mt-2">
                                <div class="d-flex">
                                    <span
                                        class="oh-badge oh-badge--small oh-badge--round ms-2 mr-2"
                                    ></span>
                                    <span
                                        class="oh-kanban__section-title"
                                        data-type="label"
                                        ><span
                                            class="oh-tabs__movable-title"
                                            name="status"
                                            style="width: 160px"
                                            >{{label}}</span
                                        >
                                    </span>
                                </div>

                                <div
                                    class="oh-kanban__head-actions oh-kanban__dropdown"
                                >
                                    <div
                                        class="oh-kanban__head-actions oh-kanban__dropdown"
                                    >
                                        <div
                                            class="oh-dropdown me-4"
                                        >
                                            <a
                                                class=""
                                                data-toggle="oh-modal-toggle"
                                                data-target="#objectCreateModal"
                                                hx-get="{% url 'ticket-create' %}?status={{status}}"
                                                hx-target="#objectCreateModalTarget"
                                                title="Add Tickets"
                                            >
                                                <ion-icon
                                                    name="add-sharp"
                                                    role="img"
                                                    class="md hydrated mt-1"
                                                    aria-label="add sharp"
                                                ></ion-icon>
                                            </a>

                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div
                                class="oh-kanban__section-body ui-sortable candidate-container"
                                data-ticket-id="{{status}}"
                            >
                                {% for ticket in allocated_tickets %} {% if ticket.status == status %}

                                <div
                                    class="oh-kanban__card candidate change-ticket
                                            {% if ticket.status == 'new' %}row-status--blue
                                            {% elif ticket.status == 'in_progress' %}row-status--orange
                                            {% elif ticket.status == 'resolved' %}row-status--yellowgreen
                                            {% elif ticket.status == 'on_hold' %}row-status--red
                                            {% elif ticket.status == 'canceled' %}row-status--grey{% endif %}"
                                    data-ticket-id="{{ticket.id}}"
                                    id="canididate-{{ticket.id}}"
                                    style="cursor: pointer; overflow: visible"
                                    data-candidate="{{ticket.name}}"
                                    data-job-position="{{ticket.job_position_id}}"
                                    {% if request.user.employee_get in ticket.assigned_to.all or perms.helpdesk.view_ticket or request.user.employee_get|is_department_manager:ticket %}
                                        onclick="window.location.href = `{% url 'ticket-detail' ticket.id %}`"
                                    {% else %}
                                        hx-get = "{% url 'ticket-individual-view' ticket.id %}"
                                        data-toggle="oh-modal-toggle"
                                        data-target="#objectUpdateModal"
                                        hx-target="#objectUpdateModalTarget"
                                    {% endif %}
                                >

                                    <div class="oh-kanban__card-head">
                                        <div class="border-bottom pb-3">
                                            <span
                                                class="oh-profile__name oh-text--dark"
                                                data-type="label"
                                                style="font-weight: 600"
                                                title="{{ticket}}"
                                                >{{ticket|truncatechars:15}}</span
                                            ><br/>
                                            <span
                                            class="oh-kanban__card-footer-text oh-text--light "
                                            >{{ticket.created_date}}</span
                                        >
                                        </div>

                                            <div
                                                class="oh-kanban__card-actions oh-kanban__dropdown"
                                            >
                                                <button class="oh-btn oh-btn--small
                                                    oh-btn--transparent oh-kanban__btn
                                                    oh-kanban__dropdown-toggle action-button"
                                                    title={% trans "Actions" %}
                                                    onclick="event.stopPropagation()">
                                                    <ion-icon
                                                        name="ellipsis-vertical-sharp"
                                                        role="img"
                                                        class="md hydrated"
                                                        aria-label="ellipsis vertical sharp"
                                                    >
                                                    </ion-icon>
                                                </button>
                                                <div
                                                    class="oh-dropdown oh-kanban__dropdown-menu d-none"
                                                >
                                                    <div
                                                        class="oh-dropdown__menu oh-dropdown__menu--right"
                                                    >
                                                        <ul class="oh-dropdown__items">
                                                            {% if perms.helpdesk.change_ticket or request.user.employee_get|is_department_manager:ticket %}
                                                                <li
                                                                    class="oh-dropdown__item"
                                                                >
                                                                    <a
                                                                        style="
                                                                            color: inherit;
                                                                            text-decoration: none;
                                                                        "
                                                                        hx-get = "{% url "view-ticket-claim-request" ticket.id %}"
                                                                        hx-target="#objectDetailsModalTarget"
                                                                        data-toggle="oh-modal-toggle"
                                                                        data-target="#objectDetailsModal"
                                                                    >{% trans "Claim Requests" %}
                                                                    </a>
                                                                </li>

                                                            {% else %}

                                                                {% if not ticket|calim_request_exists:request.user.employee_get and request.user.employee_get not in ticket.assigned_to.all %}
                                                                    <li
                                                                        class="oh-dropdown__item"
                                                                    >
                                                                        <a
                                                                            style="
                                                                                color: inherit;
                                                                                text-decoration: none;
                                                                            "
                                                                            href = "{% url 'claim-ticket' ticket.id %}"
                                                                            onclick="event.stopPropagation()"
                                                                            class="oh-dropdown__link"
                                                                            >{% trans "Claim" %}</a
                                                                        >
                                                                    </li>
                                                                {% else %}
                                                                    {%if not perms.helpdesk.change_ticket or not request.user.employee_get|is_department_manager:ticket or not perms.helpdesk.delete_ticket %}
                                                                        <span style="color: red;">{% trans "Can't claim again" %}</span>
                                                                    {% endif %}
                                                                {% endif %}
                                                            {% endif %}
                                                            {% if perms.helpdesk.change_ticket or request.user.employee_get|is_department_manager:ticket  %}
                                                                <li
                                                                    class="oh-dropdown__item"
                                                                >
                                                                    <a
                                                                        style="
                                                                            color: inherit;
                                                                            text-decoration: none;
                                                                        "
                                                                        class="oh-dropdown__link oh-dropdown__link--secondary"
                                                                        data-toggle="oh-modal-toggle"
                                                                        data-target="#objectCreateModal"
                                                                        hx-get="{% url 'ticket-update' ticket.id %}"
                                                                        hx-target="#objectCreateModalTarget"
                                                                        onclick="event.stopPropagation()"
                                                                        >{% trans "Edit" %}</a
                                                                    >
                                                                </li>
                                                            {% endif %}
                                                            {% if perms.helpdesk.delete_ticket or request.user.employee_get|is_department_manager:ticket %}
                                                                {% if ticket.is_active %}
                                                                    <li
                                                                        class="oh-dropdown__item"
                                                                    >
                                                                        <a
                                                                            href="{% url 'ticket-archive' ticket.id %}"
                                                                            onclick="event.stopPropagation();return confirm('{% trans "Do you want to archive this ticket?" %}');"
                                                                            class="oh-dropdown__link"
                                                                            >{% trans "Archive" %}</a
                                                                        >
                                                                    </li>
                                                                {% else %}
                                                                    <li
                                                                        class="oh-dropdown__item"
                                                                    >
                                                                        <a
                                                                            href="{% url 'ticket-archive' ticket.id %}"
                                                                            onclick="event.stopPropagation();return confirm('{% trans "Do you want to un-archive this ticket?" %}');"
                                                                            class="oh-dropdown__link"
                                                                            >{% trans "Un-archive" %}</a
                                                                        >
                                                                    </li>
                                                                {% endif %}
                                                            {% endif %}
                                                            {% if perms.helpdesk.delete_ticket %}
                                                                {% if ticket.status == 'new' %}
                                                                    <li
                                                                        class="oh-dropdown__item"
                                                                    >
                                                                        <form
                                                                            action="{% url 'ticket-delete' ticket.id %}"
                                                                            onsubmit="return confirm('{% trans "Are you sure you want to delete	this Ticket?" %}');"
                                                                            method="post"
                                                                        >
                                                                            {% csrf_token %}
                                                                            <button
                                                                                class="oh-dropdown__link oh-dropdown__link--danger"
                                                                                onclick="event.stopPropagation()"
                                                                            >
                                                                                {% trans "Delete" %}
                                                                            </button>
                                                                        </form>
                                                                    </li>
                                                                {% endif %}
                                                            {% endif %}
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                    </div>
                                    <div class="oh-kanban__card-footer" style="position:relative;padding-top:0" >
                                        <div class="d-flex justify-content-between">
                                            <div>
                                                <span
                                                    class="oh-kanban__card-footer-text oh-text" style="font-weight:600;"
                                                    >{% trans "owner" %}</span
                                                ><br />

                                                <span
                                                    class="oh-kanban__card-footer-text oh-text--light"
                                                    >{{ticket.employee_id}} </span
                                                >
                                            </div>
                                            <div title="{{ticket.priority}} priority" style="text-align:right">
                                                    {% if perms.helpdesk.change_ticket or request.user.employee_get|is_department_manager:ticket %}
                                                        {% if ticket.priority == 'low' %}
                                                            <form hx-swap="none" hx-post='{% url "update-priority" ticket.id %}' method="post">
                                                                {% csrf_token %}
                                                                <div class="d-flex">
                                                                    <div class="oh-rate" onclick="event.stopPropagation();$(this).parents().closest('form').find('button').click()">
                                                                        {% for i in "321" %}
                                                                            <input type="radio" id="star{{i}}{{ticket.id}}" name="rating" class="rating-radio" value="{{i}}" {% if '1' == i %} checked {% endif %}/>
                                                                            <label for="star{{i}}{{ticket.id}}"
                                                                            {% if i == '1' %}title="{% trans 'Low' %}"{% elif i == '2' %}title="{% trans 'Medium' %}"{% else %}title="{% trans 'High' %}"{% endif %}></label>
                                                                        {% endfor %}
                                                                    </div>
                                                                    <button type="submit" hidden="true" onclick="event.stopPropagation()"></button>
                                                                    <span id="rating-radio-error"></span>
                                                                </div>
                                                            </form>
                                                        {% elif ticket.priority == 'medium' %}
                                                            <form hx-swap="none" hx-post='{% url "update-priority" ticket.id %}' method="post">
                                                                {% csrf_token %}
                                                                <div class="d-flex">
                                                                    <div class="oh-rate" onclick="event.stopPropagation();$(this).parents().closest('form').find('button').click()">
                                                                        {% for i in "321" %}
                                                                            <input type="radio" id="star{{i}}{{ticket.id}}" name="rating" class="rating-radio" value="{{i}}" {% if '2' == i %} checked {% endif %}/>
                                                                            <label for="star{{i}}{{ticket.id}}"
                                                                            {% if i == '1' %}title="{% trans 'Low' %}"{% elif i == '2' %}title="{% trans 'Medium' %}"{% else %}title="{% trans 'High' %}"{% endif %}></label>
                                                                        {% endfor %}
                                                                    </div>
                                                                    <button type="submit" hidden="true" onclick="event.stopPropagation()"></button>
                                                                    <span id="rating-radio-error"></span>
                                                                </div>
                                                            </form>
                                                        {% else %}
                                                            <form hx-swap="none" hx-post='{% url "update-priority" ticket.id %}' method="post">
                                                                {% csrf_token %}
                                                                <div class="d-flex">
                                                                    <div class="oh-rate" onclick="event.stopPropagation();$(this).parents().closest('form').find('button').click()">
                                                                        {% for i in "321" %}
                                                                            <input type="radio" id="star{{i}}{{ticket.id}}" name="rating" class="rating-radio" value="{{i}}" {% if '3' == i %} checked {% endif %}/>
                                                                            <label for="star{{i}}{{ticket.id}}"
                                                                            {% if i == '1' %}title="{% trans 'Low' %}"{% elif i == '2' %}title="{% trans 'Medium' %}"{% else %}title="{% trans 'High' %}"{% endif %}></label>
                                                                        {% endfor %}
                                                                    </div>
                                                                    <button type="submit" hidden="true" onclick="event.stopPropagation()"></button>
                                                                    <span id="rating-radio-error"></span>
                                                                </div>
                                                            </form>
                                                        {% endif %}
                                                    {% else %}
                                                        {% if ticket.priority == 'low' %}
                                                            <div class="d-flex">
                                                                <div class="oh-rate">
                                                                    {% for i in "321" %}
                                                                        <input type="radio" id="star{{i}}{{ticket.id}}" name="rating" class="rating-radio" value="{{i}}" {% if '1' == i %} checked {% endif %}/>
                                                                        <label for="star{{i}}{{ticket.id}}"
                                                                        {% if i == '1' %}title="{% trans 'Low' %}"{% elif i == '2' %}title="{% trans 'Medium' %}"{% else %}title="{% trans 'High' %}"{% endif %}></label>
                                                                    {% endfor %}
                                                                </div>
                                                            </div>
                                                        {% elif ticket.priority == 'medium' %}
                                                            <div class="d-flex">
                                                                <div class="oh-rate">
                                                                    {% for i in "321" %}
                                                                        <input type="radio" id="star{{i}}{{ticket.id}}" name="rating" class="rating-radio" value="{{i}}" {% if '2' == i %} checked {% endif %}/>
                                                                        <label for="star{{i}}{{ticket.id}}"
                                                                        {% if i == '1' %}title="{% trans 'Low' %}"{% elif i == '2' %}title="{% trans 'Medium' %}"{% else %}title="{% trans 'High' %}"{% endif %}></label>
                                                                    {% endfor %}
                                                                </div>
                                                            </div>
                                                        {% else %}
                                                            <div class="d-flex">
                                                                <div class="oh-rate">
                                                                    {% for i in "321" %}
                                                                        <input type="radio" id="star{{i}}{{ticket.id}}" name="rating" class="rating-radio" value="{{i}}" {% if '3' == i %} checked {% endif %}/>
                                                                        <label for="star{{i}}{{ticket.id}}"
                                                                        {% if i == '1' %}title="{% trans 'Low' %}"{% elif i == '2' %}title="{% trans 'Medium' %}"{% else %}title="{% trans 'High' %}"{% endif %}></label>
                                                                    {% endfor %}
                                                                </div>
                                                            </div>
                                                        {% endif %}
                                                    {% endif %}
                                                <div>
                                                    <span class='float-end' title = 'due {% if ticket.deadline == today %}today {% else %}in {{ticket.deadline|sub:today}}{% endif %}'><ion-icon class="text-{% if ticket.deadline < today %}danger {% elif ticket.deadline == today %}warning {% else %}success{% endif %}" name="time-sharp"></ion-icon></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {% if ticket.assigned_to.all %}
                                        <div class="oh-kanban__card-footer" style="position:relative;padding-top:0">
                                            <span
                                                class="oh-kanban__card-footer-text oh-text" style="font-weight:600;"
                                                >{% trans "Assignees" %}</span
                                            >
                                            <button onclick="event.stopPropagation();$(this).siblings('.oh-kanban__card-content').toggleClass('oh-kanban__card-content--hide')" class="oh-kanban__card-body-collapse oh-kanban__card-collapse--down" aria-label="Toggle Options" title="{% trans 'Assignees' %}"></button>
                                            <div class="oh-kanban__card-content oh-kanban__card-content--hide">
                                                <span class="oh-kanban__card-footer-text oh-text--light">
                                                    {{ticket.assigned_to.all|join:", "}}
                                                </span>
                                            </div>
                                        </div>
                                    {% endif %}
                                </div>
                                {% endif %} {% endfor %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            {% else %}
                <!-- start of empty page -->
				<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;" >
					<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 %}
        </div>
        <div class="oh-tabs__content" id="tab_3">
            {% if all_tickets %}
                <div class="ui-sortable">
                    <div class="oh-kanban ui-sortable drop-target">
                        {% for status, label in ticket_status %}

                        <div
                            class="oh-kanban__section"
                            id="kanban{{status}}"
                            data-status-id="{{status}}"
                        >
                            <div class="oh-kanban__section-head mt-2">
                                <div class="d-flex">
                                    <span
                                        class="oh-badge oh-badge--small oh-badge--round ms-2 mr-2"
                                    ></span>
                                    <span
                                        class="oh-kanban__section-title"
                                        data-type="label"
                                        ><span
                                            class="oh-tabs__movable-title"
                                            name="status"
                                            style="width: 160px"
                                            >{{label}}</span
                                        >
                                    </span>
                                </div>

                                <div
                                    class="oh-kanban__head-actions oh-kanban__dropdown"
                                >
                                    <div
                                        class="oh-kanban__head-actions oh-kanban__dropdown"
                                    >
                                        <div
                                            class="oh-dropdown me-4"
                                        >
                                            <a
                                                class=""
                                                data-toggle="oh-modal-toggle"
                                                data-target="#objectCreateModal"
                                                hx-get="{% url 'ticket-create' %}?status={{status}}"
                                                hx-target="#objectCreateModalTarget"
                                                title="Add Tickets"
                                            >
                                                <ion-icon
                                                    name="add-sharp"
                                                    role="img"
                                                    class="md hydrated mt-1"
                                                    aria-label="add sharp"
                                                ></ion-icon>
                                            </a>

                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div
                                class="oh-kanban__section-body ui-sortable candidate-container"
                                data-ticket-id="{{status}}"
                            >
                                {% for ticket in all_tickets %} {% if ticket.status == status %}

                                <div
                                    class="oh-kanban__card candidate change-ticket
                                            {% if ticket.status == 'new' %}row-status--blue
                                            {% elif ticket.status == 'in_progress' %}row-status--orange
                                            {% elif ticket.status == 'resolved' %}row-status--yellowgreen
                                            {% elif ticket.status == 'on_hold' %}row-status--red
                                            {% elif ticket.status == 'canceled' %}row-status--grey{% endif %}"
                                    data-ticket-id="{{ticket.id}}"
                                    id="canididate-{{ticket.id}}"
                                    style="cursor: pointer; overflow: visible"
                                    data-candidate="{{ticket.name}}"
                                    data-job-position="{{ticket.job_position_id}}"
                                    onclick="window.location.href = `{% url 'ticket-detail' ticket.id %}`"
                                >

                                    <div class="oh-kanban__card-head">
                                        <div class="border-bottom pb-3">
                                            <span
                                                class="oh-profile__name oh-text--dark"
                                                data-type="label"
                                                style="font-weight: 600"
                                                title="{{ticket}}"
                                                >{{ticket|truncatechars:15}}</span
                                            ><br/>
                                            <span
                                            class="oh-kanban__card-footer-text oh-text--light"
                                            >{{ticket.created_date}}</span
                                        >
                                        </div>
									    {% if perms.helpdesk.change_ticket or perms.helpdesk.delete_ticket or request.user.employee_get|is_department_manager:ticket %}

                                            <div
                                                class="oh-kanban__card-actions oh-kanban__dropdown"
                                            >
                                                <button class="oh-btn oh-btn--small
                                                    oh-btn--transparent oh-kanban__btn
                                                    oh-kanban__dropdown-toggle action-button"
                                                    title={% trans "Actions" %}
                                                    onclick="event.stopPropagation()">
                                                    <ion-icon
                                                        name="ellipsis-vertical-sharp"
                                                        role="img"
                                                        class="md hydrated"
                                                        aria-label="ellipsis vertical sharp"
                                                    >
                                                    </ion-icon>
                                                </button>
                                                <div
                                                    class="oh-dropdown oh-kanban__dropdown-menu d-none"
                                                >
                                                    <div
                                                        class="oh-dropdown__menu oh-dropdown__menu--right"
                                                    >
                                                        <ul class="oh-dropdown__items">
                                                            {% if perms.helpdesk.change_ticket or request.user.employee_get|is_department_manager:ticket  %}
                                                                <li
                                                                    class="oh-dropdown__item"
                                                                >
                                                                    <a
                                                                        style="
                                                                            color: inherit;
                                                                            text-decoration: none;
                                                                        "
                                                                        class="oh-dropdown__link oh-dropdown__link--secondary"
                                                                        data-toggle="oh-modal-toggle"
                                                                        data-target="#objectCreateModal"
                                                                        hx-get="{% url 'ticket-update' ticket.id %}"
                                                                        hx-target="#objectCreateModalTarget"
                                                                        onclick="event.stopPropagation()"
                                                                        >{% trans "Edit" %}</a
                                                                    >
                                                                </li>
                                                            {% endif %}
                                                            {% if perms.helpdesk.delete_ticket or request.user.employee_get|is_department_manager:ticket %}
                                                                {% if ticket.is_active %}
                                                                    <li
                                                                        class="oh-dropdown__item"
                                                                    >
                                                                        <a
                                                                            href="{% url 'ticket-archive' ticket.id %}"
                                                                            onclick="event.stopPropagation();return confirm('{% trans "Do you want to archive this ticket?" %}');"
                                                                            class="oh-dropdown__link"
                                                                            >{% trans "Archive" %}</a
                                                                        >
                                                                    </li>
                                                                {% else %}
                                                                    <li
                                                                        class="oh-dropdown__item"
                                                                    >
                                                                        <a
                                                                            href="{% url 'ticket-archive' ticket.id %}"
                                                                            onclick="event.stopPropagation();return confirm('{% trans "Do you want to un-archive this ticket?" %}');"
                                                                            class="oh-dropdown__link"
                                                                            >{% trans "Un-archive" %}</a
                                                                        >
                                                                    </li>
                                                                {% endif %}
                                                            {% endif %}
                                                            {% if perms.helpdesk.delete_ticket %}
                                                                {% if ticket.status == 'new' %}
                                                                    <li
                                                                        class="oh-dropdown__item"
                                                                    >
                                                                        <form
                                                                            action="{% url 'ticket-delete' ticket.id %}"
                                                                            onsubmit="return confirm('{% trans "Are you sure you want to delete	this Ticket?" %}');"
                                                                            method="post"
                                                                        >
                                                                            {% csrf_token %}
                                                                            <button
                                                                                class="oh-dropdown__link oh-dropdown__link--danger"
                                                                                onclick="event.stopPropagation()"
                                                                            >
                                                                                {% trans "Delete" %}
                                                                            </button>
                                                                        </form>
                                                                    </li>
                                                                {% endif %}
                                                            {% endif %}
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        {% endif %}
                                    </div>
                                    <div class="oh-kanban__card-footer" style="position:relative;padding-top:0">
                                        <div class="d-flex justify-content-between">
                                            <div>
                                                <span
                                                    class="oh-kanban__card-footer-text oh-text" style="font-weight:600;"
                                                    >{% trans "owner" %}</span
                                                ><br />

                                                <span
                                                    class="oh-kanban__card-footer-text oh-text--light"
                                                    >{{ticket.employee_id}} </span
                                                >
                                            </div>
                                            <div title="{{ticket.priority}} priority" style="text-align:right">
                                                {% if ticket.priority == 'low' %}
                                                    <form hx-swap="none" hx-post='{% url "update-priority" ticket.id %}' method="post">
                                                        {% csrf_token %}
                                                        <div class="d-flex">
                                                            <div class="oh-rate" onclick="event.stopPropagation();$(this).parents().closest('form').find('button').click()">
                                                                {% for i in "321" %}
                                                                    <input type="radio" id="star{{i}}{{ticket.id}}" name="rating" class="rating-radio" value="{{i}}" {% if '1' == i %} checked {% endif %}/>
                                                                    <label for="star{{i}}{{ticket.id}}"
                                                                    {% if i == '1' %}title="{% trans 'Low' %}"{% elif i == '2' %}title="{% trans 'Medium' %}"{% else %}title="{% trans 'High' %}"{% endif %}></label>
                                                                {% endfor %}
                                                            </div>
                                                            <button type="submit" hidden="true" onclick="event.stopPropagation()"></button>
                                                            <span id="rating-radio-error"></span>
                                                        </div>
                                                    </form>
                                                {% elif ticket.priority == 'medium' %}
                                                    <form hx-swap="none" hx-post='{% url "update-priority" ticket.id %}' method="post">
                                                        {% csrf_token %}
                                                        <div class="d-flex">
                                                            <div class="oh-rate" onclick="event.stopPropagation();$(this).parents().closest('form').find('button').click()">
                                                                {% for i in "321" %}
                                                                    <input type="radio" id="star{{i}}{{ticket.id}}" name="rating" class="rating-radio" value="{{i}}" {% if '2' == i %} checked {% endif %}/>
                                                                    <label for="star{{i}}{{ticket.id}}"
                                                                    {% if i == '1' %}title="{% trans 'Low' %}"{% elif i == '2' %}title="{% trans 'Medium' %}"{% else %}title="{% trans 'High' %}"{% endif %}></label>
                                                                {% endfor %}
                                                            </div>
                                                            <button type="submit" hidden="true" onclick="event.stopPropagation()"></button>
                                                            <span id="rating-radio-error"></span>
                                                        </div>
                                                    </form>
                                                {% else %}
                                                    <form hx-swap="none" hx-post='{% url "update-priority" ticket.id %}' method="post">
                                                        {% csrf_token %}
                                                        <div class="d-flex">
                                                            <div class="oh-rate" onclick="event.stopPropagation();$(this).parents().closest('form').find('button').click()">
                                                                {% for i in "321" %}
                                                                    <input type="radio" id="star{{i}}{{ticket.id}}" name="rating" class="rating-radio" value="{{i}}" {% if '3' == i %} checked {% endif %}/>
                                                                    <label for="star{{i}}{{ticket.id}}"
                                                                    {% if i == '1' %}title="{% trans 'Low' %}"{% elif i == '2' %}title="{% trans 'Medium' %}"{% else %}title="{% trans 'High' %}"{% endif %}></label>
                                                                {% endfor %}
                                                            </div>
                                                            <button type="submit" hidden="true" onclick="event.stopPropagation()"></button>
                                                            <span id="rating-radio-error"></span>
                                                        </div>
                                                    </form>
                                                {% endif %}
                                                <div>
                                                    <span class='float-end' title = 'due {% if ticket.deadline == today %}today {% else %}in {{ticket.deadline|sub:today}}{% endif %}'><ion-icon class="text-{% if ticket.deadline < today %}danger {% elif ticket.deadline == today %}warning {% else %}success{% endif %}" name="time-sharp"></ion-icon></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {% if ticket.assigned_to.all %}
                                        <div class="oh-kanban__card-footer" style="position:relative;padding-top:0">
                                            <span
                                                class="oh-kanban__card-footer-text oh-text" style="font-weight:600;"
                                                >{% trans "Assignees" %}</span
                                            >
                                            <button onclick="event.stopPropagation();$(this).siblings('.oh-kanban__card-content').toggleClass('oh-kanban__card-content--hide')" class="oh-kanban__card-body-collapse oh-kanban__card-collapse--down" aria-label="Toggle Options" title="{% trans 'Assignees' %}"></button>
                                            <div class="oh-kanban__card-content oh-kanban__card-content--hide">
                                                <span class="oh-kanban__card-footer-text oh-text--light">
                                                    {{ticket.assigned_to.all|join:", "}}
                                                </span>
                                            </div>
                                        </div>
                                    {% endif %}
                                </div>
                                {% endif %} {% endfor %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            {% else %}
                <!-- start of empty page -->
                    <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;" >
                        <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 %}
        </div>
    </div>
{% else %}
    <div
        style="
            height: 70vh;
            display: flex;
            align-items: center;
            justify-content: center;
        "
        class=""
    >
        <div style="" class="oh-404">
            <img
                style="display: block; width: 150px; height: 150px; margin: 10px auto"
                src="{% static 'images/ui/ticket.png' %}"
                class="mb-4"
                alt=""
            />
            <h3 style="font-size: 20px" class="oh-404__subtitle">
                {% trans "There are no tickets at the moment." %}
            </h3>
        </div>
    </div>
{% endif %}

<script src = "{% static 'tickets/tickets.js' %}"></script>
<script>
    var activeTab = localStorage.getItem("activeTabTicket");
    if (activeTab != null) {
        var tab = $(`[data-target="${activeTab}"]`);
        var tabContent = $(activeTab);
        $(tab).attr("class", "oh-tabs__tab oh-tabs__tab--active");
        $(tabContent).attr(
            "class",
            "oh-tabs__content oh-tabs__content--active"
        );
    } else {
        $('[data-target="#tab_1"]').attr(
            "class",
            "oh-tabs__tab oh-tabs__tab--active"
        );
        $("#tab_1").attr("class", "oh-tabs__content oh-tabs__content--active");
    }
    $(".oh-tabs__tab").click(function (e) {
        var activeTab = $(this).attr("data-target");
        localStorage.setItem("activeTabTicket", activeTab);
    });

</script>
