{% extends 'header.html' %}

{% block css %}
<link rel='stylesheet' href='/static/css/tienda.css'>
{% endblock %}

{% block body %}
<div class='container-fluid'>
    <div class='row'>

        <div class='col-3'></div>
        <div class=col-6 style=' background-color: rgba(219, 226,230, 0.6);'>

            <form action='/csvMenu' method='POST' enctype="multipart/form-data"><br>
                <p style="text-align: center;"><strong>IMPORTANTE SABER</strong><br>
                    El CSV tiene que estar en este formato 'Nombre,Descripcion,Precio,Categoria,Nombre de Imagen,"Comida
                    o Bebida (0, 1)"' <br>
                    La Columna de Comida o Bebida, 0 si es comida, 1 si es bebida. y la columna de nombre de imagen <br>
                    es el nombre de la imagen como 'imagen1.png'. Todas esas imágenes tendras que moverlas al folder de
                    imagenesDeProductos. </p>
                Imagen:
                <div class="custom-file">
                    <input type="file" class="custom-file-input" name='CSV_file' id="imagen" lang="en"
                        onchange='changePlaceHolder()'>
                    <label class="custom-file-label" id='placeholder' for="customFileLang">Choose file</label>
                </div>

                <button type='submit' class='btn btn-primary'>Someter</button>


            </form>
        </div>
    </div>
</div>
<script>
    function changePlaceHolder() {
        var val = $('#imagen').val();
        $('#placeholder').html(val);
    }

</script>
{% endblock %}