<template>
  <div class="col-12 row q-pb-sm">
    <div class="col-12 text-top0 items-center q-pa-md">
      เกณฑ์การประเมินความคาดหวัง
    </div>
    <div v-if="$q.screen.gt.xs" class="q-gutter-sm row">
      <div class="col-12 row">
        <div class="col-2 row justify-center">
          <i
            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
            aria-hidden="true"
            role="presentation"
            >grade</i
          >
        </div>
        <div class="q-pl-md col-3">ต่ำกว่าความคาดหวังมาก</div>
        <div class="q-pl-md col-7">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 1</div>
      </div>
      <div class="col-12 row">
        <div class="col-2 row justify-center">
          <i
            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
            aria-hidden="true"
            role="presentation"
            >grade</i
          >
          <i
            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6"
            aria-hidden="true"
            role="presentation"
            >grade</i
          >
        </div>
        <div class="q-pl-md col-3">ต่ำกว่าความคาดหวังค่อนข้างมาก</div>
        <div class="q-pl-md col-7">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 2</div>
      </div>
      <div class="col-12 row">
        <div class="col-2 row justify-center">
          <i
            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
            aria-hidden="true"
            role="presentation"
            >grade</i
          >
          <i
            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6"
            aria-hidden="true"
            role="presentation"
            >grade</i
          >
          <i
            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue"
            aria-hidden="true"
            role="presentation"
            >grade</i
          >
        </div>
        <div class="q-pl-md col-3">เป็นไปตามความคาดหวัง</div>
        <div class="q-pl-md col-7">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 3</div>
      </div>
      <div class="col-12 row">
        <div class="col-2 row justify-center">
          <i
            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
            aria-hidden="true"
            role="presentation"
            >grade</i
          >
          <i
            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6"
            aria-hidden="true"
            role="presentation"
            >grade</i
          >
          <i
            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue"
            aria-hidden="true"
            role="presentation"
            >grade</i
          >
          <i
            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-9"
            aria-hidden="true"
            role="presentation"
            >grade</i
          >
        </div>
        <div class="q-pl-md col-3">สูงว่าความคาดหวังค่อนข้างมาก</div>
        <div class="q-pl-md col-7">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 4</div>
      </div>
      <div class="col-12 row">
        <div class="col-2 row justify-center">
          <i
            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
            aria-hidden="true"
            role="presentation"
            >grade</i
          >
          <i
            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6"
            aria-hidden="true"
            role="presentation"
            >grade</i
          >
          <i
            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue"
            aria-hidden="true"
            role="presentation"
            >grade</i
          >
          <i
            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-9"
            aria-hidden="true"
            role="presentation"
            >grade</i
          >
          <i
            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-10"
            aria-hidden="true"
            role="presentation"
            >grade</i
          >
        </div>
        <div class="q-pl-md col-3">สูงกว่าความคาดหวังมาก</div>
        <div class="q-pl-md col-7">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 5</div>
      </div>
    </div>
    <div v-else class="col-12">
      <div class="row q-col-gutter-sm">
        <div class="col-12">
          <q-card bordered style="border-radius: 20px">
            <div class="q-pa-sm text-center bg-blue-1">
              <span class="text-weight-medium">
                <i
                  class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
                  aria-hidden="true"
                  role="presentation"
                  >grade</i
                ></span
              >
            </div>
            <q-separator />
            <q-card-section class="q-pa-none">
              <q-list>
                <q-item class="q-pa-none text-center">
                  <q-item-section>
                    <q-item-label>ต่ำกว่าความคาดหวังมาก</q-item-label>
                  </q-item-section>
                  <q-separator color="grey-3" vertical />
                  <q-item-section class="q-ma-none">
                    <q-item-label>มีคะแนนเฉลี่ยที่ระดับ 1</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-card-section>
          </q-card>
        </div>
        <div class="col-12">
          <q-card bordered style="border-radius: 20px">
            <div class="q-pa-sm text-center bg-blue-1">
              <span class="text-weight-medium">
                <i
                  class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
                  aria-hidden="true"
                  role="presentation"
                  >grade</i
                >
                <i
                  class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6"
                  aria-hidden="true"
                  role="presentation"
                  >grade</i
                ></span
              >
            </div>
            <q-separator />
            <q-card-section class="q-pa-none">
              <q-list>
                <q-item class="q-pa-none text-center">
                  <q-item-section>
                    <q-item-label>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-item-label>
                  </q-item-section>
                  <q-separator color="grey-3" vertical />
                  <q-item-section class="q-ma-none">
                    <q-item-label>มีคะแนนเฉลี่ยที่ระดับ 2</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-card-section>
          </q-card>
        </div>
        <div class="col-12">
          <q-card bordered style="border-radius: 20px">
            <div class="q-pa-sm text-center bg-blue-1">
              <span class="text-weight-medium">
                <i
                  class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
                  aria-hidden="true"
                  role="presentation"
                  >grade</i
                >
                <i
                  class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6"
                  aria-hidden="true"
                  role="presentation"
                  >grade</i
                >
                <i
                  class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue"
                  aria-hidden="true"
                  role="presentation"
                  >grade</i
                ></span
              >
            </div>
            <q-separator />
            <q-card-section class="q-pa-none">
              <q-list>
                <q-item class="q-pa-none text-center">
                  <q-item-section>
                    <q-item-label>เป็นไปตามความคาดหวัง</q-item-label>
                  </q-item-section>
                  <q-separator color="grey-3" vertical />
                  <q-item-section class="q-ma-none">
                    <q-item-label>มีคะแนนเฉลี่ยที่ระดับ 3</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-card-section>
          </q-card>
        </div>
        <div class="col-12">
          <q-card bordered style="border-radius: 20px">
            <div class="q-pa-sm text-center bg-blue-1">
              <span class="text-weight-medium">
                <i
                  class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
                  aria-hidden="true"
                  role="presentation"
                  >grade</i
                >
                <i
                  class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6"
                  aria-hidden="true"
                  role="presentation"
                  >grade</i
                >
                <i
                  class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue"
                  aria-hidden="true"
                  role="presentation"
                  >grade</i
                >
                <i
                  class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-9"
                  aria-hidden="true"
                  role="presentation"
                  >grade</i
                ></span
              >
            </div>
            <q-separator />
            <q-card-section class="q-pa-none">
              <q-list>
                <q-item class="q-pa-none text-center">
                  <q-item-section>
                    <q-item-label>สูงว่าความคาดหวังค่อนข้างมาก</q-item-label>
                  </q-item-section>
                  <q-separator color="grey-3" vertical />
                  <q-item-section class="q-ma-none">
                    <q-item-label>มีคะแนนเฉลี่ยที่ระดับ 4</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-card-section>
          </q-card>
        </div>
        <div class="col-12">
          <q-card bordered style="border-radius: 20px">
            <div class="q-pa-sm text-center bg-blue-1">
              <span class="text-weight-medium">
                <i
                  class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
                  aria-hidden="true"
                  role="presentation"
                  >grade</i
                >
                <i
                  class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6"
                  aria-hidden="true"
                  role="presentation"
                  >grade</i
                >
                <i
                  class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue"
                  aria-hidden="true"
                  role="presentation"
                  >grade</i
                >
                <i
                  class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-9"
                  aria-hidden="true"
                  role="presentation"
                  >grade</i
                >
                <i
                  class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-10"
                  aria-hidden="true"
                  role="presentation"
                  >grade</i
                ></span
              >
            </div>
            <q-separator />
            <q-card-section class="q-pa-none">
              <q-list>
                <q-item class="q-pa-none text-center">
                  <q-item-section>
                    <q-item-label>สูงกว่าความคาดหวังมาก</q-item-label>
                  </q-item-section>
                  <q-separator color="grey-3" vertical />
                  <q-item-section class="q-ma-none">
                    <q-item-label>มีคะแนนเฉลี่ยที่ระดับ 5</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-card-section>
          </q-card>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.text-top0 {
  font-weight: 600;
  padding-bottom: 8px;
  color: rgb(70, 68, 68);
}
</style>
