{% extends "base.html" %}
{% block title %}Log in{% endblock %}

{% block footer %}

    <script src="/js/hideShowPassword.min.js"></script>
    <script src="/js/app.js"></script>
    
    <script>
        $(document).ready(function () {

            // Show password toggle button
            $('#inputPassword').hideShowPassword({
                show: false,
                innerToggle: 'focus'
            });
        });
    </script>
    
{% endblock %}

{% block body %}

    <h1 class="fw-bold text-center w-50">Log in</h1>
    <form action="/login/create" method="post" id="loginForm">
        <div class="mb-3 w-50">
            <label for="inputEmail" class="form-label fw-bold">Email address</label>
            <input type="email" class="form-control" name="email" id="inputEmail" placeholder="Email address" autofocus
                value="{{ email }}">
        </div>
        <div class="mb-3 w-50">
            <label for="inputPassword" class="form-label fw-bold">Password</label>
            <input type="password" class="form-control" name="password" id="inputPassword" placeholder="password">
        </div>
        <div class="mb-3 form-check">
            <label class="form-check-label" for="remember">
                <input type="checkbox" class="form-check-input"  name="remember_me" id="remember" {% if remember_me %}
                    checked="checked" {% endif %}> Remember me
            </label>
        </div>
    
        <button type="submit" class="btn btn-dark">Log in</button>
        <a href="/password/forgot">Forgot password?</a>
    </form>

{% endblock %}