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

/** component */
import Information from "@/modules/10_registry/01_Information/01_Information.vue";
import ChangeName from "@/modules/10_registry/01_Information/02_ChangeName.vue";
import Address from "@/modules/10_registry/01_Information/03_Address.vue";
import Family from "@/modules/10_registry/01_Information/04_Family.vue";
import Educations from "@/modules/10_registry/01_Information/05_Educations.vue";
import Ability from "@/modules/10_registry/01_Information/06_Ability.vue";

const router = useRouter();
</script>

<template>
  <div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
    <div class="toptitle text-white col-12 row items-center">
      <q-btn
        icon="mdi-arrow-left"
        unelevated
        round
        dense
        flat
        color="primary"
        class="q-mr-sm"
        @click="router.push('/registry')"
      />
      <div>ข้อมูลส่วนตัว</div>
    </div>
  </div>

  <div :class="`row q-my-sm ${$q.screen.gt.xs ? '' : 'mobileClass'}`">
    <Information />
    <ChangeName />
    <Address />
    <Family />
    <Educations />
    <Ability />
  </div>
</template>

<style scoped>
.mobileClass {
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
}
</style>
