<template>
    <form class="content-l" @submit.prevent="addClient">
        <UiInput label="Name" required>
            <input type="text" v-model="client.name" required>
        </UiInput>
        <UiInput label="Secret">
            <input type="text" v-model="client.secret">
        </UiInput>
        <UiInput label="Redirect URI">
            <input type="url" v-model="client.redirectURI">
        </UiInput>
        <UiInput label="Allowed Grants">
            <AllowedGrantsInput v-model="client.allowedGrants"></AllowedGrantsInput>
        </UiInput>
        <div class="center">
            <UiButton type="submit">Create</UiButton>
        </div>
    </form>
</template>

<script setup lang="ts">
import AllowedGrantsInput from "~/client/AllowedGrantsInput.vue";
import {Client, ClientCreation} from "~/client/Client";
import {usePopup} from "~/components/ui/popup/Popup";

const client = ref(new ClientCreation());

function addClient()
{
    console.log(client.value);
    usePost<Client, ClientCreation>("/api/realms/" + useRoute().params.realm_key + "/clients", client.value, (response) => {
        const callback = usePopup().get()?.config?.callback;
        if (callback)
        {
            callback(response);
            usePopup().close();
        }
    });
}
</script>

<style scoped>

</style>