<template>
  <div>
    <b-dropdown aria-role="list" class="mode-dropdown" label="Mode">
      <slot name="trigger">
        <b-button slot="trigger" size="is-small" type="is-light" class="system-background">
          <span class="mode-title">
            Run new operation
          </span>
          <span class="icon">
            <i class="fas fa-plus" aria-hidden="true" />
          </span>
        </b-button>
      </slot>

      <section>
        <b-dropdown-item aria-role="listitem" @click="$emit('run-operation-1')">
          Analytical operation 1
        </b-dropdown-item>
        <b-dropdown-item aria-role="listitem" @click="$emit('run-operation-2')">
          Analytical operation 2
        </b-dropdown-item>
        <b-dropdown-item aria-role="listitem" @click="$emit('run-operation-3')">
          Analytical operation 3
        </b-dropdown-item>
      </section>
    </b-dropdown>
  </div>
</template>
