<template>
    <div class="content-l" v-if="user.data && roleAssignments.data">
        <p class="left-center" style="gap: 0.25rem"><span class="link" @click="useRouter().push('/realms/' + useRoute().params.realm_key + '/users')">Users</span><UiIcon>chevron_right</UiIcon><span>{{user.data.email}}</span></p>
        <div class="col-2">
            <div class="tile-m">
                <h3>E-Mail</h3>
                <p>{{user.data.email}}</p>
            </div>
            <div class="tile-m">
                <h3>Name</h3>
                <p>{{user.data.firstname}} {{user.data.lastname}}</p>
            </div>
        </div>
        <UserRoleDisplay :role-assignments="roleAssignments.data"></UserRoleDisplay>
        <div class="left-center">
            <UiButton icon="edit" reverse>Edit</UiButton>
            <UiButton icon="delete" reverse>Delete</UiButton>
        </div>
    </div>
</template>

<script setup lang="ts">
import type {User} from "~/user/User";
import HeaderRow from "~/components/ui/table/HeaderRow.vue";
import HeaderCell from "~/components/ui/table/HeaderCell.vue";
import ContentRow from "~/components/ui/table/ContentRow.vue";
import ContentCell from "~/components/ui/table/ContentCell.vue";
import Table from "~/components/ui/table/Table.vue";
import type {RoleAssignment} from "~/role-assignment/RoleAssignment";
import {Popup, PopupSize, usePopup} from "~/components/ui/popup/Popup";
import type {Role} from "~/role/Role";
import UserRoleAssignment from "~/user/UserRoleAssignment.vue";
import UiButton from "~/components/ui/UiButton.vue";
import UserRoleDisplay from "~/user/UserRoleDisplay.vue";

const realmKey = useRoute().params.realm_key;
const userId = useRoute().params.user_id;

const user = useGet<User>("/api/realms/" + realmKey + "/users/" + userId);
const roleAssignments = useGet<RoleAssignment>("/api/realms/" + realmKey + "/users/" + userId + "/role-assignments");
</script>

<style scoped>
.link {
    border-bottom: 1px solid black;
}
</style>