<script setup lang="ts">
import { getUsername, logout } from '@/services/KeyCloakService'
import { ref } from 'vue'
const dropdown = ref<boolean>(false)
const name = ref<string>(getUsername())
</script>

<template>
  <div
    @click="() => (dropdown = !dropdown)"
    class="row q-px-xs cursor"
    id="app-toolbar-title"
  >
    <div class="col">
      <q-avatar class="q-mt-xs hideprofile">
        <img src="../assets/profile.png" />
      </q-avatar>
    </div>

    <div>
      <div class="row q-pl-sm">
        <span class="text-body1" style="font-size: 13px">
          {{ name }}
        </span>
      </div>
      <div class="row q-pl-sm">
        <span class="text-caption text-grey" style="font-size: 10px">
          เจ้าหน้าที่
        </span>
      </div>
    </div>
  </div>
  <q-btn-dropdown stretch flat v-model="dropdown">
    <q-list>
      <q-item clickable v-close-popup tabindex="0" @click="() => logout()">
        <q-item-section avatar>
          <q-avatar
            caption
            icon="logout"
            color="primary"
            text-color="white"
            size="1.5rem"
          >
          </q-avatar>
        </q-item-section>
        <q-item-section>
          <q-item-label>Logout</q-item-label>
        </q-item-section>
      </q-item>
    </q-list>
  </q-btn-dropdown>
</template>

<style lang="scss" scoped>
@media only screen and (max-width: 450px) {
  .hideprofile {
    display: none;
  }
}

.cursor {
  cursor: pointer;
}
</style>
