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

{% block content %}
{# Input Section #}
<script type="text/javascript">

var InitLabelData = {{ LabelData | dump }}

</script>
<div class="container">

<div class="row row-cols-2 g-4">
    <div class="col-4">
        {# Label Data #}
        <div class="card shadow w-100 mb-4">
            <div class="card-header py-3">
                <p class="text-primary m-0 fw-bold">Label Settings</p>
            </div>
            <div class="card-body px-3 py-3 d-flex flex-column" style="gap: 1rem">
                <div class="col-12">
                    <label class="form-label">Label Name</label>
                    <input type="text" class="form-control label-input" placeholder="Label Name" v-model="LabelEditor.name">
                </div>
                <div class="row">
                    <div class="col-6">
                        <label class="form-label">Label Width</label>
                        <div class="col-6 input-group">
                            <input type="text" class="form-control" placeholder="0" v-model="LabelEditor.size.width">
                            <a class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">mm</a>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li><a class="dropdown-item">mm</a></li>
                                <li><a class="dropdown-item">inch</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-6">
                        <label class="form-label">Label Height</label>
                        <div class="col-6 input-group">
                            <input type="text" class="form-control" placeholder="22" v-model="LabelEditor.size.height">
                            <a class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">mm</a>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li><a class="dropdown-item">mm</a></li>
                                <li><a class="dropdown-item">inch</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                {# <div class="row">
                    <div class="col-6">
                        <label class="form-label">Printer Resolution</label>
                        <div class="col-6 input-group">
                            <select class="form-select" v-model="LabelEditor.size.resolution">
                                <option value="203">203 dpi</option>
                                <option value="300">300 dpi</option>
                                <option value="600">600 dpi</option>
                            </select>
                        </div>
                    </div>
                </div> #}
                <div class="col-12 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>
        {# Variables #}
        <div class="card shadow w-100">
            <div class="card-header py-3">
                <p class="text-primary m-0 fw-bold">Variables</p>
            </div>
            <div class="card-body px-3 py-3">
                <div class="col-12">
                    <table class="table m-0">
                        <thead>
                            <tr>
                                <th class="col-auto px-1">Name</th>
                                <th class="col-auto px-1">Regex</th>
                                <th class="col-auto px-1">
                                    
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(Variable, VIndex) in LabelEditor.variables">
                                <td class="px-1 py-2">
                                    <input type="text" class="form-control" placeholder="Name" v-model="Variable.name">
                                </td>
                                <td class="px-1 py-2">
                                    <input type="text" class="form-control" placeholder="Name" v-model="Variable.regex">
                                </td>
                                <td class="px-1 py-2 d-flex justify-content-end" style="gap: 0.6rem;">
                                    <a class="btn btn-sm btn-outline-danger" @click="DeleteVariable(VIndex)" data-bs-toggle="tooltip" title="Delete Variable">
                                        <i class="ti ti-trash"></i>
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-12 mt-3 d-flex" style="gap: 1rem">
                    <a class="btn btn-outline-primary" @click="AddVariable">
                        <i class="me-2 ti ti-code-plus"></i>Add
                    </a>
                </div>
            </div>
        </div>
    </div>
    {# Label Queue #}
    <div class="col-8">
        {# <div class="row"> #}
            <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">Elements</h1>
                <div class="btn-toolbar mb-2 mb-md-0">
                    <div class="btn-group">
                        <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                            Add Element
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#" @click="AddElement('text')">Text</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#" @click="AddElement('box')">Box</a></li>
                            <li><a class="dropdown-item" href="#" @click="AddElement('ellipse')">Ellipse</a></li>
                            <li><a class="dropdown-item" href="#" @click="AddElement('line')">Line</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#" @click="AddElement('code39')">Code 39</a></li>
                            <li><a class="dropdown-item" href="#" @click="AddElement('code128')">Code 128</a></li>
                            <li><a class="dropdown-item" href="#" @click="AddElement('codeQR')">QRCode</a></li>
                        </ul>
                    </div>
                    {# <a class="btn btn-outline-primary" @click="CreateLabel()">
                        <i class="me-2 ti ti-playlist-add"></i>Add Label
                    </a> #}
                </div>
            </div>
            {# Element List #}
            <div class="col-12">
                <div class="row row-cols-1 row-cols-lg-2 g-4">
                    <div class="col" v-for="(Element, ElementIndex) in LabelEditor.elements">
                        <div class="col card border-primary shadow">
                            <div class="card-header px-3 py-3" v-if="Element.type == 'text'">
                                Text
                            </div>
                            <div class="card-header px-3 py-3" v-if="Element.type == 'box'">
                                Graphical Box
                            </div>
                            <div class="card-header px-3 py-3" v-if="Element.type == 'ellipse'">
                                Graphical Ellipse
                            </div>
                            <div class="card-header px-3 py-3" v-if="Element.type == 'code39'">
                                Code 39
                            </div>
                            <div class="card-header px-3 py-3" v-if="Element.type == 'code128'">
                                Code 128
                            </div>
                            <div class="card-body px-3 py-3">
                                <div class="row mb-3">
                                    <div class="col-6">
                                        <label class="form-label">Position X</label>
                                        <div class="col-6 input-group">
                                            <input type="text" class="form-control" placeholder="0" v-model="Element.originX">
                                            <span class="input-group-text">mm</span>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label">Position Y</label>
                                        <div class="col-6 input-group">
                                            <input type="text" class="form-control" placeholder="0" v-model="Element.originY">
                                            <span class="input-group-text">mm</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 mb-3">
                                    <label class="form-label">Alignment</label>
                                    <select class="form-select" v-model="Element.originAlign">
                                        <option value="0">Align Left</option>
                                        <option value="1">Align Right</option>
                                        <option value="2">Align Auto</option>
                                    </select>
                                </div>
                                {# Text #}
                                <div class="col-12 mb-3" v-if="Element.type == 'text'">
                                    <label class="form-label">Text Content</label>
                                    <input type="text" class="form-control label-input" v-model="Element.content">
                                </div>
                                <div class="col-12 mb-3" v-if="Element.type == 'text'">
                                    <label class="form-label">Font Type</label>
                                    <input type="text" class="form-control label-input" v-model="Element.fontType">
                                </div>
                                <div class="col-12 mb-3" v-if="Element.type == 'text'">
                                    <label class="form-label">Font Height</label>
                                    <input type="text" class="form-control label-input" v-model="Element.fontHeight">
                                </div>
                                {# Box #}
                                <div class="row mb-3" v-if="Element.type == 'box' || Element.type == 'ellipse'">
                                    <div class="col-6">
                                        <label class="form-label">Width</label>
                                        <div class="col-6 input-group">
                                            <input type="text" class="form-control" placeholder="0" v-model="Element.width">
                                            <span class="input-group-text">mm</span>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label">Height</label>
                                        <div class="col-6 input-group">
                                            <input type="text" class="form-control" placeholder="0" v-model="Element.height">
                                            <span class="input-group-text">mm</span>
                                        </div>
                                    </div>
                                </div>
                                {# Box #}
                                <div class="row mb-3" v-if="Element.type == 'box'">
                                    <div class="col-6">
                                        <label class="form-label">Border With</label>
                                        <div class="col-6 input-group">
                                            <input type="text" class="form-control" placeholder="0" v-model="Element.borderWidth">
                                            <span class="input-group-text">dots</span>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label">Boder Radius</label>
                                        <select class="form-select" v-model="Element.borderRadius">
                                            <option value="0">No Rounding</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">Heavy Rounding</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-12 mb-3" v-if="Element.type == 'box'">
                                    <label class="form-label">Border Color</label>
                                    <select class="form-select" v-model="Element.borderColor">
                                        <option value="B">Black</option>
                                        <option value="W">White</option>
                                    </select>
                                </div>
                                {# Ellipse #}
                                <div class="row mb-3" v-if="Element.type == 'ellipse'">
                                    <div class="col-6">
                                        <label class="form-label">Border With</label>
                                        <div class="col-6 input-group">
                                            <input type="text" class="form-control" placeholder="0" v-model="Element.borderWidth">
                                            <span class="input-group-text">dots</span>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label">Border Color</label>
                                        <select class="form-select" v-model="Element.borderColor">
                                            <option value="B">Black</option>
                                            <option value="W">White</option>
                                        </select>
                                    </div>
                                </div>
                                {# Code 39 & Code 128 #}
                                <div class="row mb-3" v-if="Element.type == 'code39' || Element.type == 'code128'">
                                    <div class="col-12">
                                        <label class="form-label">Content</label>
                                        <input type="text" class="form-control" placeholder="0" v-model="Element.content">
                                    </div>
                                </div>
                                <div class="row mb-3" v-if="Element.type == 'code39' || Element.type == 'code128'">
                                    <div class="col-6">
                                        <label class="form-label">Line Width</label>
                                        <div class="col-6 input-group">
                                            <input type="number" step="1" min="1" max="100" class="form-control" placeholder="0" v-model="Element.codeWidth">
                                            <span class="input-group-text">dots</span>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label">Width Ratio</label>
                                        <div class="col-6 input-group">
                                            <input type="number" step="0.1" min="2.0" max="3.0" class="form-control" placeholder="0" v-model="Element.widthRatio">
                                            <span class="input-group-text">x</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3" v-if="Element.type == 'code39' || Element.type == 'code128'">
                                    <div class="col-6">
                                        <label class="form-label">Code Height</label>
                                        <div class="col-6 input-group">
                                            <input type="number" step="1" min="1" max="10000" class="form-control" placeholder="0" v-model="Element.codeHeight">
                                            <span class="input-group-text">dots</span>
                                        </div>
                                    </div>
                                </div>
                                {# Actions #}
                                <div class="col-12 d-flex" style="gap: 0.6rem">
                                    <a class="btn btn-outline-danger" @click="DeleteElement(ElementIndex)">
                                        <i class="ti ti-trash me-2"></i>Delete
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {# <div class="card shadow w-100">
            <div class="card-header py-3">
                <p class="text-primary m-0 fw-bold">Document Elements</p>
            </div>
            <div class="card-body px-3 py-3">
                <div class="card col-6" v-for="(Element, ElementIndex) in LabelEditor.elements">
                    <div class="card-body px-3 py-3" v-if="Element.type == 'text'">
                        <div class="col-12">
                            <label class="form-label">Text Value</label>
                            <input type="text" class="form-control label-input" v-model="Element.value">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Font Name</label>
                            <input type="text" class="form-control label-input" v-model="Element.fontName">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Font Height</label>
                            <input type="text" class="form-control label-input" v-model="Element.fontHeight">
                        </div>
                    </div>
                </div>

                <div class="col-12 text-center" v-if="LabelEditor.elements.length == 0">
                    <span>Füge Template-Objekte zu deinem Label hinzu.</span>
                </div>
                <div class="col-12 mt-3 d-flex" style="gap: 1rem">
                    <div class="btn-group">
                        <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                            Add Element
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#" @click="AddTextElement()">Text</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#">Box</a></li>
                            <li><a class="dropdown-item" href="#">Circle</a></li>
                            <li><a class="dropdown-item" href="#">Line</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#">QRCode</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div> #}
    </div>
</div>
</div>

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