<template>
    <div class="dropdown" style="display: inline;float: right;">
        <div class="btn btn-sm btn-outline-primary dropdown-toggle dropdown-toggle-no-arrow" id="SidekickButton" data-toggle="dropdown">
            <i class="icon-dots-three-horizontal"></i>
        </div>
        <div class="dropdown-menu dropdown-menu-sm" aria-labelledby="SidekickButton">
            <a class="dropdown-item"
               :href="`/vzdelavanie/sprava/kniznica/kategorie/${sekcia.ucebnica.kategoria.hash_id}/ucebny-material/${sekcia.ucebnica.hash_id}/sekcie/nova?sekciaId=${sekcia.id}`"
            >
                <i class="fa fa-plus"></i> Vytvoriť novú podriadenú sekciu
            </a>
            <a class="dropdown-item"
               href="#"
               @click.prevent="$emit('delete', sekcia)"
            >
                <i class="fa fa-trash-alt"></i> Odstrániť sekciu
            </a>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'KontextoveMenu',
    props: {
      sekcia: {
        required: true,
        type: Object,
        default () {
          return {}
        },
      },
    },
    methods: {
      submit (event) {
        event.preventDefault()
        confirm('Prajete si odstrániť sekciu?') ? document.getElementById(`form-delete-${this.sekcia.hash_id}`).submit() : null;
      }
    },
  }
</script>

<style scoped>

</style>
