<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>
@import _workspace

.card-content
  padding: 1rem
.card-right
  width: $card-right-width
  margin-bottom: 20px

.item
  margin-bottom: 18px

.clickable-icon
  cursor: pointer

.clearfix:before,
.clearfix:after
  display: table
  content: ''

.clearfix:after
  clear: both
</style>