<script setup lang="ts">
import { useRouter } from "vue-router";

import TabMain from "@/modules/04_registryNew/components/detail/TabMain.vue";

const router = useRouter();
</script>
<template>
  <div class="row items-center q-gutter-sm">
    <div class="toptitle text-dark row items-center q-py-xs">
      <q-btn
        icon="mdi-arrow-left"
        unelevated
        round
        dense
        flat
        color="primary"
        class="q-mr-sm"
        @click="router.go(-1)"
      />
      ทะเบียนประวัติ
    </div>
    <q-space />
    <q-btn-dropdown
      size="16px"
      rounded
      unelevated
      color="grey-4"
      text-color="red"
      icon="mdi-home-export-outline"
      dropdown-icon="mdi-chevron-down"
    >
      <q-list>
        <q-item clickable v-close-popup>
          <q-item-section avatar>
            <q-avatar icon="folder" color="primary" text-color="white" />
          </q-item-section>
          <q-item-section>
            <q-item-label>Photos</q-item-label>
            <q-item-label caption>February 22, 2016</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-icon name="info" color="amber" />
          </q-item-section>
        </q-item>

        <q-item clickable v-close-popup>
          <q-item-section avatar>
            <q-avatar icon="assignment" color="secondary" text-color="white" />
          </q-item-section>
          <q-item-section>
            <q-item-label>Vacation</q-item-label>
            <q-item-label caption>February 22, 2016</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-icon name="info" color="amber" />
          </q-item-section>
        </q-item>
      </q-list>
    </q-btn-dropdown>
    <q-btn
      unelevated
      round
      color="grey-4"
      text-color="primary"
      icon="mdi-file-eye-outline"
    />
  </div>

  <q-card>
    <div class="column" style="height: 150px; position: relative">
      <div class="col justify-center"></div>
      <div class="absolute-center-left q-ml-lg">
        <q-avatar size="130px">
          <img src="https://cdn.quasar.dev/img/avatar2.jpg" />
        </q-avatar>
        <q-btn
          round
          color="white"
          text-color="primary"
          icon="mdi-pencil-outline"
          style="position: absolute; bottom: 0; right: 0"
        />
      </div>
      <div class="col bg-teal-2"></div>
    </div>
  </q-card>

  <q-card class="q-mt-md">
    <TabMain />
  </q-card>
</template>

<style scoped>
.absolute-center-left {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>
