<template>
  <div class="form-section">
    <template v-for="(_, name) in slots">
      <section v-if="!slotIsAction(name)" :style="'border'">
        <slot :name="name" />
      </section>
    </template>
    <div class="actions">
      <slot name="actions" v-if="hasSlotActions" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.form-section {
  display: flex;
  flex-direction: column;
  gap: 1em;

  section {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
  }

  .actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1em;
  }
}
</style>
<script lang="ts" setup>
import { computed } from 'vue';

const slots = defineSlots();

const hasSlotActions = computed((): boolean => {
  return Object.keys(slots).includes('actions');
});

const slotIsAction = (slotName: string): boolean => {
  return slotName === 'actions';
};
</script>
