{% extends "finance/base.html" %}
{% load static %}

{% block content %}
<style>
    body {
        background-image: url("{% static 'images/wallpaper.png' %}");
        background-size: cover;
        background-position: center;
        background-repeat: repeat;
        height: 100vh;
        margin: 0;
    }

    .register-container {
        display: flex;
        justify-content: flex-start; /* Align to the left */
        align-items: flex-start; /* Align to the top */
        height: 100vh;
        padding-top: 0%; /* Adjust this value to move it more/less to the top */
        padding-left: 5%; /* Move the form to approximately 1/3 of the screen */
    }

    .register-box {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 40px;
        border-radius: 8px;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
        width: 500px; /* You can adjust the width as needed */
    }
</style>

<div class="register-container">
    <div class="register-box">
        <h1>Register</h1>
        <form method="POST" action="">
            {% csrf_token %}
            {% if form.errors %}
                <div class="alert alert-warning alert-dismissible fade show" role="alert">
                    Your form has errors
                    {% for field in form %}
                        {% if field.errors %}
                            {{ field.errors }}
                        {% endif %}
                    {% endfor %}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            {% endif %}
            {{ form.as_p }}
            <br>
            <button type="submit" class="btn btn-secondary">Register</button>
        </form>
    </div>
</div>
{% endblock %}