<template>

  <q-page class="flex bg-image flex-center">
  <div class="q-pa-md row justify-center items-center">
    <q-avatar size="300px" class="bg-white text-purple" >

            <img src="https://img.freepik.com/free-photo/flags-russia_1232-3062.jpg?t=st=1690649797~exp=1690650397~hmac=f8f0497df1d20075c4c58ebd9af6a6b4a99b511a82bc2d15c2b742cbb5adae99" class="absolute-center shadow-10">

    </q-avatar>
  </div >
  <q-card-section>
  <div class="text-center q-pt-lg">
    <div   class="col text-h6 ellipsis">
    <q-form @submit="submitForm">

      <q-input outlined v-model="email" label="Email" type="email" color="pink" />
      <q-input outlined v-model="phone" label="Phone +7" type="tel" color="pink"/>
      <q-input outlined v-model="surname" label="Surname" color="pink"/>
      <q-input outlined v-model="name" label="Name" color="pink" />
      <q-input outlined v-model="password" label="Password" type="password" color="pink" />
      <q-input outlined v-model="confirmPassword" label="Confirm Password" type="password" color="pink"/>
      <q-btn type="submit" label="Register" class="q-mt-md" color="pink"/>
    </q-form>
  </div>
</div>
</q-card-section>
</q-page>

</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
name: 'RegistrationPage',
data() {
  return {
    email: '',
    phone: '',
    surname: '',
    name: '',
    password: '',
    confirmPassword: ''
  }
},
methods: {
  submitForm() {
    if (this.password !== this.confirmPassword) {
      alert("Passwords don't match");
      return;
    }
},
},
})
</script>

<style scoped>

.bg-image {
background-image: linear-gradient(135deg, #7028e4 0%, #5a0c30 100%);
}

</style>
