{% extends 'django_spire/glue/scroll/scroll.html' %}

{% block scroll_queryset_order_by_field %}description{% endblock %}
{% block scroll_queryset_unique_name %}tickets{% endblock %}
{% block scroll_queryset_filter_field %}description{% endblock %}

{% block scroll_header %}
    <div class="row">
        <div class="col-6">
            <input class="form-control" placeholder="Search Tickets ..." type="search" x-model.debounce="searchQuery">
        </div>
        <div class="col">
            <select class="form-select form-select-sm" x-model="orderBy">
                <option value="description">Description</option>
                <option value="purpose">Purpose</option>
                <option value="priority">Priority</option>
                <option value="status">Status</option>
            </select>
        </div>
{#        <div class="col">#}
{#                        <button class="btn btn-outline-success-secondary form-control" @click="toggleOrder()">Sort by Name</button>#}
{#        </div>#}
    </div>

    <div class="row py-2">
        <div class="col-5 fw-bold">
            Description
        </div>
        <div class="col-1 fw-bold">
            Created By
        </div>
        <div class="col-1 fw-bold">
            Created At
        </div>
        <div class="col-1 fw-bold">
            Purpose
        </div>
        <div class="col-1 fw-bold">
            Priority
        </div>
        <div class="col-1 fw-bold">
            Status
        </div>
        <div class="col-2 fw-bold text-end">
            Actions
        </div>
    </div>
{% endblock %}

{% block scroll_template_item %}
    <div class="row border-bottom py-2">
        <div class="col-5">
            <a :href="`{% url 'django_spire:help_desk:page:detail' pk=0 %}`.replace('0', item.id)">
                <span x-text="item.description"></span>
            </a>
        </div>
        <div class="col-1">
            <span x-text="item.created_by.username"></span>
        </div>
        <div class="col-1">
            <span x-text="item.created_datetime"></span>
        </div>
        <div class="col-1">
            <div class="dropdown">
                <button class="btn btn-sm dropdown-toggle text-white badge border-0"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        :class="
                            item.purpose === 'app' ? 'bg-success' :
                            item.purpose === 'comp' ? 'bg-primary' :
                            'bg-primary'
                        "
                        x-text="{app: 'App', comp: 'Company'}[item.purpose]"
                >
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#" @click.prevent="item.purpose = 'app'; item.save()">App</a>
                    </li>
                    <li><a class="dropdown-item" href="#"
                           @click.prevent="item.purpose = 'comp'; item.save()">Company</a></li>
                </ul>
            </div>
        </div>
        <div class="col-1">
            <div class="dropdown">
                <button class="btn btn-sm dropdown-toggle text-white badge border-0"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        :class="
                            item.priority === 'low' ? 'bg-secondary' :
                            item.priority === 'med' ? 'bg-primary' :
                            item.priority === 'high' ? 'bg-warning' :
                            item.priority === 'urge' ? 'bg-danger' :
                            'bg-primary'
                        "
                        x-text="{low: 'Low', med: 'Medium', high: 'High', urge: 'Urgent'}[item.priority]"
                >
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#" @click.prevent="item.priority = 'low'; item.save()">Low</a>
                    </li>
                    <li><a class="dropdown-item" href="#" @click.prevent="item.priority = 'med'; item.save()">Medium</a>
                    </li>
                    <li><a class="dropdown-item" href="#" @click.prevent="item.priority = 'high'; item.save()">High</a>
                    </li>
                    <li><a class="dropdown-item" href="#"
                           @click.prevent="item.priority = 'urge'; item.save()">Urgent</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-1">
            <div class="dropdown">
                <button class="btn btn-sm dropdown-toggle text-white badge border-0"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        :class="
                            item.status === 'read' ? 'bg-secondary' :
                            item.status === 'prog' ? 'bg-primary' :
                            item.status === 'done' ? 'bg-success' :
                            'bg-primary'
                        "
                        x-text="{read: 'Ready', prog: 'In Progress', done: 'Done'}[item.status]"
                >
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#" @click.prevent="item.status = 'read'; item.save()">Ready</a>
                    </li>
                    <li><a class="dropdown-item" href="#" @click.prevent="item.status = 'prog'; item.save()">In
                        Progress</a></li>
                    <li><a class="dropdown-item" href="#" @click.prevent="item.status = 'done'; item.save()">Done</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-2 text-end">
            <button class="btn btn-sm btn-outline-success" @click="item.complete()" x-show="item.status !== 'done'">
                <i class="bi bi-check-lg"></i>
            </button>
            <a class="btn btn-sm btn-outline-secondary"
               :href="`{% url 'django_spire:help_desk:form:form' pk=0 %}`.replace('0', item.id)">
                <i class="bi bi-pencil"></i>
            </a>
            <a class="btn btn-sm btn-outline-danger"
               :href="`{% url 'django_spire:help_desk:form:delete' pk=0 %}`.replace('0', item.id)">
                <i class="bi bi-trash"></i>
            </a>
        </div>
    </div>
{% endblock %}