{% extends "layouts/base-fullscreen.html" %}

{% load static %}

{% block title %} Sign up {% endblock %} 

{% block body_class %}{% endblock %}

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

{% include 'includes/navigation-transparent.html' %} 
<style type="text/css">
    .body-p{
        background-image: url('{% static "/img/bg/login-bg.jpg" %}');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center; 
        background-size: cover;
    }
    
    .div-p{
        max-width:700px;
        background: rgb(0,0,0);
        background: -moz-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6404762588629201) 35%, rgba(255,255,255,0) 100%);
        background: -webkit-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6404762588629201) 35%, rgba(255,255,255,0) 100%);
        background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6404762588629201) 35%, rgba(255,255,255,0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#ffffff",GradientType=1); 
    }
</style>

<div class="d-flex flex-column body-p vh-100" loading="lazy">
    <div class="d-flex flex-grow-1 div-p">
        <form class="p-3 bg-body m-auto border border-2 border-info-subtle rounded bg-opacity-75" style="width: 24rem;" role="form" method="post" action="">
            
            <h3 class="fw-normal mb-3 pb-3" style="letter-spacing: 1px;">
                <i class="nf nf-md-login"></i>
                 Sign up
            </h3>
            
            <div class="row mb-3">
                <p class="mb-0 text-danger text-center">
                    {% if msg %}
                    {{ msg | safe }}
                    {% else %}
                    Enter your email and password to register
                    {% endif %}
                </p>
            </div>

            {% csrf_token %} 
                            
            <div class="input-group input-group-outline mb-3">
                {{ form.username }}
            </div>
            <span class="text-danger">{{ form.username.errors }}</span>
            
            <div class="input-group input-group-outline mb-3">
                {{ form.email }}
            </div>
            <span class="text-danger">{{ form.email.errors }}</span>
            
            <div class="input-group input-group-outline mb-3">
                {{ form.password1 }}
            </div>
            <span class="text-danger">{{ form.password1.errors }}</span>
            
            <div class="input-group input-group-outline mb-3">
                {{ form.password2 }}
            </div>
            <span class="text-danger">{{ form.password2.errors }}</span>
            
            <div class="input-group form-check form-check-info text-start">
                <input class="form-check-input rounded" type="checkbox" value="" id="flexCheckDefault">
                <label class="form-check-label ps-2" for="flexCheckDefault">
                    I agree the <a href="javascript:;" class="text-info font-weight-bolder">Terms and Conditions</a>
                </label>
            </div>
            <div class="text-center">
                <button type="submit" name="register" 
                class="btn btn-outline-primary bg-gradient-primary w-100 mt-4 mb-0 text-body-emphasis">Sign up</button>
            </div>
            <p class="mt-4 text-sm text-center">
                Already have an account?
                <a href="{% url 'login' %}" class="text-primary text-gradient font-weight-bold">Sign in</a>
            </p>

        </form>
        
    </div>
    {% include 'includes/footer-auth.html' %} 
    
</div>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}{% endblock javascripts %}