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

/** component */
import Government from "@/modules/10_registry/02_Government/01_Government.vue";
import Discipline from "@/modules/10_registry/02_Government/02_Discipline.vue";
import Leave from "@/modules/10_registry/02_Government/03_Leave.vue";
import Duty from "@/modules/10_registry/02_Government/04_Duty.vue";
import Actposition from "@/modules/10_registry/02_Government/05_Actposition.vue";
import Assistance from "@/modules/10_registry/02_Government/06_Assistance.vue";
import Position from "@/modules/10_registry/02_Government/07_Position.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'}`">
    <Government />
    <Position />
    <Actposition />
    <Assistance />
    <Discipline />
    <Leave />
    <Duty />
  </div>
</template>
<style scoped>
.mobileClass {
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
}
</style>
