<script setup>
import { collect, model } from "#imports";
const props = defineProps({
  id: {
    type: String,
    required: true
  }
});
const obj = await collect("User", {
  user_id: true,
  username: true,
  first_name: true,
  last_name: true,
  email: true,
  phone: true,
  roles: true,
  status: true,
  join_date: true,
  twoFactorEnabled: true
}).where("user_id", props.id).first();
</script>

<template>
    <div class="row q-gutter-md">
        <q-list dense separator class="col-md-6 col-sm-12">
            <l-item label="Username">{{ obj.username }}</l-item>
            <l-item label="First name">{{ obj.first_name }}</l-item>
            <l-item label="Last name">{{ obj.last_name }}</l-item>
            <l-item label="Email">{{ obj.email }}</l-item>
            <l-item label="Phone">{{ obj.phone }}</l-item>
            <l-item label="Roles">
                <div class="q-gutter-xs float-left">
                    <q-badge v-for="role in obj.roles" :key="role">{{ role
                    }}</q-badge>
                </div>
            </l-item>
            <l-item label="Status">{{ model("User").columns(["status"])[0].format(obj.status) }}</l-item>
            <l-item label="Join date">{{ obj.join_date }}</l-item>
            <l-item label="Two factor authentication">{{ obj.twoFactorEnabled ? "Yes" : "No"
            }}</l-item>
        </q-list>
    </div>
</template>
