{% extends 'base.html' %}
{% load static %}
{% load humanize %}
{% load widget_tweaks %}
{% load embed_video_tags %}

{% block title %} Register an Account {% endblock title %}

{% block content %}
<!-- start wpo-contact-pg-section -->
<section class="wpo-contact-pg-section section-padding">
    <div class="container">

    
        <div class="row">
            <div class="col col-lg-10 offset-lg-1">
                <div class="wpo-contact-title">
                    <h2>Account opening form</h2>
                    <p>fill in the form below to create an account in our platform.</p>
                </div>
                <div class="wpo-contact-form-area">
                    <form method="post" class="contact-validation-active" action="{% url 'userdashboard:register' %}">
                        {% csrf_token %}
                        {% if messages %}
                        {% for msg in messages %}
                        <div class="alert alert-danger text-center" role="alert">
                            {{ msg }}
                        </div>
                        {% endfor %}
                        {% endif %}
                        <div>
                            {% render_field form.first_name class="form-control" placeholder="Full name" autocomplete="off" %}
                        </div>
                        <div>
                            {% render_field form.username class="form-control" placeholder="Enter Username*" autocomplete="off" %}
                        </div>
                        <div>
                            {% render_field form.email class="form-control" placeholder="Enter Email Address" autocomplete="off" %}                        
                        </div>
                        <div>
                            {% render_field form.password class="form-control" placeholder="Define Password" autocomplete="off" %}                        
                        </div>
                        <div>
                            {% render_field form.password2 class="form-control" placeholder="Confirm Password" autocomplete="off" %}
                        </div>
                        <div>
                            <center>
                                {% render_field form.check_box style="display: flex; width:15px;" %}
                                <a href="{% url 'zeeprimeapp:policies' %}" class="cl-white">I agree
                                    with Terms and conditions</a>
                            </center>
                        </div>
                        <div>
                            <p>Upline: {{referrer}} </p>
                        </div>
                        <div class="submit-area">
                            <button type="submit" class="theme-btn">submit</button>
                        </div>
                        <div class="col-12 align-items-center" style="margin-top: 20px;">
                            <div class="lost-your-password">
                                <a href="{% url 'userdashboard:login' %}" class="lost-your-password">Login to your account</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div> <!-- end container -->
</section>
<!-- end wpo-contact-pg-section -->
{% endblock content %}