<script>
import { defineComponent } from "vue";
import CanastaInput from "./CanastaInput.vue";

export default defineComponent({
    components: { CanastaInput },
    name: "CanastaSeccion",
})
</script>

<template>
    <div>
        <article class="message is-warning">
            <div class="message-header">
                <p>Formato de la canasta</p>
            </div>
            <div class="message-body">
                <div class="content">
                    La planilla de la canasta tiene que tener el siguiente formato para que la aplicación la lea correctamente:
                    <ul>
                        <li> Los precios deben usar punto y no coma decimal </li>
                        <li> El nombre de las columnas deben ser "Tipo", "Producto", y "Precio" respectivamente </li>
                        <li> Las celdas deben separarse con '|' </li>
                        <li> No puede haber "enters" en ninguna celda </li>
                        <li> El bono de transporte debe tener tipo 'T' </li>
                    </ul>
                    <a class="has-text-info" href="/comisiones/canasta/ejemplo">Planilla de ejemplo.</a>
                    <article class="message is-danger mt-2">
                        <div class="message-body">
                            <div class="content">
                                Cuidado! Cargar una nueva canasta elimina todos los pedidos de la aplicación.
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </article>
        <div class="buttons">
            <canasta-input/>
        </div>
    </div>
</template>

<style scoped>

</style>