<template>
  <div
    v-if="$slots.edition || $slots.actions || $slots.filters"
    class="mc-datatable__header"
  >
    <div class="mc-datatable__topbar">
      <div v-if="$slots.edition" class="mc-datatable__topbar-edition">
        <!-- @slot Use this slot to insert editing elements. The editing elements must allow users to interact with the selected elements. -->
        <slot name="edition" />
      </div>
      <div v-if="$slots.actions" class="mc-datatable__topbar-actions">
        <!-- @slot Use this slot to insert action elements. Actions relate to the data in the table to validate an item or adding a line. -->
        <slot name="actions" />
      </div>
    </div>
    <div v-if="$slots.filters" class="mc-datatable__filters">
      <!-- @slot Use this slot to insert active filters. -->
      <slot name="filters" />
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MDataTableTop',
});
</script>

<style lang="scss">
@import 'settings-tools/all-settings';
@import 'components/c.datatable-header';

.mc-datatable {
  &__topbar-actions {
    margin-left: auto;
  }
}
</style>
