<template>
    <form class="content-l" @submit.prevent="addUser">
        <UiInput label="E-Mail" required>
            <input type="email" v-model="user.email" required>
        </UiInput>
        <div class="col-2">
            <UiInput label="First Name" required>
                <input type="text" v-model="user.firstname" required>
            </UiInput>
            <UiInput label="Last Name" required>
                <input type="text" v-model="user.lastname" required>
            </UiInput>
        </div>
        <UiInput label="Password" required>
            <input type="password" v-model="user.password" required>
        </UiInput>
        <div class="center">
            <UiButton type="submit">Update</UiButton>
        </div>
    </form>
</template>

<script setup lang="ts">
import {User, UserCreation} from "~/user/User";
import {usePopup} from "~/components/ui/popup/Popup";

const user = ref(new UserCreation());

function addUser()
{
    usePost<User, UserCreation>("/api/realms/" + useRoute().params.realm_key + "/users", user.value, (response) => {
        const callback = usePopup().get()?.config?.callback;
        if (callback)
        {
            callback(response);
            usePopup().close();
        }
    });
}
</script>

<style scoped>

</style>