{% extends 'simple.html.twig' %}
{% block title %}{% trans %}Εισαγωγή Διαστάσεων{% endtrans %}{% endblock %}
{% block content %}
    <div id="app" class="container">
        <div class="row">
            <div class="col">
                <p class="h5 p-1 mt-2 mb-2 infoboxBlue">{% trans %}Εισαγωγή Διαστάσεων{% endtrans %}</p>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col">
                <b-form-textarea
                    id="textarea"
                    v-model="text"
                    placeholder="Enter DATA (BARCODE ΥΨΟΣ ΠΛΑΤΟΣ ΒΑΘΟΣ)"
                    ></b-form-textarea>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col">
                <b-button :disabled="disabled" variant="primary" v-on:click="load()">{% trans %}Εισαγωγή{% endtrans %}</b-button>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col">
                <table class="table table-sm table-bordered table-condensed table-dark">
                    <tr v-for="(d,index) in debug">
                        <td>${ index }$.</td><td>${ d }$</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    {{ parent() }}
    <script>
        var app = new Vue({
            delimiters: ['${', '}$'],
            el: '#app',
            data: {
                disabled: false,
                text: "",
                debug: []
            },
            methods: {
                load: async function () {
                    this.debug = [];
                    this.disabled = true;
                    await axios.post('{{ path('api_import_dimensions') }}', {
                        text: this.text
                    }).then(response => {
                        console.log(response);
                        this.debug = response.data;
                    }).catch(function (error) {
                        console.log(error);
                    });
                    this.disabled = false;
                }
            }
        });
    </script>
{% endblock %}