<template>
    <form class="content-l" v-if="client" @submit.prevent="editClient(client)">
        <UiInput label="Name" required>
            <input type="text" v-model="client.name" required>
        </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">Update</UiButton>
        </div>
    </form>
</template>

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

const client = ref(structuredClone(toRaw(usePopup().require<Client>().payload)));
const originalName = client.value?.name;

function editClient(client: Client)
{
    usePut("/api/realms/" + useRoute().params.realm_key + '/clients/' + originalName, client, (client: Client) => {
        usePopup().callback(client);
        usePopup().close();
    });
}
</script>

<style scoped>

</style>