<template>
  <div @click="click">
    <div v-if="first">
      <slot name="first"></slot>
    </div>
    <div v-else>
      <slot name="second"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "confirmed-button-input",
  data: function() {
    return {
      first: true
    }
  },
  methods: {
    click: function(event) {
      if (this.first)
        this.first = false;
      else
        this.$emit('click', event);
    }
  }
}
</script>

<style scoped>
div {
  display: inline-block;
}

button {
  padding: 0.67rem 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.75rem;
  cursor: pointer;
}
</style>