<template>
  <div class="itf-board-card shadow-sm" @click="$emit('click')" tabindex="0">
    <slot name="header"></slot>

    <div class="itf-board-card-inner d-flex">
      <div class="flex-grow-1">
        <slot>{{text}}</slot>
      </div>
      <div v-if="dropdown">
        <itf-button icon small @click.prevent.stop="">
          <itf-icon name="menu_horizontal" />
        </itf-button>
      </div>
    </div>

    <div class="itf-board-card-footer pt-1 d-flex">
      <slot name="footer"></slot>
    </div>
  </div>
</template>
<script>
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import itfIcon from '../icon/Icon';
import itfButton from '../button/Button';
import loading from '../../directives/loading';
import itfForm from '../form/Form';
import itfEditButton from '../editable/EditButton';

export default @Component({
  components: {
    itfIcon,
    itfForm,
    itfEditButton,
    itfButton
  },
  directives: {
    loading
  }
})
class BoardColumn extends Vue {
  @Prop() text;
  @Prop(Boolean) dropdown;
}
</script>
