{% extends "base.htm" %}
{% block extrahead %}
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
            integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc=" crossorigin="anonymous"></script>
    <script>
        var users = 0;

        function genhtml(n) {
            return "<select id=\"utente" + n + "\" class=\"form-control\" name=\"utente" + n + "\">{% for impiegato in impiegati %}<option value=\"{{impiegato.iid}}\">{{impiegato.nomeimpiegato}} - {{impiegato.username}}</option>{% endfor %}</select>"
        }

        function adduser() {
            $("#users-column").append(genhtml(users));
            users += 1;
            $("#remove-user").removeClass("disabled");
        }

        function removeuser() {
            if (users > 0) {
                $("#utente" + (users - 1)).remove();
                users -= 1;
                if (users === 0) {
                    $("#remove-user").addClass("disabled");
                }
            }
        }
    </script>
{% endblock %}
{% block content %}
    <h1>
        Aggiunta nuovo dispositivo
    </h1>
    <form class="form-horizontal" action="/disp_add" method="post">
        <div class="form-group">
            <label class="col-xs-2" for="">Tipo dispositivo</label>
            <div class="col-xs-10">
                <select id="form-tipo" class="form-control" name="tipo">
                    {% for opzione in opzioni %}
                        <option value="{{ opzione }}">{{ opzione }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-xs-2" for="form-utente">Utenti</label>
            <div class="col-xs-10" id="users-column">
                <div id="add-user" class="btn btn-success" onclick="adduser()">+</div>
                <div id="remove-user" class="btn btn-danger disabled" onclick="removeuser()">-</div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-xs-2" for="form-marca">Marca</label>
            <div class="col-xs-10">
                <input id="form-marca" class="form-control" type="text" placeholder="Marca" name="marca">
            </div>
        </div>
        <div class="form-group">
            <label class="col-xs-2" for="form-modello">Modello</label>
            <div class="col-xs-10">
                <input id="form-modello" class="form-control" type="text" placeholder="Modello" name="modello">
            </div>
        </div>
        <div class="form-group">
            <label class="col-xs-2" for="form-ced">Inventario CED</label>
            <div class="col-xs-10">
                <input id="form-ced" class="form-control" type="text" placeholder="Inventario CED" name="inv_ced">
            </div>
        </div>
        <div class="form-group">
            <label class="col-xs-2" for="form-ente">Inventario ente</label>
            <div class="col-xs-10">
                <input id="form-ente" class="form-control" type="text" placeholder="Inventario ente" name="inv_ente">
            </div>
        </div>
        <div class="form-group">
            <label class="col-xs-2" for="form-fornitore">Fornitore</label>
            <div class="col-xs-10">
                <input id="form-fornitore" class="form-control" type="text" placeholder="Fornitore" name="fornitore">
            </div>
        </div>
        <div class="form-group">
            <label class="col-xs-2" for="form-control"></label>
            <div class="col-xs-10">
                <input class="form-control btn btn-primary" type="submit">
            </div>
        </div>
    </form>
{% endblock %}