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

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

<div class="row row-cols-2 g-4">
    {# Header #}
    <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: {{ queueData.name }}
        </h1>
        <div class="btn-toolbar mb-2 mb-md-0 d-flex gap-2">
            <a class="btn btn-outline-primary" @click="">
                <i class="me-2 ti ti-printer"></i>Print Next
            </a>
            <a class="btn btn-outline-primary" @click="">
                <i class="me-2 ti ti-printer"></i>Print All
            </a>
        </div>
    </div>
    <div class="col-4">
        {# Settings #}
        <div class="card shadow w-100 mb-4">
            <div class="card-header py-3">
                <p class="text-primary m-0 fw-bold">Settings</p>
            </div>
            <div class="card-body">
                <div class="d-flex flex-column gap-3">
                    <div class="col-12">
                        <label for="selectTemplate" class="form-label">Template</label>
                        <select class="form-select" id="selectTemplate" v-model="CurrentTemplate">
                            <option v-for="template in templates" :value="template.id">{% raw %}{{ template.name }}{% endraw %}</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <label for="selectPrinter" class="form-label">Printer</label>
                        <select class="form-select" id="selectPrinter" v-model="queueData.printerId">
                            <option v-for="printer in printers" :value="printer.id">{% raw %}{{ printer.name }}{% endraw %}</option>
                        </select>
                    </div>
                    <div class="col-12 mt-1">
                        <a :class="['w-100', 'btn', Settings.AutoPrint ? 'btn-outline-success' : 'btn-outline-danger']" @click="ToggleAutoPrint()">
                            <i :class="['ti', 'me-2', Settings.AutoPrint ? 'ti-check' : 'ti-x']"></i>Auto. Print
                        </a>
                    </div>
                </div>
            </div>
        </div>
        {# Input #}
        <div class="card shadow w-100 mt-4">
            <div class="card-header py-3">
                <p class="text-primary m-0 fw-bold">Input</p>
            </div>
            <div class="card-body px-2 py-3 d-flex flex-column" style="gap: 1rem">
                <div class="col-12 px-2" v-for="FieldName in Object.keys(LabelData)">
                    <label for="printerDPIInput" class="form-label">{% raw %}{{ FieldName }}{% endraw %}</label>
                    <input type="text" class="form-control label-input" :placeholder="FieldName" v-model="LabelData[FieldName]" @keyup.enter="ContinueFieldInput()">
                </div>
                <div class="col-12 px-2 d-flex" style="gap: 1rem">
                    <a class="btn btn-outline-primary">
                        <i class="me-2 ti ti-device-floppy"></i>Save
                    </a>
                </div>
            </div>
        </div>
    </div>
    {# Label Queue #}
    <div class="col-8">
        <div class="row row-cols-1 row-cols-md-2 g-4">
            <div class="col" v-for="Label, LabelIndex in LabelQueue">
                <div class="col card border-primary shadow">
                    <div class="card-body px-0">
                        <table class="table my-0" id="dataTable">
                            <thead>
                                <tr>
                                    <th class="ps-4">Variable</th>
                                    <th class="ps-0">Wert</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr v-for="Field in Object.entries(Label.Fields)">
                                    <td class="ps-4 py-2">{% raw %}{{ Field[0] }}{% endraw %}</td>
                                    <td class="ps-0 py-2">{% raw %}{{ Field[1] }}{% endraw %}</td>
                                </tr>
                            </tfoot>
                        </table>
                        <div class="d-flex pt-3 px-4" style="gap: 0.6rem">
                            <a class="btn btn-outline-primary">
                                <i class="ti ti-printer me-2"></i>Print
                            </a>
                            <a class="btn btn-outline-danger" @click="DeleteLabel(LabelIndex)">
                                <i class="ti ti-trash me-2"></i>Delete
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<script type="text/javascript">

var queueData = {{ queueData | dump }}
var printers = {{ printers | dump }}
var templates = {{ templates | dump }}

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