{% extends "template.html" %}
{% block title %}Login{% endblock %}
{% block head %}
    {{ super() }}

    <style type="text/css">

    .box {
        box-sizing: border-box;
        width: 350px;
        box-shadow: 1px 1px 3px #DDD;
        margin: 50px auto;
        line-height: 20px;
        display: block;
        border: 1px solid #EAEAEA;
        padding: 20px;
        font-family: 'Open Sans', 'Helvetica', sans-serif;
        font-size: 14px;
    }

    .errors {
        display: none;
        box-shadow: 1px 1px 3px red;
    }

    .error {

    }

    #container {
        width: 100%;
        min-height: 100vh;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding: 15px;
        position: relative;
        z-index: 1;
    }

    img.logo-img {
        max-width: 250px;
        max-height: 100px;
    }

    .form-input {
        width: 100%;
    }
    </style>
{% endblock %}
{% block content %}
    <div class="container">
        <div class="box errors" id="errors">
            
        </div>

        <div class="box" id="login-box">
            <div class="wrap-image text-center mb-4">
                <img class="logo-img" src="/static/img/dish.svg" alt="Company logo" />
            </div>
            <div class="mb-2 row">
                <div class="col-12">
                    Log In to PyLunch
                </div>
            </div>

            <div class="row wrap-input validate-input mb-2"
                    data-validate="Valid username is required:">
                    <div class="col-12">
                        <input class="login-email form-input" type="text" id="username" name="username" placeholder="Username">
                    </div>
            </div>

            <div class="row wrap-input validate-input mb-4" data-validate="Password is required">
                <div class="col-12">
                    <input class="login-password form-input" id="password" type="password" name="password" placeholder="Password">
                </div>
            </div>

            <div class="row check-forgot-section mb-4">
                <div class="form-checkbox col-6">
                    <input class="input-checkbox" id="login-checkbox" type="checkbox" name="remember_me">
                    <label class="label-checkbox" for="login-checkbox">
                        Remember me
                    </label>
                </div>
                <div class="forgot-password col-6">
                    <a class="link" href="#">Forgot password</a>
                </div>
            </div>

            <div class="wrap-button mb-3 row">
                <div class="col-12">
                    <button class="submit-button form-input btn btn-primary" id="submit">
                        Log In
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
<script>
    $(document).ready(function () {
        postJson("/admin/token/valid", {}).done(function(result) {
            console.log("Success Result", result);
                    window.location.href = '/admin/index';
            }).fail(function(result){
                    console.log("Fail Result", result);
            });

        $('#submit').on('click', function() {
            var username = $('#username').val();
            var password = $('#password').val();
            var data = {
                username: username,
                password: password
            };
            console.log("Login: ", data);
            postJson("/admin/token/auth", data)
            .done(function(result) {
                console.log("Success Result", result);
                window.location.href = '/admin/index';
            }).fail(function(result){
                res = result.responseJSON
                message = res['message']
                setError(message);
                console.log("Fail Result", message);
            });
        });

        function setError(error) {
            var errors = $("#errors");
            console.log(`Setting error`, error);
            
            errors.css("display", "block");
            errors.html(`<p class=\"error\">${error}</p>`);
        }
    });
</script>
{% endblock %}