<template>
  <div class="flex flex-col items-center justify-center bg-gradient-to-b from-green-100 to-green-300 pb-28 pr-4 pl-4">
    <div class="max-w-md flex flex-col items-center z-60" >
        <div class="relative flex items-end justify-center z-30 px-[10px] mt-[10px]">
          <img
            src="/images/logo.png"
            :alt="selectedCharacter.name"
            class="object-contain relative z-30 pb-0"
          />
        </div>
        <h2 class="mt-6 text-xl font-bold text-gray-700">
          {{ selectedCharacter.name }}
        </h2>
        <div class="relative w-40 h-50 flex items-end justify-center z-30 px-[10px]">
          <img
            :src="selectedProfile.img"
            :alt="selectedCharacter.name"
            class="w-40 h-60 object-contain relative z-30 pb-12"
          />
        </div>
     </div>
    <!-- Character Selection -->
     <div class="w-full flex flex-col items-center z-60" >
        <div class="w-full ">
          <div class="mb-4">
              <input type="text" placeholder="Real Name"
              class="w-full h-[50px] px-4 py-2 text-grey-700 bg-white border border-grey-300 rounded-2xl 
              focus:outline-none focus:ring focus:ring-grey-100 focus:border-grey-300 shadow-lg"
              />
          </div>
          <div class="mb-4">
              <input type="text" placeholder="Email"
              class="w-full h-[50px] px-4 py-2 text-grey-700 bg-white border border-grey-300 rounded-2xl 
              focus:outline-none focus:ring focus:ring-grey-100 focus:border-grey-300 shadow-lg"
              />
          </div>
          <div class="mb-4">
              <input type="text" placeholder="Phone"
              class="w-full h-[50px] px-4 py-2 text-grey-700 bg-white border border-grey-300 rounded-2xl 
              focus:outline-none focus:ring focus:ring-grey-100 focus:border-grey-300 shadow-lg"
              />
          </div>
          <div >
              <input type="text" placeholder="Password"
              class="w-full h-[50px] px-4 py-2 text-grey-700 bg-white border border-grey-300 rounded-2xl 
              focus:outline-none focus:ring focus:ring-grey-100 focus:border-grey-300 shadow-lg"
              />
          </div>
          <button class="w-full mt-6 h-[60px] bg-lime-500 border border-transparent rounded-lg px-4 py-2 text-sm font-medium text-white hover:bg-lime-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500"> R E G I S T E R </button>
          <div class="flex items-center justify-center  mt-4">
            <router-link  to ="/login">
            <span class="font-bold text-sm text-blue-600">L O G I N</span>
            </router-link>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      characters: [
        { name: "Bear", img: "../images/char/bear.png" },
        { name: "Rabbit", img: "../images/char/rabbit.png" },
        { name: "Fox", img: "../images/char/fox.png" },
        { name: "Brown Bear", img: "../images/char/brownbear.png" },
        { name: "Lion", img: "../images/char/lion.png" },
        { name: "Monkey", img: "../images/char/monkey.png" },
        { name: "Pig", img: "../images/char/pig.png" },
        { name: "Sheep", img: "../images/char/sheep.png" },
        { name: "Tiger", img: "../images/char/tiger.png" },
      ],

      profiles : [
        {name : "profile", img: "/images/propic-001.svg"},
        {name : "profile", img: "/images/propic-blank.svg"},
      ],

      selectedCharacter: { name: "Tiger", img: "../images/char/tiger.png" },
      showModal:false,
      selectedProfile : {name : "profile", img: "/images/propic-001.svg"},
      modalType : "profile",
    };
  },
  methods: {
    clickCharacter(char) {
      this.selectedCharacter = char;
      this.showModal = false;
    },
    changeAva(type) {
      this.modalType = type;
      this.showModal = true;
    },
     profileListSelected(profile) {
      this.selectedProfile = profile;
      this.showModal = false;
    }
  },
};
</script>
