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

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

var template = {{ template | dump }}

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

<div class="row gx-4 gy-2">
    <div class="col-12">
        <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 p-3 row gx-4 gy-3">
                <div class="col-lg-6 col-12">
                    <label class="form-label">Label Name</label>
                    <input type="text" class="form-control label-input" placeholder="Label Name" v-model="template.name">
                </div>
                    <div class="col-lg-3 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="template.width">
                            <span class="input-group-text">mm</span>
                        </div>
                    </div>
                    <div class="col-lg-3 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="template.height">
                            <span class="input-group-text">mm</span>
                        </div>
                    </div>
                <div class="col-lg-12 col-12 d-flex justify-content-end">
                    <a class="btn btn-primary" @click="SaveTemplate()">
                        <i class="me-2 ti ti-device-floppy"></i>Save
                    </a>
                </div>
            </div>
        </div>
    </div>

    {# Template Variables #}
    <div class="col-12 col-lg-4">
        {# Variables 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">Variables</h1>
            <div class="btn-toolbar mb-2 mb-md-0">
                <a class="btn btn-outline-primary" @click="AddVariable()">
                    <i class="me-2 ti ti-playlist-add"></i>Add
                </a>
            </div>
        </div>
        {# Variables #}
        <div class="row gy-3">
            <div :class="['col-12','gy-3', variable.id == null ? 'd-none': '']" v-for="(variable, index) in template.variables">
                <div class="card shadow w-100">
                    <div class="card-header py-3">
                        <p class="text-primary m-0 fw-bold">{% raw %}{{ variable.name }}{% endraw %}</p>
                    </div>
                    <div class="card-body px-3 py-3">
                        <div class="row gy-3">
                            <div class="col-12">
                                <kbd>{% raw %}{{ variable.regex }}{% endraw %}</kbd>
                            </div>
                            {# Actions #}
                            <div class="col-12 d-flex justify-content-end">
                                <a class="btn btn-outline-danger me-2" @click="DeleteVariable(index)">
                                    <i class="ti ti-trash me-2"></i>Delete
                                </a>
                                <a class="btn btn-outline-primary" @click="EditVariable(index)">
                                    <i class="ti ti-pencil me-2"></i>Edit
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# Template Elements #}
    <div class="col-12 col-lg-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
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <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>
                </div>
            </div>
            {# Element List #}
            <div class="col-12">
                <div class="row row-cols-1 row-cols-lg-2 g-4">
                    <div :class="['col', element.id == null ? 'd-none': '']" v-for="(element, elementIndex) in template.elements">
                        <div class="col card border-primary shadow">
                            <div class="card-header px-3 py-3">
                                <p class="text-primary m-0 fw-bold">{% raw %}{{ element.name }}{% endraw %}</p>
                            </div>
                            <div class="card-body">
                                <table class="table table-middle table-borderless my-0">
                                    <tbody>
                                        <tr>
                                            <td class="py-2" title="Number of Columns">
                                                <i class="ti ti-augmented-reality me-2"></i>Type:
                                            </td>
                                            <td class="py-2" title="Number of Columns">
                                                {% raw %}{{ GetElementTypeName(element.type) }}{% endraw %}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="py-2" title="Number of Columns">
                                                <i class="ti ti-layout-align-left me-2"></i>Position X:
                                            </td>
                                            <td class="py-2" title="Number of Columns">
                                                {% raw %}{{ element.config.originX }}{% endraw %}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="py-2" title="Number of Columns">
                                                <i class="ti ti-layout-align-top me-2"></i>Position Y:
                                            </td>
                                            <td class="py-2" title="Number of Columns">
                                                {% raw %}{{ element.config.originY }}{% 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="EditElement(elementIndex)">
                                        <i class="ti ti-printer me-2"></i>Edit
                                    </a>
                                    <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>
</div>
</div>

{# Variable Settings Modal #}
<div class="modal fade" id="VariableSettingsModal" tabindex="-1" data-bs-backdrop="static" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" v-if="variableIndex != null">
            <div class="modal-header">
                <h1 class="modal-title fs-5" v-if="template.variables[variableIndex].id == null">Create Variable</h1>
                <h1 class="modal-title fs-5" v-if="template.variables[variableIndex].id != null">Edit Variable</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" title="the internal name of the variable">
                    <label for="VariableNameInput" class="form-label">Name</label>
                    <input type="text" class="form-control" id="VariableNameInput" placeholder="Variable Name" v-model="template.variables[variableIndex].name">
                </div>
                <div class="mb-3" title="a label for the variable that is displayed on dialogs">
                    <label for="VariableLabelInput" class="form-label">Label</label>
                    <input type="text" class="form-control" id="VariableLabelInput" placeholder="Variable Name" v-model="template.variables[variableIndex].label">
                </div>
                <div class="mb-3" title="regex to check if input is valid">
                    <label for="VariableRegexInput" class="form-label">Check Value Regex</label>
                    <input type="text" class="form-control" id="VariableRegexInput" placeholder="Regex like ^.*$" v-model="template.variables[variableIndex].regex">
                </div>
                <div class="mb-3" title="an example for the input that is displayed on dialogs">
                    <label for="VariableExampleInput" class="form-label">Value Example</label>
                    <input type="text" class="form-control" id="VariableExampleInput" placeholder="just a example" v-model="template.variables[variableIndex].example">
                </div>
                <div class="mb-3" title="a default value for the input that is used on dialogs">
                    <label for="VariableDefaultInput" class="form-label">Default Value</label>
                    <input type="text" class="form-control" id="VariableDefaultInput" placeholder="default value" v-model="template.variables[variableIndex].default">
                </div>
            </div>
            <div class="modal-footer">
                <a class="btn btn-outline-primary" @click="SaveVariable(variableIndex)" title="Save Variable">
                    <i class="me-2 ti ti-device-floppy"></i>Save
                </a>
            </div>
        </div>
    </div>
</div>

{# Variable delete Confirmation Modal #}
<div class="modal fade" id="DeleteVariableModal" data-bs-backdrop="static" aria-hidden="true" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" v-if="variableIndex != null">
            <div class="modal-body mx-2 d-flex flex-column" style="gap: 1rem">
                <h5 class="mb-0">Delete Variable</h5>
                <p class="mb-0">Are you sure you want to delete Variable {% raw %}{{ template.variables[variableIndex].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="DeleteVariable(variableIndex, 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>

{# Element Settings Modal #}
<div class="modal fade" id="ElementSettingsModal" tabindex="-1" data-bs-backdrop="static" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content" v-if="elementIndex != null">
            <div class="modal-header">
                <h1 class="modal-title fs-5" v-if="template.elements[elementIndex].id == null">Create Element</h1>
                <h1 class="modal-title fs-5" v-if="template.elements[elementIndex].id != null">Edit Element</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body mx-2">
                {# Default Element Settings #}
                <div class="mb-3">
                    <label for="ElementTypeInput" class="form-label">Element Type</label>
                    <input type="text" class="form-control" id="ElementTypeInput" placeholder="Element Type" v-model="template.elements[elementIndex].name">
                </div>
                {# <div class="mb-3">
                    <label for="ElementTypeInput" class="form-label">Element Type</label>
                    <input type="text" class="form-control" id="ElementTypeInput" placeholder="Element Type" v-model="template.elements[elementIndex].type" disabled readonly>
                </div> #}
                <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="template.elements[elementIndex].config.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="template.elements[elementIndex].config.originY">
                            <span class="input-group-text">mm</span>
                        </div>
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Alignment</label>
                    <select class="form-select" v-model="template.elements[elementIndex].config.originAlign">
                        <option value="0">Align Left</option>
                        <option value="1">Align Right</option>
                        <option value="2">Align Auto</option>
                    </select>
                </div>
                {# Text Element Settings #}
                <div class="mb-3" v-if="template.elements[elementIndex].type == 'text'">
                    <label class="form-label">Text Content</label>
                    <input type="text" class="form-control" v-model="template.elements[elementIndex].config.content">
                </div>
                <div class="row mb-3" v-if="template.elements[elementIndex].type == 'text'">
                    <div class="col-6">
                        <label class="form-label">Font Type</label>
                    <input type="text" class="form-control" v-model="template.elements[elementIndex].config.fontType">
                    </div>
                    <div class="col-6">
                        <label class="form-label">Font Height</label>
                        <div class="col-6 input-group">
                            <input type="text" class="form-control" v-model="template.elements[elementIndex].config.fontHeight">
                            <span class="input-group-text">mm</span>
                        </div>
                    </div>
                </div>
                {# Box / Ellipse Element Settings #}
                <div class="row mb-3" v-if="template.elements[elementIndex].type == 'box' || template.elements[elementIndex].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="template.elements[elementIndex].config.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="template.elements[elementIndex].config.height">
                            <span class="input-group-text">mm</span>
                        </div>
                    </div>
                </div>
                {# Box Element Settings #}
                <div class="row mb-3" v-if="template.elements[elementIndex].type == 'box' || template.elements[elementIndex].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="template.elements[elementIndex].config.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="template.elements[elementIndex].config.borderColor">
                            <option value="B">Black</option>
                            <option value="W">White</option>
                        </select>
                    </div>
                </div>
                <div class="mb-3" v-if="template.elements[elementIndex].type == 'box'">
                    <label class="form-label">Boder Radius</label>
                    <select class="form-select" v-model="template.elements[elementIndex].config.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>
                {# Code 39 & Code 128 #}
                <div class="row mb-3" v-if="template.elements[elementIndex].type == 'code39' || template.elements[elementIndex].type == 'code128'">
                    <div class="col-12">
                        <label class="form-label">Content</label>
                        <input type="text" class="form-control" placeholder="0" v-model="template.elements[elementIndex].config.content">
                    </div>
                </div>
                <div class="row mb-3" v-if="template.elements[elementIndex].type == 'code39' || template.elements[elementIndex].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="template.elements[elementIndex].config.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="template.elements[elementIndex].config.widthRatio">
                            <span class="input-group-text">x</span>
                        </div>
                    </div>
                </div>
                <div class="row mb-3" v-if="template.elements[elementIndex].type == 'code39' || template.elements[elementIndex].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="template.elements[elementIndex].config.codeHeight">
                            <span class="input-group-text">dots</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <a class="btn btn-outline-primary" @click="SaveElement(elementIndex)" title="Save Element">
                    <i class="me-2 ti ti-device-floppy"></i>Save
                </a>
            </div>
        </div>
    </div>
</div>

{# Element delete Confirmation Modal #}
<div class="modal fade" id="DeleteElementModal" data-bs-backdrop="static" aria-hidden="true" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" v-if="elementIndex != null">
            <div class="modal-body mx-2 d-flex flex-column" style="gap: 1rem">
                <h5 class="mb-0">Delete Element</h5>
                <p class="mb-0">Are you sure you want to delete Element {% raw %}{{ template.elements[elementIndex].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="DeleteElement(elementIndex, 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>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div id="toast-template-saved" class="toast align-items-center text-bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body">
                template saved
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    </div>
</div>

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