<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 lg5>

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

            <v-toolbar-title>Admin Login</v-toolbar-title>
            <v-spacer></v-spacer>
          </v-toolbar>
           

              <v-card class="elevation-1 pa-1">
                 <v-card-text>
                 <v-flex xs12 sm8 md8 lg8 offset-xs2>   

                   <v-form ref="form" v-model="valid" lazy-validation>                           

                   <v-text-field

                   v-model="username"
                   :rules="nameRules"
                   label="Username"
                   required
                   ></v-text-field>

                <v-text-field

                  :rules="[rules.required, rules.min]"

                  v-model="password"

                  :append-icon="e1 ? 'visibility_off' : 'visibility'"

                  :append-icon-cb="() => (e1 = !e1)"
                  :type="e1 ? 'password' : 'text'"

                  name="input-10-1"
                  label="Password"

                  counter

                ></v-text-field>

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

              </v-card-text>

              <v-flex xs12 sm8 md8 lg8 offset-xs2>   

               <v-checkbox :label="`Remember me`" 

                  v-model="remember"></v-checkbox>

                  <h5 id="fp"> <router-link to="/forgetpassword">Forget Password</router-link></h5>

              </v-flex>
              
               <v-flex class="mt-3 text-md-center">

                  <v-btn round color="black" dark large @click="login" :loading="loading">Login</v-btn>
                  </v-flex>
              </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>
  import axios from 'axios';
  export default {
    data () {
      return {
        e1: true,
        loading: false,
        remember: false,
        valid: false,

        username: '',
        nameRules: [
          v => !!v || 'Username is required',
        //  v => v.length >0 
        ],
        // email: '',
        // erules: {
        //   required: value => !!value || 'This email field is Required.', 
        //   em: v => (v.length > 0 && /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'Email must be valid') 
        // },

        password: '',
        rules: {

          required: value => !!value || 'password is Required.',

          min: v => (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8 || 'Min 8 characters upper case lower case symbol required'
          
        } 

      };
    },
    methods: {
      login () {

        console.log('=clicked==');

        this.loading = true;
        setTimeout(() => {
          this.$router.push('/dashboard');
        }, 1000);

      }

      // created () {
      //   axios.get(`http://jsonplaceholder.typicode.com/posts`)
      //     .then(response => {
            
      //       this.posts = response.data;
      //     })
      //     .catch(e => {
      //       this.errors.push(e);
      //     });
      // }

    }
  };

  </script>
  
  <style scoped lang="css">
    #login{
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      z-index: 0;
    }
  </style>

  <style scoped>

  img{
  position:absolute;
  top:13px;

  left:50px;
  }
  .v-btn--large {
      padding: 0px 84px;

  }

  #fp{
    position: absolute;
    top: 193px;
    right: 128px;

    color: black;

  }

  a{
  color: #696969;
  }

  </style>