{% load crispy_forms_tags %}
{% load static %}
<!DOCTYPE html>
<html>

<head>
    <!-- Bootstrap core CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
    <title>roo.me - Login!</title>
</head>

<body>

    <section>
        {% if messages %}
        {% for message in messages %}
        <div class="alert alert-{{message.tags}} alert-dismissible fade show" role="alert">
            {{message}} <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        {% endfor %}
        {% endif %}

        <div class="text-box">
            <h1>Login now!</h1>
            <div class="card" style="color: rgb(0, 0, 0); background: rgba(252, 252, 252, 0.3); width: 500px;">
                <div class="card-body">
                    <form method="POST">
                        {% csrf_token %}
                        <fieldset class="form-group">
                            {{form|crispy}}
                        </fieldset>
                        <div class="form-group">
                            <button class="btn btn-primary mt-3" type="submit">Lets Go!</button>
                            <p class="float-right mt-3"><a href="{% url 'register' %}" style="color: rgb(39, 20, 167);">I don't have an account</a></p>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8"
    crossorigin="anonymous"></script>
    
</body>

</html>