<template>
  <div class="page-collapse-decorator">
    <b-button
      v-b-toggle="id"
      variant="collapse"
      class="d-flex flex-nowrap justify-content-start"
    >
      <img :src="require(imgPath)" />
      {{ title }}
      <component :is="iconChevronUp" class="icon-expand" />
    </b-button>
    <b-collapse :id="id" class="nav-item__nav">
      <slot></slot>
    </b-collapse>
  </div>
</template>
<script>
import iconChevronUp from '@carbon/icons-vue/es/chevron--up/20';

export default {
  name: 'Collapse',
  props: {
    id: {
      type: String,
      default: null,
    },
    imgPath: {
      type: String,
      default: '@/assets/images/_sila/collapsed/temperature.svg',
    },
    title: {
      type: String,
      default: 'collapsed title',
    },
  },
  data() {
    return {
      iconChevronUp: iconChevronUp,
    };
  },
};
</script>
<style lang="scss" scoped>
//nav items style
.nav-item,
.nav-link {
  padding: 0;
}
.nav-item {
  list-style-type: none;
}

a {
  color: $text-primary !important;
  &:hover {
    color: $text-primary !important;
  }
}
</style>
