<template>
    <div class="card is-shadowless">
        <div class="card-header">
          <p class="card-header-title">
            Nouveau loot - {{ looted.length }} objet(s)</p>
          </div>
        <div class="card-content">
          <ItemInput @addItem="onAddItem"></ItemInput>
          <p v-for="(item, idx) in looted" :key="idx"
             class="has-text-left is-size-5">
            {{ item }}
          </p>
          </div>
        <div class="card-footer">
          <div class="card-footer-item buttons is-center">
            <a class="button is-primary">Confirmer</a>
            <a @click="onClose" class="button is-danger">Annuler</a>
            </div>
          </div>
      </div>
</template>

<script>
    import ItemInput from './ItemInput.vue'

    export default {
        components: { ItemInput },
        data () { return {
            looted: [],
        }; 
        },
        methods: {
            onAddItem (item) {
                this.looted.push(item);
            },
            onClose () {
                this.$emit('done');
            },
        }

    }
</script>
