<script setup lang="ts">
const title = defineProp<string>('title', { required: true })
const open = defineModel<boolean>({ required: true })
</script>

<template>
  <Teleport to="body">
    <Transition mode="out-in">
      <div v-if="open" @click.exact.stop="open = false" class="funkwhale overlay">
        <div @click.stop class="funkwhale modal">
          <h2>
            {{ title }}
            <FwButton icon="bi-x-lg" color="secondary" variant="ghost" @click="open = false" />
          </h2>

          <Transition>
            <div v-if="$slots.alert" class="alert-container">
              <div>
                <slot name="alert" />
              </div>
            </div>
          </Transition>

          <div class="modal-content">
            <slot />
          </div>
          <div v-if="$slots.actions" class="modal-actions">
            <slot name="actions" />
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<style lang="scss">
@import './style.scss'
</style>