<script>
export default {
    name: "CantidadOllas",
    data() {
        return {
            cantidadControl: 0,
        }
    },
    methods: {
        decrementar() {
            this.cantidadControl -= 1;
        },
        incrementar() {
            this.cantidadControl += 1;
        },
    }
}
</script>

<template>
    <div class="notification has-text-centered">
        <label class="label">Cantidad de ollas:</label>
        <div class="field has-addons is-justify-content-center contador">
            <div class="control">
                <button class="button is-small"
                        :disabled="cantidadControl < 1"
                        @click.capture="decrementar">
                    <i class="fa fa-solid fa-minus"></i>
                </button>
            </div>
            <div class="control">
                <input id="cantidad"
                       v-model="cantidadControl"
                       class="input is-small"
                       type="number"
                       style="text-align: center">
            </div>
            <div class="control">
                <button class="button is-small" @click="incrementar">
                    <i class="fa fa-solid fa-plus"></i>
                </button>
            </div>
        </div>
    </div>
</template>

<style scoped>
</style>
