<template>
  <UCollapsible :class="ui.root({ class: [props.ui?.root, props.class] })" default-open>
    <div v-if="title || $slots.title || icon || $slots.icon" :class="ui.header({ class: props.ui?.header })">
      <div v-if="icon || $slots.icon" :class="ui.icon({ class: props.ui?.icon })">
        <slot name="icon">
          <UIcon v-if="icon" :name="icon" />
        </slot>
      </div>
      <div v-if="title || $slots.title" :class="ui.title({ class: props.ui?.title })">
        <slot name="title">
          {{ title }}
        </slot>
      </div>
    </div>

    <template #content>
      <div :class="ui.body({ class: props.ui?.body })">
        <slot />
      </div>
    </template>
  </UCollapsible>
</template>

<script>
import theme from "#build/cms/form-panel-aside-section";
import { useAppConfig } from "#imports";
import { computed } from "vue";
import { tv } from "../tv";
</script>

<script setup>
const props = defineProps({
  title: { type: String, required: false },
  icon: { type: String, required: false },
  divide: { type: Boolean, required: false },
  class: { type: null, required: false },
  ui: { type: null, required: false }
});
defineSlots();
const appConfig = useAppConfig();
const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.formPanelAsideSection || {} })());
</script>
