<template>
  <v-row
    class="pane-wrapper"
    no-gutters
  >
    <v-col
      ref="leftPane"
      class="pane"
    >
      <slot name="left" />
    </v-col>
    <v-divider
      v-if="showRightPane"
      vertical
    />
    <v-col
      v-if="showRightPane"
      ref="rightPane"
      class="pane"
    >
      <slot name="right" />
    </v-col>
  </v-row>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class TwoPaneLayout extends Vue {
  @Prop({ type: Boolean, default: true }) showRightPane!: boolean

  leftPane(): HTMLElement {
    return this.$refs.leftPane as HTMLElement
  }

  rightPane(): HTMLElement {
    return this.$refs.rightPane as HTMLElement
  }
}
</script>

<style scoped>
  .pane-wrapper {
    height: 100%;
  }

  .pane {
    height: 100%;
    overflow: auto;
  }
</style>