{% extends 'simple.html.twig' %}
{% block title %}{% trans %}Login{% endtrans %}{% endblock %}

{% block content %}

    <div id="app" class="container">
        <div class="row">
            <div class="col-12">
                <p class="h5 p-2" style="background-color: #336f94; color: white">{% trans %}Login{% endtrans %}</p>
            </div>

        </div>
        <div class="row mt-5"></div>

        <div class="row mt-5">
            <div class="col-2"></div>
            <div class="col-8 p-3" style="background-color: #336f94; color: white">
                <div class="row">
                    <div class="col">
                        <template>
                            <form method="post">
                                <div class="form-group">
                                    <label label-for="input-1">{% trans %}Όνομα χρήστη{% endtrans %}</label>
                                    <select class="form-control" name="id">
                                        <option></option>
                                        {% for user in users %}
                                            <option {% if user.id == last_id %}selected{% endif %} value="{{user.id}}" >{{user.name}}</option>
                                        {% endfor %}
                                    </select>

                                </div>
                                <div class="form-group">
                                    <label label-for="input-2">{% trans %}Κωδικός{% endtrans %}</label>
                                    <input type="password" name="password" class="form-control" >

                                </div>
                                <input type="hidden" name="_csrf_token"
                                       value="{{ csrf_token('authenticate') }}"
                                       >
                                <button type="submit" class="float-right btn btn-light" >
                                    {% trans %}Σύνδεση{% endtrans %}
                                </button>
                            </form>

                        </template>
                    </div>
                </div>

                {% if error %}
                    <div class="row mt-3">
                        <div class="col">
                            <p class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</p>
                        </div>
                    </div>
                {% endif %}

            </div>
            <div class="col-2"></div>
        </div>
    </div>
{% endblock %}
{% block js %}
    {{ parent() }}
    <script>
        new Vue({
            delimiters: ['${', '}$'],
            el: '#app',
            data: {
                users: [{text: '', value: null}],
                user: null,
                password: null,
                show: true
            },
            mounted() {
              
            },
            computed: {
            },
            watch: {
            },
            methods: {

            }});
    </script>
{% endblock %}