<template>
    <div class="content-l" v-if="user.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>
        <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";

const user = useGet<User>("/api/realms/" + useRoute().params.realm_key + "/users/" + useRoute().params.user_id);
</script>

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