<template>
    <form class="content-l" v-if="popup.payload" @submit.prevent="deleteClient(popup.payload)">
        <UiWarning><p>Are you sure you want to delete client <span>{{ popup.payload.name }}</span>?</p></UiWarning>
        <div class="center">
            <UiButton type="submit">Delete</UiButton>
        </div>
    </form>
</template>

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

const popup = usePopup().require<Client>();

function deleteClient(client: Client)
{
    useDelete("/api/realms/" + useRoute().params.realm_key + "/clients/" + client.name, () => {
        if (popup.config?.callback)
        {
            popup.config.callback();
        }
        usePopup().close();
    })
}
</script>

<style scoped>
span {
    font-weight: bold;
}
</style>