<template>
    <div class="login">
        <div class="container sm:px-10">
            <div class="block xl:grid grid-cols-2 gap-4">
                <!-- BEGIN: Login Info -->
                <div class="hidden xl:flex flex-col min-h-screen">
                    <a href="" class="-intro-x flex items-center pt-5">
                        <img alt="SIGEP" class="w-6" src="@/assets/logo.svg">
                        <span class="text-white text-lg ml-3">
                            SIGEP
                        </span>
                    </a>
                    <div class="my-auto">
                        <img alt="SIGEP" class="-intro-x w-1/2 -mt-16" src="@/assets/ansa-logo.png">
                        <div class="-intro-x text-white font-medium text-4xl leading-tight mt-10">Sistema de Gestión<br>Integral de Peaje.</div>
                        <div class="-intro-x mt-5 text-lg text-white text-opacity-70 dark:text-slate-400">Administra todo tu sistema desde un solo lugar</div>
                    </div>
                </div>
                <!-- END: Login Info -->
                <!-- BEGIN: Login Form -->
                <div class="h-screen xl:h-auto flex py-5 xl:py-0 my-10 xl:my-0">
                    <div class="my-auto mx-auto xl:ml-20 bg-white dark:bg-darkmode-600 xl:bg-transparent px-5 sm:px-8 py-8 xl:p-0 rounded-md shadow-md xl:shadow-none w-full sm:w-3/4 lg:w-2/4 xl:w-auto">
                        <h2 class="intro-x font-bold text-2xl xl:text-3xl text-center xl:text-left">Iniciar sesión</h2>
                        <div class="intro-x mt-2 text-slate-400 xl:hidden text-center">Sistema de Gestión Integral de Peaje.</div>
                        <div class="intro-x mt-8">
                            <input type="text" class="intro-x login__input form-control py-3 px-4 block" placeholder="Correo electrónico" v-model="user">
                            <input type="password" class="intro-x login__input form-control py-3 px-4 block mt-4" placeholder="Contraseña" v-model="pass">
                        </div>
                        <div class="intro-x flex text-slate-600 dark:text-slate-500 text-xs sm:text-sm mt-4">
                            <div class="flex items-center mr-auto">
                                <input id="remember-me" type="checkbox" class="form-check-input border mr-2">
                                <label class="cursor-pointer select-none" for="remember-me">Recuérdame en este dispositivo</label>
                            </div>
                            <a href="#">¿Olvidaste tu contraseña?</a>
                        </div>
                        <div class="intro-x mt-5 xl:mt-8 text-center xl:text-left">
                            <button class="btn btn-primary py-3 px-4 w-full xl:w-32 xl:mr-3 align-top" @click="doLogin()">Iniciar sesion</button>
                            <button class="btn btn-outline-secondary py-3 px-4 w-full xl:w-32 mt-3 xl:mt-0 align-top" disabled>Registrarse</button>
                        </div>
                        <div class="intro-x mt-10 xl:mt-24 text-slate-600 dark:text-slate-500 text-center xl:text-left">
                            <!-- By signin up, you agree to our <a class="text-primary dark:text-slate-200" href="">Terms and Conditions</a> & <a class="text-primary dark:text-slate-200" href="">Privacy Policy</a> -->
                        </div>
                    </div>
                </div>
                <!-- END: Login Form -->
            </div>
        </div>
    </div>
</template>
<script>

    export default {
        data() {
            return {
                user: 'edgarrojas2904@gmail.com',
                pass: '12345678',
            }
        },
        methods: {
            doLogin() {
                const vm = this
                setTimeout(function(){
                    vm.$router.push('/escritorio')
                }, 1000)
            }
        }
    }

</script>