<template>
  <div>
    <div @click.prevent.stop="toggle" class="d-flex align-items-center flex-nowrap" :class="{'active-toggle': visible}">
      <div class="item-toggle text-muted">
        <template v-if="visible && expanded">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
               width="16" height="16" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path d="M184.7,413.1l2.1-1.8l156.5-136c5.3-4.6,8.6-11.5,8.6-19.2c0-7.7-3.4-14.6-8.6-19.2L187.1,101l-2.6-2.3
	C182,97,179,96,175.8,96c-8.7,0-15.8,7.4-15.8,16.6h0v286.8h0c0,9.2,7.1,16.6,15.8,16.6C179.1,416,182.2,414.9,184.7,413.1z" fill="currentColor" />
</svg>
        </template>
        <template v-else-if="visible">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
               width="16" height="16" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path d="M98.9,184.7l1.8,2.1l136,156.5c4.6,5.3,11.5,8.6,19.2,8.6c7.7,0,14.6-3.4,19.2-8.6L411,187.1l2.3-2.6
	c1.7-2.5,2.7-5.5,2.7-8.7c0-8.7-7.4-15.8-16.6-15.8v0H112.6v0c-9.2,0-16.6,7.1-16.6,15.8C96,179.1,97.1,182.2,98.9,184.7z" fill="currentColor" />
</svg>
        </template>
      </div>

      <slot></slot>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.active-toggle {
  cursor: pointer;
}
.item-toggle {
  width: 1.5rem;
  min-width: 1.5rem;
  display: flex;
  align-items: center;
}
</style>
<script>
import { Vue, Component, Prop } from 'vue-property-decorator';

export default @Component({
  components: {
  }
})
class itfTableRowToggle extends Vue {
  @Prop(Boolean) expanded;
  @Prop(Boolean) visible;

  toggle() {
    this.$emit('toggle');
  }
}
</script>
