<template>
    <div class="content-l">
        <h3>Benutzer hinzufügen</h3>
        <UiInput label="Username" required>
            <input type="text" v-model="user.username">
        </UiInput>
        <UiInput label="Rolle" required>
            <select name="" id="">
                <option value="admin">Admin</option>
                <option value="maintainer">Maintainer</option>
                <option value="developer" selected>Developer</option>
            </select>
        </UiInput>
        <div class="col-2">
            <UiInput label="Passwort" required>
                <input type="password" v-model="user.password">
            </UiInput>
            <UiInput label="Passwort wiederholen" required>
                <input type="password">
            </UiInput>
        </div>
        <div class="center">
            <UiButton class="hollow">Zurück</UiButton>
            <UiButton :onclick="() => create()">User Anlegen</UiButton>
        </div>
        <p>{{ user }}</p>
    </div>
</template>

<script setup lang="ts">
import { User } from '~/classes/User';
import { createUser } from '~/requests/user';

const props = defineProps<{
    goto: (tab: number) => void
}>();

const user = ref(new User());

function create()
{
    if(!user.value.username)
    {
        throw new Error("username is required");
    }
    if(!user.value.roles)
    {
        throw new Error("roles are required");
    }
    if(!user.value.password)
    {
        throw new Error("password is required");
    }
    createUser(user.value, () => {
        props.goto(3);
    });
}
</script>