{% extends base_template|default:"base.htm" %}

{% block local_head %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" integrity="sha256-HtCCUh9Hkh//8U1OwcbD8epVEUdBvuI8wj1KtqMhNkI=" crossorigin="anonymous" />
{% endblock %}

{% block content %}
    <div class="container animated fadeIn mb-5">
        <h1 class="text-center"><b>Welcome to <span class="text-primary">Next</span><span class="text-secondary">Host</span>!</b></h1>
        <h5 class="text-secondary text-center">Please sign in to continue.</h5>
        <br/>
        <div class="row align-items-center justify-content-center">
            <div class="col-center-block col-sm-6" align="center">
                {% if form.errors %}
                    <div class="alert alert-danger">
                        <button type="button" class="close" data-dismiss="alert">×</button>
                        <p>Your username and password didn't match or invalid username provided. Please try again.</p>
                    </div>
                {% endif %}

                {% if next %}
                    {% if user.is_authenticated %}
                        <div class="alert alert-danger">
                            <button type="button" class="close" data-dismiss="alert">×</button>
                            <p>Your account doesn't have access to this page. To proceed,
                                please login with an account that has access.</p>
                        </div>
                    {% else %}
                        <div class="alert alert-danger">
                            <button type="button" class="close" data-dismiss="alert">×</button>
                            <p>Please login to see this page.</p>
                        </div>
                    {% endif %}
                {% endif %}

                <form class="form-signin" method="post" action="{% url 'login' %}">
                    {% csrf_token %}
                    <input type="hidden" name="next" value="{{ request.GET.next }}" />
                    <br>

                    <div class="form-group input-group">
                        <label for="inputUser" class="sr-only">User</label>
                        <div class="input-group-prepend">
                            <span class="input-group-text"> <i class="fa fa-user"></i> </span>
                        </div>
                        <input id="id_username" maxlength="254" name="username" type="text" class="form-control" placeholder="User Name" required autofocus>
                    </div>
                    <div class="form-group input-group">
                        <label for="inputPassword" class="sr-only">Password</label>
                        <div class="input-group-prepend">
                            <span class="input-group-text"> <i class="fa fa-lock"></i> </span>
                        </div>
                        <input id="id_password" name="password" type="password" class="form-control" placeholder="Password" required>
                    </div>
                    <br>
                    <button class="btn btn-lg btn-info btn-block" type="submit">Login</button>
                </form>
            </div>
        </div>
    </div>
    <div class="container animated fadeIn">
        <div class="row align-items-center justify-content-center">
            <a href="{% url 'register' %}">Register new user</a>
        </div>
    </div>

{% endblock %}
