<template>
  <BasePane hide-header>
    <template #content>
      <section class="limit-height-scrollable">
        <CheckboxTable v-if="instanceId" :instance-id="instanceId" :columns="groupListColumns" />
      </section>
    </template>
  </BasePane>
</template>

<script>
import CheckboxTable from '@/components/shared/CheckboxTable.vue'

export default {
  components: { CheckboxTable },
  props: {
    // same as slotId
    instanceId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      groupListColumns: ['name']
    }
  }
}
</script>

<style lang="sass" scoped>
section:first-of-type
  margin-top: 0.6em
section
  font-size: 0.9em
  margin-top: 1.4em
  &.limit-height-scrollable
    min-height: 50vh
    max-height: 80vh
    overflow-y: auto
    overflow-x: hidden
    &.joined
      margin-top: 0
</style>
