{% extends 'partials/base.html' %}
{% load static %}
{% block content %}

<style>
   /* Nice Select custom styling */
.nice-select {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    height: auto;
}

.nice-select .list {
    max-height: 160px;
    overflow-y: auto;
    overflow-x: hidden;
}

.nice-select .option {
    white-space: nowrap;
    padding: 8px 10px;
}

.currency_height {
    max-height: 160px;
}

.login-reg {
    height: auto;
    padding-bottom: 50px;
    overflow: visible;
}

</style>

<!-- Login Reg start -->
<section class="login-reg">
    <div class="overlay pt-120">
        <div class="container">
            <div class="row align-items-center justify-content-center">
                <div class="col-xl-6 order-xl-0 order-1">
                    <div class="sec-img d-rtl">
                        <img src="{% static 'assets/images/login-reg-bg.png' %}" class="max-un" alt="image">
                    </div>
                </div>
                <div class="col-xl-5 form-content border-0">
                    <div class="section-text text-center">
                        <h5 class="sub-title text-dark">Open Bank Account</h5>
                        <h3 class="title text-dark" style="text-align: start;">Hey, <br> Sign Up Here</h3>
                        <p class="dont-acc text-dark">Already have an account? <a href="{% url 'userauths:sign-in' %}">Login</a></p>
                    </div>
                    <form method="POST">
                        {% csrf_token %}
                        <!-- Display General Errors -->
                        {% if form.errors %}
                        <div class="alert alert-danger text-center">
                            <p>Please correct the errors below:</p>
                        </div>
                        {% endif %}

                        <div class="row">
                            <div class="col-12">
                                <!-- Username Input -->
                                <div class="single-input m-2">
                                    <label for="username" class="form-label text-dark"><b>Username</b></label>
                                    {{ form.username }}
                                    {% if form.username.errors %}
                                    <div class="text-danger small">
                                        {% for error in form.username.errors %}
                                        <p>{{ error }}</p>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>

                                <!-- Email Input -->
                                <div class="single-input m-2">
                                    <label for="email" class="form-label text-dark"><b>Email address</b></label>
                                    {{ form.email }}
                                    {% if form.email.errors %}
                                    <div class="text-danger small">
                                        {% for error in form.email.errors %}
                                        <p>{{ error }}</p>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>

                                <!-- Country Selection -->
                                <div class="single-input m-2">
                                    <label for="signup-country-select" class="form-label text-dark"><b>Country</b></label>
                                    {{ form.country }}
                                    {% if form.country.errors %}
                                    <div class="text-danger small">
                                        {% for error in form.country.errors %}
                                        <p>{{ error }}</p>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>

                                <!-- Currency Selection -->
                                <div class="single-input m-2">
                                    <label for="signup-currency-select" class="form-label text-dark"><b>Currency</b></label>
                                    <div class="currency_height">
                                    {{ form.currency }}
                                    </div>
                                    {% if form.currency.errors %}
                                    <div class="text-danger small">
                                        {% for error in form.currency.errors %}
                                        <p>{{ error }}</p>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>

                                <!-- Password Input -->
                                <div class="single-input m-2">
                                    <label for="password" class="form-label text-dark"><b>Password</b></label>
                                    {{ form.password }}
                                    {% if form.password.errors %}
                                    <div class="text-danger small">
                                        {% for error in form.password.errors %}
                                        <p>{{ error }}</p>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>

                                <!-- Confirm Password Input -->
                                <div class="single-input m-2">
                                    <label for="confirm_password" class="form-label text-dark"><b>Confirm Password</b></label>
                                    {{ form.confirm_password }}
                                    {% if form.confirm_password.errors %}
                                    <div class="text-danger small">
                                        {% for error in form.confirm_password.errors %}
                                        <p>{{ error }}</p>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>

                                <!-- Submit Button -->
                                <button class="cmn-btn bg-primary w-100 p-2 fs-3 rounded-3 mb-3" type="submit">Sign Up</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Login Reg end -->


<!-- Nice Select CSS -->
<link rel="stylesheet" href="{% static 'css/nice-select.css' %}">

<!-- Nice Select JS -->
<script src="{% static 'js/jquery.nice-select.min.js' %}"></script>

<!-- Initialize Nice Select -->
<script>
  $(document).ready(function() {
    $('select.signup-select').niceSelect();
  });
</script>


{% endblock content %}