<%- include('block_inicio') %>

<div class="container-fluid image">
    <br><br><br><br><br><br>
    <div class="row d-flex justify-content-end " style="padding-right: 25%;">
        <div class="column" style="width: 30%; text-align: center;">
            <div style="background: grey; opacity: 0.9; color: rgb(9, 7, 167); 
            margin-bottom: 3%; font-size: 40px; padding: 5%; border-radius: 15px;">
                <!--<h1 class="" style="color:rgb(9, 7, 167);">LOGIN</h1>-->
                LOGIN
            </div>
        
        
        <div class="form-group p-4" style="background:gray; border-radius: 5%; opacity: 0.9; height: auto;">
            <form action="/login" method="POST">
                <input type="text" name="user" class="form-control" placeholder="User" id="user" autocomplete="off">
                <input type="password" name="password" class="form-control mt-2" placeholder="Password" id="password" autocomplete="off">
                <br>
                <button class="btn btn-primary btn-block" id="btn">Enviar</button>
            </form>

            <img src="/img/logo3.png" alt="" style="width: 30%; margin-top:10%;">
        </div>
        
        </div>
    </div><!--row-->
</div>
<%- include('block_end') %>

<style>
    
    .image{
        margin: 0;
        min-height: 100vh;
        background-image: url('/img/Piedra.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }
</style>

<script>
    let btn = document.getElementById('btn');
    let user = document.getElementById('user');
    let password = document.getElementById('password')

    user.onclick = () => {
        user.value = ''
    }
    password.onclick = () => {
        password.value = ''
    }

    btn.onclick = () => {
        let user = document.getElementById('user').value;
        let password = document.getElementById('password').value

        if (user == '' || user == ' ' || user == null) { alert('Error: El Campo NO puede estar vacio'); return false }
        if (password == '' || password == ' ' || password == null) { alert('Error: El Campo NO puede estar vacio'); return false }
    
    }//end
</script>