<script setup>
const emit = defineEmits(['confirmed'])

const props = defineProps({
  color: {
    type: String,
    required:false
  },
  variant: {
    type: String,
    required:false
  }

})

const {color,variant} = props

const showModal = ref(false)

const emitConfirm = () => {
  showModal.value = false
  emit('confirmed')
}
</script>

<template>
  <UButton
    :color="color"
    :variant="variant"
    @click="showModal = true"
  >
    <slot name="button"></slot>
  </UButton>
  <UModal v-model:open="showModal">
    <template #content>
      <UCard>
        <template #header>
          <slot name="header"></slot>
        </template>
        <slot/>
        <template #footer>
          <div class="text-right">
            <UButtonGroup>
              <UButton
                  variant="outline"
                  @click="showModal = false"
              >
                Abbrechen
              </UButton>
              <UButton
                  @click="emitConfirm"
                  class="ml-2"
                  color="error"
              >
                Archivieren
              </UButton>
            </UButtonGroup>

          </div>
        </template>
      </UCard>
    </template>
  </UModal>
</template>

<style scoped>

</style>
