<template>
  <div class="columns">
    <div class="column is-narrow">
      <a @click="$emit('close')"
         class="button is-large is-outlined-dark is-fullwidth">
        <span>Liste</span>
        <span class="icon is-large">
          <i class="mdi mdi-36px mdi-view-list"></i>
        </span>
      </a>
      <br class="is-hidden-mobile"/>
      <SlotSelect v-on:add="addToPlanning" />
    </div>
    <div class="column">
      <h4 class="title">{{ item.title }}</h4>
      <h6 class="subtitle">{{ categories[item.category].name }}</h6>
      <p><strong>Ingredients</strong></p>
      <ul>
        <li v-for="ing in item.ingredients.split('\n')">{{ ing }}</li>
      </ul>
    </div>
    <div class="column is-narrow">
      <a @click="$emit('delete', item.id)">
        <span class="icon is-large has-text-danger">
          <i class="mdi mdi-48px mdi-delete-forever"></i>
        </span>
      </a>
    </div>
  </div>
</template>

<script>
import _, {categories} from './RecipeList.vue'
import SlotSelect from './planner/SlotSelect.vue'


export default {
  name: 'RecipeDetails',
  components: {
    SlotSelect,
  },
  props: {
    item: {
      type: Object,
      required: true,
      default () {
        return {id: 0, title: "", category: 0, ingredients: ""};
      },
    }
  },
  data () {
    return {
      categories: categories,
    }
  },
  methods: {
    addToPlanning: function(slotKey) {
      this.$emit('add', slotKey, this.item.id);
    }
  }
}
</script>
