<template>
  <div class="flex flex-col items-center justify-center bg-gradient-to-b from-green-100 to-green-300">
    <div class="w-full max-w-md flex flex-col items-center z-60 mt-10">
        <div class="relative flex items-end justify-center z-30">
          <img
            src="/images/logo.png"
            :alt="selectedCharacter.name"
            class="object-contain relative z-30 pb-0"
          />
        </div>
        <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"
          />
        </div>
     </div>
    <!-- Character Selection -->
     <div class="w-full flex flex-col items-center z-60">
        <div class="w-full p-4">
          <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"
              />
          </div>
          <div class="mb-4">
              <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"
              />
          </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="w-full flex items-center justify-center mt-2">
            <router-link to="/register">
              <span class="cursor-pointer justify-center text-center text-sm mt-2 text-blue-600 font-bold">R E G I S T E R</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>
