<template>
    <form @submit.prevent="addRole">
        <UiInput label="Name">
            <input type="text" v-model="role.name">
        </UiInput>
        <UiButton type="submit">Create</UiButton>
    </form>
</template>

<script setup lang="ts">
import {type Role, RoleCreation} from "~/role/Role";
import {usePopup} from "~/components/ui/popup/Popup";
import {usePost} from '~/utils/HttpUtils';

const role = ref(new RoleCreation());

function addRole()
{
    usePost<Role>("/api/realms/" + useRoute().params.realm_key + "/roles", role.value, (role: Role) => {
        usePopup().callback(role);
        usePopup().close();
    });
}
</script>

<style scoped>

</style>