{% load horillafilters %}
{% load basefilters %}
{% load static %}
{% load mathfilters %}
{% load i18n %} {% include 'filter_tags.html' %}
<!-- start of contents -->
<div class="oh-tabs__contents" id="view-container">
    <div class="oh-tabs__content oh-tabs__content--active" id="tab_1">
        {% if my_tickets %}
            <div class="oh-card">
                {% for my_ticket_list in my_tickets %}
                    <div class="oh-accordion-meta">
                        <div class="oh-accordion-meta__item">
                            <div class="oh-accordion-meta__header" onclick='$(this).toggleClass("oh-accordion-meta__header--show");'>
                                <span class="oh-accordion-meta__title pt-3 pb-3">
                                    <div class="oh-tabs__input-badge-container">
                                        <span
                                            class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round mr-1"
                                        >
                                            {{my_ticket_list.list.paginator.count}}
                                        </span>
                                            {{my_ticket_list.grouper}}
                                    </div>
                                </span>
                            </div>
                            <!-- start of sticky table -->
                            <div class="oh-accordion-meta__body d-none">
                                <div class="oh-sticky-table">
                                    <div class="oh-sticky-table__table">
                                        <div class="oh-sticky-table__thead">
                                            <div class="oh-sticky-table__tr">
                                                <div class="oh-sticky-table__th" style="width: 10px">
                                                    <div class="centered-div">
                                                        <input
                                                        type="checkbox"
                                                        title='{% trans "Select All" %}'
                                                        class="oh-input oh-input__checkbox myTicketsAll"
                                                        onchange="$(this).closest('.oh-sticky-table').find('.my-tickets-row').prop('checked',$(this).is(':checked')).change();addingTicketsIds()"
                                                        />
                                                    </div>
                                                </div>
							                    <div class="oh-sticky-table__th">{% trans "Ticket Id" %}</div>
                                                <div class="oh-sticky-table__th">{% trans "Title" %}</div>
                                                <div class="oh-sticky-table__th">{% trans "Owner" %}</div>
                                                <div class="oh-sticky-table__th">{% trans "Type" %}</div>
                                                <div class="oh-sticky-table__th">{% trans "Forward to" %}</div>
                                                <div class="oh-sticky-table__th">{% trans "Assigned to" %}</div>
                                                <div class="oh-sticky-table__th">{% trans "Status" %}</div>
							                    <div class="oh-sticky-table__th">{% trans "Priority" %}</div>
                                                <div class="oh-sticky-table__th">{% trans "Tags" %}</div>
                                                <div class="oh-sticky-table__th">{% trans "Actions" %}</div>
                                            </div>
                                        </div>
                                        <div class="oh-sticky-table__tbody">
                                            {% for ticket in my_ticket_list.list %}
                                                <div class="oh-sticky-table__tr" onclick="window.location.href = `{% url 'ticket-detail' ticket.id %}`">
                                                    <div class="oh-sticky-table__sd
                                                        {% if ticket.priority == 'high' %}row-status--red
                                                        {% elif ticket.priority == 'medium' %}row-status--orange
                                                        {% elif ticket.priority == 'low' %}row-status--blue{% endif %}"
									                    onclick="event.stopPropagation()"

                                                    >
                                                        <div class="centered-div">
                                                            <input
                                                            type="checkbox"
                                                            id="{{ticket.id}}"
                                                            onchange="highlightRow($(this));
                                                                    if (!$(this).is(':checked')) {
                                                                        $(this).closest('.oh-sticky-table').find('.myTicketsAll').prop('checked',false)
                                                                    };addingTicketsIds()"
                                                            class="oh-input holiday-checkbox oh-input__checkbox my-tickets-row"
                                                            />
                                                        </div>
                                                    </div>
                                                    <div class="oh-sticky-table__td">
                                                        <span class='d-flex justify-content-between align-items-center'
                                                        >
                                                            {{ticket.ticket_type.prefix}}{{ ticket.id|stringformat:"03d" }}
                                                            <span 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>
                                                        </span>
                                                    </div>
                                                    <div class="oh-sticky-table__td">{{ticket.title}}</div>
                                                    <div class="oh-sticky-table__td">{{ticket.employee_id}}</div>
                                                    <div class="oh-sticky-table__td">{{ticket.ticket_type}}</div>
                                                    <div class="oh-sticky-table__td">{{ticket.get_raised_on}}</div>
                                                    <div class="oh-sticky-table__td">{{ticket.assigned_to.all|join:" , "}}</div>
                                                    <div class="oh-sticky-table__td">{{ticket.get_status_display}}</div>
                                                    <div class="oh-sticky-table__td">
                                                        {% 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>
                                                    <div class="oh-sticky-table__td">{{ticket.tags.all|join:" , "}}</div>
                                                    <div class="oh-sticky-table__td" onclick="event.stopPropagation()">
                                                        <div class="oh-btn-group">
                                                            <a
                                                                href="{% url 'ticket-detail' ticket.id %}"
                                                                type="button" title="{% trans 'View' %}"
                                                                class="oh-btn oh-btn--light-bkg w-50"
                                                            >
                                                                <ion-icon name="eye-outline"></ion-icon>
                                                            </a>
                                                            <button
                                                                class="oh-btn oh-btn--light-bkg w-50"
                                                                title="{% trans 'Edit' %}"
                                                                data-toggle="oh-modal-toggle"
                                                                data-target="#objectCreateModal"
                                                                hx-get="{% url 'ticket-update' ticket.id %}"
                                                                hx-target="#objectCreateModalTarget"
                                                            >
                                                                <ion-icon name="create-outline"></ion-icon>
                                                            </button>
                                                            <form
                                                                action="{% url 'ticket-delete' ticket.id %}"
                                                                class="w-50"
                                                                onsubmit="return confirm('{% trans 'Are you sure you want to delete	this Ticket?' %}');"
                                                                method='post' onclick="event.stopPropagation()" >
                                                                {% csrf_token %}
                                                                <button
                                                                    type="submit"
                                                                    class="oh-btn oh-btn--light-bkg w-100"
                                                                    title="{% trans 'Delete' %}"
                                                                >
                                                                    <ion-icon
                                                                        class="me-1 md hydrated"
                                                                        name="trash-outline"
                                                                        role="img"
                                                                        aria-label="trash outline"
                                                                    ></ion-icon>
                                                                </button>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>

                                <div class="oh-pagination">
                                    <span class="oh-pagination__page">
                                        {% trans "Page" %} {{ my_ticket_list.list.number }}
                                        {%trans "of" %} {{my_ticket_list.list.paginator.num_pages }}.
                                    </span>
                                    <nav class="oh-pagination__nav">
                                        <div class="oh-pagination__input-container me-3">
                                            <span class="oh-pagination__label me-1"
                                                >{% trans "Page" %}</span
                                            >
                                            <input
                                                type="number"
                                                name="{{my_ticket_list.dynamic_name}}"
                                                class="oh-pagination__input"
                                                value="{{my_ticket_list.list.number}}"
                                                hx-get="{% url 'ticket-filter' %}?{{pd}}"
                                                hx-target="#view-container"
                                                min="1"
                                            />
                                            <span class="oh-pagination__label"
                                                >{% trans "of" %}
                                                {{my_ticket_list.list.paginator.num_pages}}</span
                                            >
                                        </div>
                                        <ul class="oh-pagination__items">
                                            {% if my_ticket_list.list.has_previous %}
                                            <li
                                                class="oh-pagination__item oh-pagination__item--wide"
                                            >
                                                <a
                                                    hx-target="#view-container"
                                                    hx-get="{% url 'ticket-filter' %}?{{pd}}&{{my_ticket_list.dynamic_name}}=1"
                                                    class="oh-pagination__link"
                                                    >{% trans "First" %}</a
                                                >
                                            </li>
                                            <li
                                                class="oh-pagination__item oh-pagination__item--wide"
                                            >
                                                <a
                                                    hx-target="#view-container"
                                                    hx-get="{% url 'ticket-filter' %}?{{pd}}&{{my_ticket_list.dynamic_name}}={{ my_ticket_list.list.previous_page_number }}"
                                                    class="oh-pagination__link"
                                                    >{% trans "Previous" %}</a
                                                >
                                            </li>
                                            {% endif %} {% if my_ticket_list.list.has_next %}
                                            <li
                                                class="oh-pagination__item oh-pagination__item--wide"
                                            >
                                                <a
                                                    hx-target="#view-container"
                                                    hx-get="{% url 'ticket-filter' %}?{{pd}}&{{my_ticket_list.dynamic_name}}={{ my_ticket_list.list.next_page_number }}"
                                                    class="oh-pagination__link"
                                                    >{% trans "Next" %}</a
                                                >
                                            </li>
                                            <li
                                                class="oh-pagination__item oh-pagination__item--wide"
                                            >
                                                <a
                                                    hx-target="#view-container"
                                                    hx-get="{% url 'ticket-filter' %}?{{pd}}&{{my_ticket_list.dynamic_name}}={{ my_ticket_list.list.paginator.num_pages }}"
                                                    class="oh-pagination__link"
                                                    >{% trans "Last" %}</a
                                                >
                                            </li>
                                            {% endif %}
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>

            <div class="oh-pagination">
                <span
                  class="oh-pagination__page"
                  data-toggle="modal"
                  data-target="#addEmployeeModal"
                ></span>
                <nav class="oh-pagination__nav">
                    <div class="oh-pagination__input-container me-3">
                        <span class="oh-pagination__label me-1">{% trans "Page" %}</span>
                        <input
                        type="number"
                        name="page"
                        class="oh-pagination__input"
                        value="{{my_tickets.number }}"
                        min="1"
                        hx-get="{% url 'ticket-filter' %}?{{pd}}"
                        hx-target="#view-container"
                        />
                        <span class="oh-pagination__label"
                        >{% trans "of" %} {{ my_tickets.paginator.num_pages }}</span
                        >
                    </div>
                    <ul class="oh-pagination__items">
                        {% if my_tickets.has_previous %}
                        <li class="oh-pagination__item oh-pagination__item--wide">
                            <a
                                hx-get="{% url 'ticket-filter' %}?{{pd}}&my_page=1"
                                class="oh-pagination__link"
                                hx-target="#view-container"
                                >{% trans "First" %}</a
                            >
                        </li>
                        <li class="oh-pagination__item oh-pagination__item--wide">
                            <a
                                hx-get="{% url 'ticket-filter' %}?{{pd}}&my_page={{ my_tickets.previous_page_number }}"
                                class="oh-pagination__link"
                                hx-target="#view-container"
                                >{% trans "Previous" %}</a
                            >
                        </li>
                        {%endif %} {% if my_tickets.has_next %}
                        <li class="oh-pagination__item oh-pagination__item--wide">
                            <a
                                hx-get="{% url 'ticket-filter' %}?{{pd}}&my_page={{ my_tickets.next_page_number }}"
                                class="btn btn-outline-secondary"
                                hx-target="#view-container"
                                >{% trans "Next" %}</a
                            >
                        </li>
                        <li class="oh-pagination__item oh-pagination__item--wide">
                            <a
                                hx-get="{% url 'ticket-filter' %}?{{pd}}&my_page={{ my_tickets.paginator.num_pages }}"
                                hx-target="#view-container"
                                class="oh-pagination__link"
                                >{% trans "Last" %}</a
                            >
                        </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
        {% else %}
            <!-- start of empty page-->
            <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/ticket.png' %}" class="" alt="Page not found. 404." />
				<h5 class="oh-404__subtitle">{% trans "There are no tickets at the moment." %}</h5>
			</div>
            <!-- end of empty page-->
        {% endif %}
    </div>

    <div class="oh-tabs__content" id="tab_2">
        {% if allocated_tickets %}
            <div class="oh-card">
                {% for allocated_tickets_list in allocated_tickets %}
                    <div class="oh-accordion-meta">
                        <div class="oh-accordion-meta__item">
                            <div class="oh-accordion-meta__header" onclick='$(this).toggleClass("oh-accordion-meta__header--show");'>
                                <span class="oh-accordion-meta__title pt-3 pb-3">
                                    <div class="oh-tabs__input-badge-container">
                                        <span
                                            class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round mr-1"
                                        >
                                            {{allocated_tickets_list.list.paginator.count}}
                                        </span>
                                            {{allocated_tickets_list.grouper}}
                                    </div>
                                </span>
                            </div>
                            <div class="oh-accordion-meta__body d-none">
                                <!-- start of sticky table -->
                                <div class="oh-sticky-table">
                                    <div class="oh-sticky-table__table">
                                        <div class="oh-sticky-table__thead">
                                            <div class="oh-sticky-table__tr">
                                                <div class="oh-sticky-table__th" style="width: 10px">
                                                    <div class="centered-div">
                                                        <input
                                                        type="checkbox"
                                                        title='{% trans "Select All" %}'
                                                        class="oh-input oh-input__checkbox allocatedTicketsAll"
                                                        onchange="$(this).closest('.oh-sticky-table').find('.allocated-tickets-row').prop('checked',$(this).is(':checked')).change();addingTicketsIds()"
                                                        />
                                                    </div>
                                                </div>
							                    <div class="oh-sticky-table__th">{% trans "Ticket Id" %}</div>
                                                <div class="oh-sticky-table__th">{% trans "Title" %}</div>
                                                <div class="oh-sticky-table__th">{% trans "Owner" %}</div>
                                                <div class="oh-sticky-table__th">{% trans "Type" %}</div>
                                                <div class="oh-sticky-table__th">{% trans "Forward to" %}</div>
                                                <div class="oh-sticky-table__th">{% trans "Assigned to" %}</div>
                                                <div class="oh-sticky-table__th">{% trans "Status" %}</div>
							                    <div class="oh-sticky-table__th">{% trans "Priority" %}</div>
                                                <div class="oh-sticky-table__th">{% trans "Tags" %}</div>
                                                <div class="oh-sticky-table__th">{% trans "Actions" %}</div>
                                            </div>
                                        </div>
                                        <div class="oh-sticky-table__tbody">
                                            {% for ticket in allocated_tickets_list.list %}
                                                <div class="oh-sticky-table__tr" onclick="window.location.href = `{% url 'ticket-detail' ticket.id %}`">
                                                    <div class="oh-sticky-table__sd
                                                        {% if ticket.priority == 'high' %}row-status--red
                                                        {% elif ticket.priority == 'medium' %}row-status--orange
                                                        {% elif ticket.priority == 'low' %}row-status--blue{% endif %}"
                                                        onclick="event.stopPropagation()"
                                                    >
                                                        <div class="centered-div">
                                                            <input
                                                            type="checkbox"
                                                            id="{{ticket.id}}"
                                                            onchange="highlightRow($(this));
                                                                    if (!$(this).is(':checked')) {
                                                                        $(this).closest('.oh-sticky-table').find('.allocatedTicketsAll').prop('checked',false)
                                                                    };addingTicketsIds()"
                                                            class="oh-input holiday-checkbox oh-input__checkbox allocated-tickets-row"
                                                            />
                                                        </div>
                                                    </div>
                                                    <div class="oh-sticky-table__td">
                                                        <span class='d-flex justify-content-between align-items-center'
                                                        >
                                                            {{ticket.ticket_type.prefix}}{{ ticket.id|stringformat:"03d" }}
                                                            <span 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>
                                                        </span>
                                                    </div>
                                                    <div class="oh-sticky-table__td">{{ticket.title}}</div>
                                                    <div class="oh-sticky-table__td">{{ticket.employee_id}}</div>
                                                    <div class="oh-sticky-table__td">{{ticket.ticket_type}}</div>
                                                    <div class="oh-sticky-table__td">{{ticket.get_raised_on}}</div>
                                                    <div class="oh-sticky-table__td">{{ticket.assigned_to.all|join:" , "}}</div>
                                                    <div class="oh-sticky-table__td">{{ticket.get_status_display}}</div>
                                                    <div class="oh-sticky-table__td">
                                                        {% 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>
                                                    <div class="oh-sticky-table__td">{{ticket.tags.all|join:" , "}}</div>
                                                    <div class="oh-sticky-table__td" onclick="event.stopPropagation()">
                                                        <div class="oh-btn-group">
                                                            <a
                                                                href="{% url 'ticket-detail' ticket.id %}"
                                                                type="button" title="{% trans 'View' %}"
                                                                class="oh-btn oh-btn--light-bkg w-50"
                                                            >
                                                                <ion-icon name="eye-outline"></ion-icon>
                                                            </a>
                                                            <button
                                                                class="oh-btn oh-btn--light-bkg w-50"
                                                                title="{% trans 'Edit' %}"
                                                                data-toggle="oh-modal-toggle"
                                                                data-target="#objectCreateModal"
                                                                hx-get="{% url 'ticket-update' ticket.id %}"
                                                                hx-target="#objectCreateModalTarget"
                                                            >
                                                                <ion-icon name="create-outline"></ion-icon>
                                                            </button>
                                                            <form
                                                                action="{% url 'ticket-delete' ticket.id %}"
                                                                class="w-50"
                                                                onsubmit="return confirm('{% trans 'Are you sure you want to delete	this Ticket?' %}');"
                                                                method='post' onclick="event.stopPropagation()" >
                                                                {% csrf_token %}
                                                                <button
                                                                    type="submit"
                                                                    class="oh-btn oh-btn--light-bkg w-100"
                                                                    title="{% trans 'Delete' %}"
                                                                >
                                                                    <ion-icon
                                                                        class="me-1 md hydrated"
                                                                        name="trash-outline"
                                                                        role="img"
                                                                        aria-label="trash outline"
                                                                    ></ion-icon>
                                                                </button>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                                <!-- end of sticky table -->

                                <div class="oh-pagination">
                                    <span class="oh-pagination__page">
                                        {% trans "Page" %} {{ allocated_tickets_list.list.number }}
                                        {%trans "of" %} {{allocated_tickets_list.list.paginator.num_pages }}.
                                    </span>
                                    <nav class="oh-pagination__nav">
                                        <div class="oh-pagination__input-container me-3">
                                            <span class="oh-pagination__label me-1"
                                                >{% trans "Page" %}</span
                                            >
                                            <input
                                                type="number"
                                                name="{{allocated_tickets_list.dynamic_name}}"
                                                class="oh-pagination__input"
                                                value="{{allocated_tickets_list.list.number}}"
                                                hx-get="{% url 'ticket-filter' %}?{{pd}}"
                                                hx-target="#view-container"
                                                min="1"
                                            />
                                            <span class="oh-pagination__label"
                                                >{% trans "of" %}
                                                {{allocated_tickets_list.list.paginator.num_pages}}</span
                                            >
                                        </div>
                                        <ul class="oh-pagination__items">
                                            {% if allocated_tickets_list.list.has_previous %}
                                            <li
                                                class="oh-pagination__item oh-pagination__item--wide"
                                            >
                                                <a
                                                    hx-target="#view-container"
                                                    hx-get="{% url 'ticket-filter' %}?{{pd}}&{{allocated_tickets_list.dynamic_name}}=1"
                                                    class="oh-pagination__link"
                                                    >{% trans "First" %}</a
                                                >
                                            </li>
                                            <li
                                                class="oh-pagination__item oh-pagination__item--wide"
                                            >
                                                <a
                                                    hx-target="#view-container"
                                                    hx-get="{% url 'ticket-filter' %}?{{pd}}&{{allocated_tickets_list.dynamic_name}}={{ allocated_tickets_list.list.previous_page_number }}"
                                                    class="oh-pagination__link"
                                                    >{% trans "Previous" %}</a
                                                >
                                            </li>
                                            {% endif %} {% if allocated_tickets_list.list.has_next %}
                                            <li
                                                class="oh-pagination__item oh-pagination__item--wide"
                                            >
                                                <a
                                                    hx-target="#view-container"
                                                    hx-get="{% url 'ticket-filter' %}?{{pd}}&{{allocated_tickets_list.dynamic_name}}={{ allocated_tickets_list.list.next_page_number }}"
                                                    class="oh-pagination__link"
                                                    >{% trans "Next" %}</a
                                                >
                                            </li>
                                            <li
                                                class="oh-pagination__item oh-pagination__item--wide"
                                            >
                                                <a
                                                    hx-target="#view-container"
                                                    hx-get="{% url 'ticket-filter' %}?{{pd}}&{{allocated_tickets_list.dynamic_name}}={{ allocated_tickets_list.list.paginator.num_pages }}"
                                                    class="oh-pagination__link"
                                                    >{% trans "Last" %}</a
                                                >
                                            </li>
                                            {% endif %}
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
            <div class="oh-pagination">
                <span
                  class="oh-pagination__page"
                  data-toggle="modal"
                  data-target="#addEmployeeModal"
                ></span>
                <nav class="oh-pagination__nav">
                    <div class="oh-pagination__input-container me-3">
                        <span class="oh-pagination__label me-1">{% trans "Page" %}</span>
                        <input
                        type="number"
                        name="page"
                        class="oh-pagination__input"
                        value="{{allocated_tickets.number }}"
                        min="1"
                        hx-get="{% url 'ticket-filter' %}?{{pd}}"
                        hx-target="#view-container"
                        />
                        <span class="oh-pagination__label"
                        >{% trans "of" %} {{ allocated_tickets.paginator.num_pages }}</span
                        >
                    </div>
                    <ul class="oh-pagination__items">
                        {% if allocated_tickets.has_previous %}
                        <li class="oh-pagination__item oh-pagination__item--wide">
                            <a
                                hx-get="{% url 'ticket-filter' %}?{{pd}}&allocated_page=1"
                                class="oh-pagination__link"
                                hx-target="#view-container"
                                >{% trans "First" %}</a
                            >
                        </li>
                        <li class="oh-pagination__item oh-pagination__item--wide">
                            <a
                                hx-get="{% url 'ticket-filter' %}?{{pd}}&allocated_page={{ allocated_tickets.previous_page_number }}"
                                class="oh-pagination__link"
                                hx-target="#view-container"
                                >{% trans "Previous" %}</a
                            >
                        </li>
                        {%endif %} {% if allocated_tickets.has_next %}
                        <li class="oh-pagination__item oh-pagination__item--wide">
                            <a
                                hx-get="{% url 'ticket-filter' %}?{{pd}}&allocated_page={{ allocated_tickets.next_page_number }}"
                                class="btn btn-outline-secondary"
                                hx-target="#view-container"
                                >{% trans "Next" %}</a
                            >
                        </li>
                        <li class="oh-pagination__item oh-pagination__item--wide">
                            <a
                                hx-get="{% url 'ticket-filter' %}?{{pd}}&allocated_page={{ allocated_tickets.paginator.num_pages }}"
                                hx-target="#view-container"
                                class="oh-pagination__link"
                                >{% trans "Last" %}</a
                            >
                        </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
        {% else %}
            <!-- start of empty page-->
            <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/ticket.png' %}" class="" alt="Page not found. 404." />
				<h5 class="oh-404__subtitle">{% trans "There are no tickets at the moment." %}</h5>
			</div>
            <!-- end of empty page-->
        {% endif %}
    </div>
    <div class="oh-tabs__content" id="tab_3">
        {% if all_tickets %}
            <div class="oh-card">
                {% for all_tickets_list in all_tickets %}
                    <div class="oh-accordion-meta">
                        <div class="oh-accordion-meta__item">
                            <div class="oh-accordion-meta__header" onclick='$(this).toggleClass("oh-accordion-meta__header--show");'>
                                <span class="oh-accordion-meta__title pt-3 pb-3">
                                    <div class="oh-tabs__input-badge-container">
                                        <span
                                            class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round mr-1"
                                        >
                                            {{all_tickets_list.list.paginator.count}}
                                        </span>
                                            {{all_tickets_list.grouper}}
                                    </div>
                                </span>
                            </div>
                            <div class="oh-accordion-meta__body d-none">
                                <!-- start of sticky table -->
                                <div class="oh-sticky-table">
                                    <div class="oh-sticky-table__table">
                                        <div class="oh-sticky-table__thead">
                                            <div class="oh-sticky-table__tr">
                                                <div class="oh-sticky-table__th" style="width: 10px">
                                                    <div class="centered-div">
                                                        <input
                                                        type="checkbox"
                                                        title='{% trans "Select All" %}'
                                                        class="oh-input oh-input__checkbox allTicketsAll"
                                                        onchange="$(this).closest('.oh-sticky-table').find('.all-tickets-row').prop('checked',$(this).is(':checked')).change();addingTicketsIds()"
                                                        />
                                                    </div>
                                                </div>
							                    <div class="oh-sticky-table__th">{% trans "Ticket Id" %}</div>
                                                <div class="oh-sticky-table__th">{% trans "Title" %}</div>
                                                <div class="oh-sticky-table__th">{% trans "Owner" %}</div>
                                                <div class="oh-sticky-table__th">{% trans "Type" %}</div>
                                                <div class="oh-sticky-table__th">{% trans "Forward to" %}</div>
                                                <div class="oh-sticky-table__th">{% trans "Assigned to" %}</div>
                                                <div class="oh-sticky-table__th">{% trans "Status" %}</div>
							                    <div class="oh-sticky-table__th">{% trans "Priority" %}</div>
                                                <div class="oh-sticky-table__th">{% trans "Tags" %}</div>
                                                <div class="oh-sticky-table__th">{% trans "Actions" %}</div>
                                            </div>
                                        </div>
                                        <div class="oh-sticky-table__tbody">
                                            {% for ticket in all_tickets_list.list %}
                                                <div class="oh-sticky-table__tr" onclick="window.location.href = `{% url 'ticket-detail' ticket.id %}`" >
                                                    <div class="oh-sticky-table__sd
                                                        {% if ticket.priority == 'high' %}row-status--red
                                                        {% elif ticket.priority == 'medium' %}row-status--orange
                                                        {% elif ticket.priority == 'low' %}row-status--blue{% endif %}"
                                                        onclick="event.stopPropagation()"
                                                    >
                                                        <div class="centered-div">
                                                            <input
                                                            type="checkbox"
                                                            id="{{ticket.id}}"
                                                            onchange="highlightRow($(this));
                                                                    if (!$(this).is(':checked')) {
                                                                        $(this).closest('.oh-sticky-table').find('.allTicketsAll').prop('checked',false)
                                                                    };addingTicketsIds()"
                                                            class="oh-input holiday-checkbox oh-input__checkbox all-tickets-row"
                                                            />
                                                        </div>
                                                    </div>
                                                    <div class="oh-sticky-table__td">
                                                        <span class='d-flex justify-content-between align-items-center'
                                                        >
                                                            {{ticket.ticket_type.prefix}}{{ ticket.id|stringformat:"03d" }}
                                                            <span 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>
                                                        </span>
                                                    </div>
                                                    <div class="oh-sticky-table__td">{{ticket.title}}</div>
                                                    <div class="oh-sticky-table__td">{{ticket.employee_id}}</div>
                                                    <div class="oh-sticky-table__td">{{ticket.ticket_type}}</div>
                                                    <div class="oh-sticky-table__td">{{ticket.get_raised_on}}</div>
                                                    <div class="oh-sticky-table__td">{{ticket.assigned_to.all|join:" , "}}</div>
                                                    <div class="oh-sticky-table__td">{{ticket.get_status_display}}</div>
                                                    <div class="oh-sticky-table__td">
                                                        {% 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>
                                                    <div class="oh-sticky-table__td">{{ticket.tags.all|join:" , "}}</div>
                                                    <div class="oh-sticky-table__td" onclick="event.stopPropagation()">
                                                        <div class="oh-btn-group">
                                                            <a
                                                                href="{% url 'ticket-detail' ticket.id %}"
                                                                type="button" title="{% trans 'View' %}"
                                                                class="oh-btn oh-btn--light-bkg w-50"
                                                            >
                                                                <ion-icon name="eye-outline"></ion-icon>
                                                            </a>
                                                            <button
                                                                class="oh-btn oh-btn--light-bkg w-50"
                                                                title="{% trans 'Edit' %}"
                                                                data-toggle="oh-modal-toggle"
                                                                data-target="#objectCreateModal"
                                                                hx-get="{% url 'ticket-update' ticket.id %}"
                                                                hx-target="#objectCreateModalTarget"
                                                            >
                                                                <ion-icon name="create-outline"></ion-icon>
                                                            </button>
                                                            <form
                                                                action="{% url 'ticket-delete' ticket.id %}"
                                                                class="w-50"
                                                                onsubmit="return confirm('{% trans 'Are you sure you want to delete	this Ticket?' %}');"
                                                                method='post' onclick="event.stopPropagation()" >
                                                                {% csrf_token %}
                                                                <button
                                                                    type="submit"
                                                                    class="oh-btn oh-btn--light-bkg w-100"
                                                                    title="{% trans 'Delete' %}"
                                                                >
                                                                    <ion-icon
                                                                        class="me-1 md hydrated"
                                                                        name="trash-outline"
                                                                        role="img"
                                                                        aria-label="trash outline"
                                                                    ></ion-icon>
                                                                </button>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>

                                <div class="oh-pagination">
                                    <span class="oh-pagination__page">
                                        {% trans "Page" %} {{ all_tickets_list.list.number }}
                                        {%trans "of" %} {{all_tickets_list.list.paginator.num_pages }}.
                                    </span>
                                    <nav class="oh-pagination__nav">
                                        <div class="oh-pagination__input-container me-3">
                                            <span class="oh-pagination__label me-1"
                                                >{% trans "Page" %}</span
                                            >
                                            <input
                                                type="number"
                                                name="{{all_tickets_list.dynamic_name}}"
                                                class="oh-pagination__input"
                                                value="{{all_tickets_list.list.number}}"
                                                hx-get="{% url 'ticket-filter' %}?{{pd}}"
                                                hx-target="#view-container"
                                                min="1"
                                            />
                                            <span class="oh-pagination__label"
                                                >{% trans "of" %}
                                                {{all_tickets_list.list.paginator.num_pages}}</span
                                            >
                                        </div>
                                        <ul class="oh-pagination__items">
                                            {% if all_tickets_list.list.has_previous %}
                                            <li
                                                class="oh-pagination__item oh-pagination__item--wide"
                                            >
                                                <a
                                                    hx-target="#view-container"
                                                    hx-get="{% url 'ticket-filter' %}?{{pd}}&{{all_tickets_list.dynamic_name}}=1"
                                                    class="oh-pagination__link"
                                                    >{% trans "First" %}</a
                                                >
                                            </li>
                                            <li
                                                class="oh-pagination__item oh-pagination__item--wide"
                                            >
                                                <a
                                                    hx-target="#view-container"
                                                    hx-get="{% url 'ticket-filter' %}?{{pd}}&{{all_tickets_list.dynamic_name}}={{ all_tickets_list.list.previous_page_number }}"
                                                    class="oh-pagination__link"
                                                    >{% trans "Previous" %}</a
                                                >
                                            </li>
                                            {% endif %} {% if all_tickets_list.list.has_next %}
                                            <li
                                                class="oh-pagination__item oh-pagination__item--wide"
                                            >
                                                <a
                                                    hx-target="#view-container"
                                                    hx-get="{% url 'ticket-filter' %}?{{pd}}&{{all_tickets_list.dynamic_name}}={{ all_tickets_list.list.next_page_number }}"
                                                    class="oh-pagination__link"
                                                    >{% trans "Next" %}</a
                                                >
                                            </li>
                                            <li
                                                class="oh-pagination__item oh-pagination__item--wide"
                                            >
                                                <a
                                                    hx-target="#view-container"
                                                    hx-get="{% url 'ticket-filter' %}?{{pd}}&{{all_tickets_list.dynamic_name}}={{ all_tickets_list.list.paginator.num_pages }}"
                                                    class="oh-pagination__link"
                                                    >{% trans "Last" %}</a
                                                >
                                            </li>
                                            {% endif %}
                                        </ul>
                                    </nav>
                                </div>
                                <!-- end of sticky table -->

                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>

            <div class="oh-pagination">
                <span
                  class="oh-pagination__page"
                  data-toggle="modal"
                  data-target="#addEmployeeModal"
                ></span>
                <nav class="oh-pagination__nav">
                    <div class="oh-pagination__input-container me-3">
                        <span class="oh-pagination__label me-1">{% trans "Page" %}</span>
                        <input
                        type="number"
                        name="page"
                        class="oh-pagination__input"
                        value="{{all_tickets.number }}"
                        min="1"
                        hx-get="{% url 'ticket-filter' %}?{{pd}}"
                        hx-target="#view-container"
                        />
                        <span class="oh-pagination__label"
                        >{% trans "of" %} {{ all_tickets.paginator.num_pages }}</span
                        >
                    </div>
                    <ul class="oh-pagination__items">
                        {% if all_tickets.has_previous %}
                        <li class="oh-pagination__item oh-pagination__item--wide">
                            <a
                                hx-get="{% url 'ticket-filter' %}?{{pd}}&allocated_page=1"
                                class="oh-pagination__link"
                                hx-target="#view-container"
                                >{% trans "First" %}</a
                            >
                        </li>
                        <li class="oh-pagination__item oh-pagination__item--wide">
                            <a
                                hx-get="{% url 'ticket-filter' %}?{{pd}}&allocated_page={{ all_tickets.previous_page_number }}"
                                class="oh-pagination__link"
                                hx-target="#view-container"
                                >{% trans "Previous" %}</a
                            >
                        </li>
                        {%endif %} {% if all_tickets.has_next %}
                        <li class="oh-pagination__item oh-pagination__item--wide">
                            <a
                                hx-get="{% url 'ticket-filter' %}?{{pd}}&allocated_page={{ all_tickets.next_page_number }}"
                                class="btn btn-outline-secondary"
                                hx-target="#view-container"
                                >{% trans "Next" %}</a
                            >
                        </li>
                        <li class="oh-pagination__item oh-pagination__item--wide">
                            <a
                                hx-get="{% url 'ticket-filter' %}?{{pd}}&allocated_page={{ all_tickets.paginator.num_pages }}"
                                hx-target="#view-container"
                                class="oh-pagination__link"
                                >{% trans "Last" %}</a
                            >
                        </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
        {% else %}
            <!-- start of empty page-->
            <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/ticket.png' %}" class="" alt="Page not found. 404." />
				<h5 class="oh-404__subtitle">{% trans "There are no tickets at the moment." %}</h5>
			</div>
            <!-- end of empty page-->
        {% endif %}
    </div>
</div>

<script>
    // TO toggle class for select all button in All tickets tab
$(".allTicketsAll").change(function (e) {
    var is_checked = $(this).is(":checked");
    if (is_checked) {
      $(".all-tickets-row").prop("checked", true)
      .closest(".oh-sticky-table__tr")
      .addClass("highlight-selected");
    } else {
      $(".all-tickets-row").prop("checked", false)
      .closest(".oh-sticky-table__tr")
      .removeClass("highlight-selected");
    }
  });

  // TO toggle class for select all button in Allocated tickets tab
  $(".allocatedTicketsAll").change(function (e) {
    var is_checked = $(this).is(":checked");
    if (is_checked) {
      $(".allocated-tickets-row").prop("checked", true)
      .closest(".oh-sticky-table__tr")
      .addClass("highlight-selected");
    } else {
      $(".allocated-tickets-row").prop("checked", false)
      .closest(".oh-sticky-table__tr")
      .removeClass("highlight-selected");
    }
  });

  // TO toggle class for select all button in My tickets tab
    $(document).ready(function () {
        const activeTab = localStorage.getItem('activeTabTicket')
        if (activeTab!=null) {
            $(".oh-tabs__content--active").toggleClass('oh-tabs__content--active');
            $(".oh-tabs__tab--active").toggleClass('oh-tabs__tab--active');
            $(`[data-target="${activeTab}"]`).toggleClass("oh-tabs__tab--active");
            $(activeTab).toggleClass("oh-tabs__content--active");
        }
        $(".oh-tabs__tab[data-target]").click(function (e) {
            e.preventDefault();
            localStorage.setItem("activeTabTicket",$(this).attr('data-target'))
        });
        tickTicketsCheckboxes();
		$("#selectAllTickets").click(function () {
		  selectAllTickets();
		});
		$("#unselectAllTickets").click(function () {
		  unselectAllTickets();
		});
		{% comment %} $("#exportObjectives").click(function (e) {
		  exportObjectives();
		}); {% endcomment %}
    });
  </script>
