<script setup lang="ts">
const type = defineModel("type", {
  type: String,
  default: "",
});
</script>

<template>
  <div class="col-12" v-if="type === 'couple'">
    <q-card bordered class="bg-grey-1 q-pa-sm">
      <div class="row">
        <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 type="text" />
            </div>
          </div>
          <div class="row">
            <div class="col-5 text-grey-6 text-weight-medium">
              เลขประจำตัวประชาชน
            </div>
            <div class="col-7">
              <q-skeleton type="text" />
            </div>
          </div>

          <div class="row">
            <div class="col-5 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
            <div class="col-7">
              <q-skeleton type="text" />
            </div>
          </div>

          <div class="row">
            <div class="col-5 text-grey-6 text-weight-medium">นามสกุลเดิม</div>
            <div class="col-7">
              <q-skeleton 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 type="text" />
            </div>
          </div>
          <div class="row">
            <div class="col-5 text-grey-6 text-weight-medium">อาชีพ</div>
            <div class="col-7">
              <q-skeleton type="text" />
            </div>
          </div>
        </div>
      </div>
    </q-card>
  </div>

  <div class="col-12" v-else>
    <q-card bordered class="bg-grey-1 q-pa-sm">
      <div class="row">
        <div class="col-12 col-sm-12 col-md-12 q-gutter-y-sm">
          <div class="row">
            <div class="col-5 text-grey-6 text-weight-medium">
              เลขประจำตัวประชาชน
            </div>
            <div class="col-7">
              <q-skeleton type="text" />
            </div>
          </div>

          <div class="row">
            <div class="col-5 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
            <div class="col-7">
              <q-skeleton type="text" />
            </div>
          </div>

          <div class="row">
            <div class="col-5 text-grey-6 text-weight-medium">
              สถานภาพการมีชีวิต
            </div>
            <div class="col-7">
              <q-skeleton type="text" />
            </div>
          </div>

          <div class="row">
            <div class="col-5 text-grey-6 text-weight-medium">อาชีพ</div>
            <div class="col-7">
              <q-skeleton type="text" />
            </div>
          </div>
        </div>
      </div>
    </q-card>
  </div>
</template>
