<template>
  <div class="panel">
    <p class="panel-heading is-unselectable" @click="is_open = !is_open">
      <span class="icon-text">
        <span class="icon has-text-link">
          <font-awesome-icon
            :icon="'fa-solid fa-caret-' + (is_open ? 'down' : 'right')"
          />
        </span>
        <span><slot name="heading" /></span>
      </span>
    </p>
    <slot v-if="is_open" name="default" />
  </div>
</template>

<script lang="ts">
import { Vue } from "vue-class-component";

export default class extends Vue {
  public is_open = false;
}
</script>

<style scoped>
div.panel > .panel-heading {
  cursor: pointer;
}
</style>
