<template>
  <BasePane>
    <template #content>
      <section class="limit-height-scrollable">
        <div v-for="(table, index) in tables" :key="index">
          <div class="table-title">
            {{ table.title }}
          </div>
          <CheckboxTableNodes
            :instance-id="instanceId"
            :attributes="table.attributes"
            :column-sizes="table.columnSizes"
            :data-class="table.dataClass"
          />
        </div>
      </section>
    </template>
  </BasePane>
</template>

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

export default {
  components: { CheckboxTableNodes },
  props: {
    // same as slotId
    instanceId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      tables: [
        {
          title: 'People',
          attributes: [
            { title: 'Id', attrName: 'id' },
            // { title: 'Label', attrName: 'label' },
            { title: 'Name', attrName: 'name' },
            { title: 'House', attrName: 'group' },
            { title: 'Royal', attrName: 'royal' },
            { title: 'Kingsguard', attrName: 'kingsguard' },
            { title: 'Type', attrName: 'type' }
            // { title: 'Class', attrName: 'dataClass' }
          ],
          columnSizes: ['0.2rem', '8rem', '4rem', '3rem', '5rem', '3rem'],
          dataClass: 'regular'
        }
      ],
      attributes: [
        { title: 'Label', attrName: 'label' },
        // { title: 'Label', attrName: 'label' },
        // { title: 'Name', attrName: 'name' },
        { title: 'Type', attrName: 'type' },
        { title: 'Class', attrName: 'dataClass' }
      ]
    }
  }
}
</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
    min-width: 20vh
    overflow-y: auto
    overflow-x: auto
    &.joined
      margin-top: 0

.table-title
  font-size: 0.8rem
  color: #919191
  font-weight: 600
  text-transform: uppercase
  margin: 1rem 0
</style>
