<template>
    <v-app id="login">

      <v-toolbar color="grey lighten">

        <v-toolbar-items>

         <img src="/static/ana@2x.png" height="36" alt="ana" />

      </v-toolbar-items>
    </v-toolbar>
      <v-content>
        <v-container fluid fill-height>
          <v-layout align-center justify-center>

            <v-flex xs12 sm8 md6 lg6>

                <v-toolbar color="black" dark>
           <v-spacer></v-spacer>
            
            <v-toolbar-title>Forget Password</v-toolbar-title>
            <v-spacer></v-spacer>
            
          </v-toolbar>

              <v-card class="elevation-1 pa-1">

                <v-card-text>

                  <h5 class="text-md-center"> Not to Worry! Enter to your registered Email ID. </h5>
                  <h5 class="text-md-center"> We'll send you a reset.</h5>
                 <v-flex xs12 sm8 md6 lg6 offset-xs3>                           

                  <v-form class="mt-5">

                    <v-text-field append-icon="person" v-validate="'required|email'" v-model="email" :error-messages="errors.collect('email')" label="E-mail" data-vv-name="email" required ></v-text-field>
                    

                  </v-form></v-flex>

                </v-card-text>
                <v-card-actions>

  
                  
                  <v-flex text-sm-center>
                      <h5> You will recieve an email to continue</h5>
                  <v-btn class="mt-3" round color="black" dark large @click="login">Send Request</v-btn></v-flex>
                  </v-card-actions>

                  <v-snackbar
                   :timeout="timeout"
                   v-model="snackbar"
                   color="green"
                    >
                   {{ text }}
                <v-icon
                 flat
                 @click="snackbar = false"
                 
               >
                close
                 </v-icon>
                 </v-snackbar>

              </v-card>
            </v-flex>
          </v-layout>
        </v-container>
      </v-content>

    <v-footer class="pa-4" color="grey darken-2">

    
    </v-footer>
    </v-app>
  </template>
  <script>
  export default {
    data: () => ({

      text: 'Link send to your Email address',
      snackbar: false,
      timeout: 1000,

      loading: false,

      email: ''

    }),
  
    methods: {
      login () {

        // this.loading = true;
        this.snackbar = true;

        setTimeout(() => {
          this.$router.push('/');
        }, 1000);
      }
    }
  
  };
  </script>
  <style scoped lang="css">
    #login {
      height: 50%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      z-index: 0;
    }

  img{
  position:absolute;
  top:13px;
  left:50px;
  }
  .v-btn--large {
      padding: 0px 74px;
  }

  </style>