<template>
    <div class="content-l">
        <Table columns="1fr auto">
            <HeaderRow>
                <HeaderCell>Name</HeaderCell>
                <HeaderCell></HeaderCell>
            </HeaderRow>
            <ContentRow v-for="role in roles.data">
                <ContentCell>{{ role.name }}</ContentCell>
                <ContentCell style="padding: 0.25rem;">
                    <UiButton><UiIcon>edit</UiIcon></UiButton>
                    <UiButton @click="deleteRole(role)"><UiIcon>delete</UiIcon></UiButton>
                </ContentCell>
            </ContentRow>
        </Table>
        <div>
            <UiButton @click="addRole">Create</UiButton>
        </div>
    </div>
</template>

<script setup lang="ts">
import HeaderRow from "~/components/ui/table/HeaderRow.vue";
import Table from "~/components/ui/table/Table.vue";
import HeaderCell from "~/components/ui/table/HeaderCell.vue";
import ContentRow from "~/components/ui/table/ContentRow.vue";
import {Popup, PopupSize, usePopup} from "~/components/ui/popup/Popup";
import RoleAdd from "~/role/RoleAdd.vue";
import type {Role} from "~/role/Role";
import ContentCell from "~/components/ui/table/ContentCell.vue";
import RoleDelete from "~/role/RoleDelete.vue";

const roles = useGet<Role[]>("/api/realms/" + useRoute().params.realm_key + "/roles");

function addRole()
{
    const callback = (role: Role) => {
        if (roles.value.data)
        {
            roles.value.data.push(role);
        }
    }
    usePopup().open(Popup.component(RoleAdd).setConfig({ heading: 'Add Role', size: PopupSize.MEDIUM, callback: callback }))
}

function deleteRole(role: Role)
{
    usePopup().open(Popup.component<Role>(RoleDelete).setConfig({ heading: 'Add Role', size: PopupSize.MEDIUM }).setPayload(role))
}
</script>

<style scoped>

</style>