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

/** component */
import Certificate from "@/modules/10_registry/04_Achievement/01_Certificate.vue";
import Training from "@/modules/10_registry/04_Achievement/02_Training.vue";
import Insignia from "@/modules/10_registry/04_Achievement/03_Insignia.vue";
import Honor from "@/modules/10_registry/04_Achievement/04_Honor.vue";
import Assessments from "@/modules/10_registry/04_Achievement/05_Assessments.vue";
import DevelopmentPlan from "@/modules/10_registry/04_Achievement/06_DevelopmentPlan.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'}`">
    <Certificate />
    <Training />
    <Insignia />
    <Honor />
    <Assessments />
    <DevelopmentPlan />
  </div>
</template>
<style scoped>
.mobileClass {
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
}
</style>
