<template functional>
  <div class="pane">
    <div class="pane-header" :class="{ hidden: props.hideHeader }">
      <div class="header-title">
        <slot name="header-title" />
      </div>
      <div class="header-right">
        <slot name="header-right" />
      </div>
    </div>

    <div class="pane-content">
      <slot name="content" />
    </div>

    <footer class="pane-footer">
      <slot name="footer" />
    </footer>
  </div>
</template>

<script>
export default {
  props: {
    hideHeader: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="sass" scoped>
.pane-header
  display: flex
  justify-content: space-between
  .header-title
    justify-content: flex-start
    order: 0
    flex-grow: 1
    margin-bottom: 0.5em
    font-weight: 600
    font-size: 0.8rem
    text-transform: uppercase
    letter-spacing: 0.1rem
  .header-right
    justify-content: flex-end
    order: 1
  &.hidden
    display: none

.pane-content
  padding: 0rem 0 0.2rem 0
  margin-bottom: 1rem
  font-size: 0.8rem
  section
    margin: 0
</style>
