<template>
  <b-collapse class="card card-right">
    <div
      slot="trigger"
      slot-scope="props"
      class="card-header"
      role="button"
      aria-controls="contentIdForA11y3"
    >
      <p class="card-header-title">
        <slot name="header-title"></slot>
      </p>
      <a class="card-header-icon">
        <b-icon :icon="props.open ? 'menu-down' : 'menu-up'"></b-icon>
      </a>

      <slot name="header-right"></slot>
    </div>

    <div slot="header" class="clearfix">
      <span>Node detail</span>
    </div>

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

    <footer class="card-footer">
      <slot name="footer"></slot>
    </footer>
  </b-collapse>
</template>

<script>
export default {}
</script>

<style lang="sass" scoped>
.card-content
  padding: 1rem
</style>