{% extends "base.html" %}
{% block title %}User Login{% endblock %}
{% block center_content %}
    <h1 class="display-5 text-center mb-2">User Login</h1>
    <form action="/login" method="POST" class="needs-validation" novalidate>
      <div class="form-group">
        <label for="username">Username</label>
        <input type="text" class="form-control" id="username" name="username" placeholder="Username" value="{{u|escape()|default('')}}" required>
        <div class="invalid-feedback">Please provide a username.</div>
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
        <div class="invalid-feedback">Please provide a password.</div>
      </div>
      <button type="submit" class="btn btn-primary mb-2">Sign in</button>
    </form>
    <div>
        {% for category, message in get_flashed_messages(with_categories=true) %}
            <div class="alert alert-{{category}} alert-dismissable">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                {{ message }}
            </div>
        {% endfor %}
    </div>
    <script>
       window.addEventListener('DOMContentLoaded', function() {
       var forms = document.getElementsByClassName('needs-validation');
       var validation = Array.prototype.filter.call(forms, function(form) {
           form.addEventListener('submit', function(event) {
               if (form.checkValidity() === false) {
                       event.preventDefault();
                       event.stopPropagation();
                   }
                   form.classList.add('was-validated');
               }, false);
           });
       }, false);
    </script>
{% endblock%}