<template>
    <teleport to="body">
        <div class="modal fade show d-block" tabindex="-1" role="dialog" aria-modal="true" @click.self="closeModal">
            <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Create New Space</h5>
                        <button type="button" class="btn-close" aria-label="Close" @click="closeModal"></button>
                    </div>
                    <div class="modal-body">
                        <form @submit.prevent="handleCreate">
                            <div class="mb-3">
                                <label for="spaceName" class="form-label">Space Name</label>
                                <input id="spaceName" v-model="form.name" type="text" class="form-control" required />
                            </div>
                            <div class="mb-3">
                                <label for="spaceDesc" class="form-label">Description</label>
                                <textarea id="spaceDesc" v-model="form.description" class="form-control" rows="3"></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">Create</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-backdrop fade show"></div>
    </teleport>
</template>

<script setup>
import { ref } from "vue";

const emit = defineEmits(["close", "create"]);

const form = ref({
    name: "",
    description: "",
});

const closeModal = () => {
    emit("close");
};

const handleCreate = () => {
    if (form.value.name.trim()) {
        emit("create", form.value);
        form.value = { name: "", description: "" };
    }
};
</script>



