<script setup lang="ts">
import BaseDiv from "@components/baseComponents/BaseDiv.vue";

const emit = defineEmits(["close"])

</script>

<template>
    <div class="modal-fade" tabindex="-1" id="editModal" aria-labelledby="editModalLabel" @click="emit('close')">
        <div class="modal" @click.stop>
            <div class="modal-content">
                <BaseDiv class="modal-header">
                    <slot name="modal-header">
                        Modal Header
                    </slot>
                    <button type="button" class="btn-close" aria-label="Close" @click="emit('close')"/>
                </BaseDiv>
                <BaseDiv v-if="$slots.body" class="modal-body">
                    <slot name="body"></slot>
                </BaseDiv>
                <BaseDiv v-if="$slots.footer" class="modal-footer">
                    <slot name="footer">
                        <button type="button" class="btn btn-secondary" @click="emit('close')">Close</button>
                    </slot>
                </BaseDiv>
            </div>
        </div>
    </div>
</template>

<style scoped>
.modal-content {
    color: var(--color-background-font);
    background-color: var(--color-background) !important;
    border: 1px solid var(--color-modal-background-inverted);
}

.modal-header {
    color: var(--color-background-font);
    background-color: var(--color-background-soft);
    border-bottom: 1px solid var(--color-modal-background-inverted);
}

.modal-footer {
    color: var(--color-background-font);
    background-color: var(--color-background-soft);
    border-top: 1px solid var(--color-modal-background-inverted);
}

.modal-body {
    color: var(--color-background-font);
    background-color: var(--color-background) !important;
}

.modal-body {
    background-color: var(--color-background) !important;
    color: var(--color-background-font);
    border: 2px solid var(--color-modal-background-inverted);
}

.modal {
    position: relative;
    max-width: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
}

.modal-fade {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 1s ease;
    z-index: 1000;
}

</style>