<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/kniznica/ucebny-material/${sekcia.ucebnica_id}/sekcie/${sekcia.id}/upravit`"
            >
                <i class="fa fa-pen"></i> Upraviť sekciu
            </a>
            <a class="dropdown-item"
               :href="`/vzdelavanie/kniznica/ucebny-material/${sekcia.ucebnica_id}/sekcie/nova?sekciaId=${sekcia.id}`"
            >
                <i class="fa fa-plus"></i> Vytvoriť novú podriadenú sekciu
            </a>
            <a class="dropdown-item"
               href="#"
               :onclick="submit"
            >
                <i class="fa fa-trash-alt"></i> Odstrániť sekciu
            </a>
            <form :id="`form-delete-${sekcia.id}`"
                  :action="`/vzdelavanie/kniznica/ucebny-material/${sekcia.ucebnica_id}/sekcie/${sekcia.id}/odstranit`"
                  method="post"
                  class="d-inline d-inline-flex"
                  style="display: none !important;"
            >
                <input type="hidden" name="_method" value="delete">
                <input type="hidden" name="_token" :value="document.head.querySelector('meta[name="csrf-token"]')">
            </form>
        </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-${sekcia.id}`).submit() : null;
      }
    },
  }
</script>

<style scoped>

</style>
