<template>
  <BasePane hide-header style="height: 100%">
    <template #content>
      <h2>Network A {{ instanceId.primaryGraphInstanceId }}</h2>
      <section style="height: 50%">
        <GroupListPane
          v-if="instanceId.primaryGraphInstanceId"
          :instance-id="instanceId.primaryGraphInstanceId"
        />
      </section>
      <h2>Network B {{ instanceId.secondaryGraphInstanceId }}</h2>
      <section>
        <GroupListPane
          v-if="instanceId.secondaryGraphInstanceId"
          :instance-id="instanceId.secondaryGraphInstanceId"
        />
      </section>
    </template>
  </BasePane>
</template>

<script>
import { mapState } from 'vuex'

import GroupListPane from '@/components/NetworkVis/ToolSidebar/GroupListPane.vue'

export default {
  components: { GroupListPane },
  props: {
    instanceId: {
      type: Object,
      required: true
    }
    // same as slotId
    // instanceId: {
    //   type: Number,
    //   required: true
    // }
  },
  data() {
    return {
      groupListColumns: ['name']
    }
  },
  computed: {
    ...mapState('auth', ['user'])
  }
}
</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
    max-height: 20em
    overflow-y: auto
    overflow-x: hidden
    &.joined
      margin-top: 0
</style>
