{% extends "./master.njk" %}

{% block content %}
<div class="container">

<div class="row row-cols-2 g-4">
    <div class="col-12 d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-4 mb-3 border-bottom">
        <h1 class="h2 m-0">
            <i class="ti ti-stack-2 me-5"></i>Queue Settings
        </h1>
        <div class="btn-toolbar mb-2 mb-md-0">
            <a class="btn btn-outline-primary" @click="CreateQueue()">
                <i class="me-2 ti ti-playlist-add"></i>Add Queue
            </a>
        </div>
    </div>
    {# Queue List #}
    <div class="col-12">
        <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4">
            <div class="col" v-for="queueData, queueIndex in queueList">
                <div class="col card border-primary shadow">
                    <div class="card-header py-3">
                        <p class="text-primary m-0 fw-bold">{% raw %}{{ queueData.name }}{% endraw %}</p>
                    </div>
                    <div class="card-body">
                        <table class="table table-middle table-borderless my-0">
                            <tbody>
                                <tr>
                                    <td class="py-2 col-4">
                                        <i class="ti ti-printer me-2"></i>Printer:
                                    </td>
                                    <td class="py-2">{% raw %}{{ GetPrinterById(queueData.printerId) }}{% endraw %}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="card-footer text-body-secondary">
                        <div class="d-flex justify-content-end" style="gap: 0.6rem">
                            <a class="btn btn-outline-primary" @click="EditQueue(queueData.id)">
                                <i class="ti ti-list-details me-2"></i>Edit
                            </a>
                            <a class="btn btn-outline-danger" @click="DeleteQueue(queueData.id)">
                                <i class="ti ti-trash me-2"></i>Delete
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

{# queue Settings Modal #}
<div class="modal fade" id="QueueSettingsModal" tabindex="-1" data-bs-backdrop="static" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="labelModalLabel" v-if="queueEditor.uid == null">Create queue</h1>
                <h1 class="modal-title fs-5" id="labelModalLabel" v-if="queueEditor.uid != null">Queue {% raw %}{{ queueEditor.id }}{% endraw %}</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body mx-2">
                <div class="mb-3">
                    <label for="queueNameInput" class="form-label">Queue Name</label>
                    <input type="text" class="form-control" id="queueNameInput" placeholder="Useful queue 1" v-model="queueEditor.name">
                </div>
                <div class="mb-3">
                    <label for="queuePrinterInput" class="form-label">Queue Printer</label>
                    <select class="form-select" id="queuePrinterInput" v-model="queueEditor.printerId">
                        <option value="null">- Kein Drucker -</option>
                        <option :value="printer.id" v-for="printer in printerList">{% raw %}{{ printer.name }}{% endraw %}</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <a class="btn btn-outline-primary" @click="SaveQueue()" title="Save Queue">
                    <i class="me-2 ti ti-device-floppy"></i>Save
                </a>
            </div>
        </div>
    </div>
</div>

{# queue delete Confirmation Modal #}
<div class="modal fade" id="QueueDeleteModal" data-bs-backdrop="static" aria-hidden="true" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body mx-2 d-flex flex-column" style="gap: 1rem">
                <h5 class="mb-0">Delete Queue</h5>
                <p class="mb-0">Are you sure you want to delete queue {% raw %}{{ queueEditor.name }}{% endraw %}?</p>
            </div>
            <div class="modal-footer flex-nowrap p-0">
                <a class="btn btn-lg btn-link fs-6 text-decoration-none col-6 m-0 rounded-0 border-end" @click="DeleteQueue(queueEditor.id, true)">
                    <strong>Delete</strong>
                </a>
                <a class="btn btn-lg btn-link fs-6 text-decoration-none col-6 m-0 rounded-0" data-bs-dismiss="modal">
                    Cancel
                </a>
            </div>
        </div>
    </div>
</div>

<script src="/api.js"></script>
<script src="/app.queues.js"></script>
{% endblock %}