<template>
  <div class="field has-addons">
    <div v-show="is_opened" class="control has-icons-left">
      <input class="input" :value="value" @input="input" type="number" size="3" min="-50" max=50 step=5>
      <span class="icon is-left">
        <i class="fas fa-percent"></i>
      </span>
    </div>
    <div class="control">
      <button class="button" @click="switchOpenedState">
        <small v-if="!is_opened">Mod.</small>
        <span v-else class="icon"><i class="fas fa-times-circle"></i></span>
      </button>
    </div>
  </div>
</template>

<script>
    export default {
        props: ["value"],
        data () {
            return {
                is_opened: false,
            };
        },
        methods: {
            input (event) { this.$emit("input", event.target.value); },
            switchOpenedState () {
                this.is_opened = !this.is_opened;
                // Reset the modifier in closed state
                if (!this.is_opened) {
                    this.$emit("input", 0);
                }
            }
        }
    }
</script>

<style scoped>
  .input { width: 6em; }
</style>
