<template>
  <q-card bordered class="bg-grey-1 q-pa-md">
    <div class="row q-col-gutter-y-sm">
      <div class="col-12 col-sm-12 col-md-6">
        <div class="row q-col-gutter-y-sm">
          <div class="col-5 text-grey-6 text-weight-medium">สังกัด</div>
          <div class="col-7 text-html">
            <q-skeleton class="q-mb-sm" type="text" />
          </div>
          <div class="col-5 text-grey-6 text-weight-medium">
            <q-skeleton class="q-mb-sm" type="text" />
          </div>
          <div class="col-7">
            <q-skeleton class="q-mb-sm" type="text" />
          </div>

          <div class="col-5 text-grey-6 text-weight-medium">
            <q-skeleton class="q-mb-sm" type="text" />
          </div>
          <div class="col-7">
            <q-skeleton class="q-mb-sm" type="text" />
          </div>
        </div>
      </div>

      <div class="col-12 col-sm-12 col-md-6">
        <div class="row q-col-gutter-y-sm">
          <div class="col-5 text-grey-6 text-weight-medium">
            <q-skeleton class="q-mb-sm" type="text" />
          </div>
          <div class="col-7">
            <q-skeleton class="q-mb-sm" type="text" />
          </div>
          <div class="col-5 text-grey-6 text-weight-medium">
            <q-skeleton class="q-mb-sm" type="text" />
          </div>
          <div class="col-7">
            <q-skeleton class="q-mb-sm" type="text" />
          </div>
          <div class="col-5 text-grey-6 text-weight-medium">ด้าน/สาขา</div>
          <div class="col-7">
            <q-skeleton class="q-mb-sm" type="text" />
          </div>
        </div>
      </div>
    </div>
    <q-separator class="q-my-md" />
    <div class="row">
      <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
        <div class="row">
          <div class="col-6 text-grey-6 text-weight-medium">
            วันที่สั่งบรรจุ
          </div>
          <div class="col-6">
            <q-skeleton class="q-mb-sm" type="text" />
          </div>
        </div>

        <div class="row">
          <div class="col-6 text-grey-6 text-weight-medium">
            วันที่เริ่มปฏิบัติราชการ
          </div>
          <div class="col-6">
            <q-skeleton class="q-mb-sm" type="text" />
          </div>
        </div>

        <div class="row">
          <div class="col-6 text-grey-6 text-weight-medium">
            วันครบเกษียณอายุ
          </div>
          <div class="col-6">
            <q-skeleton class="q-mb-sm" type="text" />
          </div>
        </div>
        <div class="row">
          <div class="col-6 text-grey-6 text-weight-medium">
            วันที่เกษียณอายุราชการตามกฏหมาย
          </div>
          <div class="col-6">
            <q-skeleton class="q-mb-sm" type="text" />
          </div>
        </div>
      </div>

      <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
        <div class="row">
          <div class="col-5 text-grey-6 text-weight-medium">อายุราชการ</div>
          <div class="col-7">
            <q-skeleton class="q-mb-sm" type="text" />
          </div>
        </div>
        <div class="row">
          <div class="col-5 text-grey-6 text-weight-medium">ขาดราชการ</div>
          <div class="col-7">
            <q-skeleton class="q-mb-sm" type="text" />
          </div>
        </div>
        <div class="row">
          <div class="col-5 text-grey-6 text-weight-medium">
            อายุราชการเกื้อกูล
          </div>
          <div class="col-7">
            <q-skeleton class="q-mb-sm" type="text" />
          </div>
        </div>
      </div>
    </div>
  </q-card>
</template>
