<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-4">
                  <div class="custom-input-align">

                  <v-text-field 

                    class="text-md-center"
                    v-validate="'required|email'" 

                    v-model="userForgotPasswordcredentials.email" 

                    :error-messages="errors.collect('email')" 
                    label="Enter Your email ID" 
                    data-vv-name="email" 

                    required>
                  </v-text-field>

                  </div>

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

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

  
                  
                  <v-flex text-sm-center>

                  <v-btn round class="mt-1" 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: () => ({

      userForgotPasswordcredentials: {},

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

      loading: false,

      email: ''

    }),
  
    methods: {
      login () {

        console.log('=clicked==', this.userForgotPasswordcredentials);

        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>