<template>
  <div style="position: relative" class="text-normal bg-curve my-auto">
    <div
      style="width: 90%"
      class="text-center text-white py-10 mx-auto my-auto"
      v-if="
        getUsername == '' || getUsername == null || getUsername == undefined
      "
    >
      <div
        class="text-subtitle mx-10 text-center box-order mx-auto my-5 d-none"
        style="color: #ffffff"
      >
        ขั้นตอนที่
        <v-avatar color="#f4c03f" class="text-subtitle">2</v-avatar>
      </div>
      <!-- <div class="text-title my-3">มาลองสร้างตัวตนสมัคร สว.</div> -->
      <div class="mb-8">
        ลงทะเบียนแสดงตัวตน / ค้นหาผู้แสดงตนเป็นผู้สมัคร สว.
      </div>

      <v-btn
        elevated
        color="#f4c03f"
        class="text-normal btn-w"
        height="85"
        width="470"
        to="/forms"
      >
        <v-img
          :aspect-ratio="1"
          src="../assets/Group 23.png"
          width="80"
          style="position: absolute; bottom: -40px; left: 0"
        ></v-img>
        <span class="text-normal"> ลงทะเบียนผู้สมัคร</span>
      </v-btn>
    </div>
    <div class="text-center text-white pb-20 mx-auto" style="width: 90%">
      <div v-if="getUsername" class="mt-10">
        <div class="text-title my-3">ค้นหาผู้แสดงตนเป็นผู้สมัคร สว.</div>
        <div class="mb-8">
          ค้นหาผู้แสดงตนเป็นผู้สมัคร สว. ใน จังหวัด/อำเภอ ที่ตัวเองเป็นผู้แสดงตน
        </div>
      </div>
      <v-btn
        elevated
        color="#DD6C31"
        class="text-normal btn-w"
        height="85"
        width="470"
        to="/search"
      >
        <v-img
          :aspect-ratio="1"
          src="../assets/search.png"
          width="100"
          style="position: absolute; bottom: -30px; right: -10px"
        ></v-img>
        <span class="text-normal"> ค้นหาผู้สมัคร สว.</span>
      </v-btn>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["getUsername"]),
  },
};
</script>
<style>
.bg-green-curve {
  background-image: url("/src/assets/Rectangle\ 3.png");
  min-height: 530px;
  height: auto;
  background-position: center bottom;
  background-color: white;
  background-size: cover;
  /* background: #2b2b26 0% 0% no-repeat padding-box; */
}
.bg-green-black {
  /* min-height: 600px; */
  height: auto;
  background-color: #4c884c;
  /* background: #2b2b26 0% 0% no-repeat padding-box; */
}
.border-green {
  border-right: 5px solid #b2c573;
}
@media only screen and (min-width: 0px) and (max-width: 700px) {
  .bg-green-curve {
    min-height: 420px;
    background-position: center bottom;
  }
  .btn-w.v-btn {
    width: 370px !important;
  }
}
</style>
