{% extends 'base.html' %}
{% block title %} | Register{% endblock  %}
{% load static %}
{% load socialaccount %}
{% providers_media_js %}
{% block content %}
<div class="sub-banner overview-bgi">
    <div class="container breadcrumb-area">
        <div class="breadcrumb-areas">
            <h1>Signup To Your Account</h1>
            <ul class="breadcrumbs">
                <li><a href="{% url 'pages:home' %}">Home</a></li>
                <li class="active">Login</li>
            </ul>
        </div>
    </div>
</div>
<!-- Sub Banner end -->

<!-- Contact section start -->
<div class="contact-section">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12">
                <div class="form-section">
                    <div class="logo-2">
                        <a href="{% url 'pages:home' %}">
                            <img src="{% static 'pages/img/logos/black-logo.png' %}" alt="logo">
                        </a>
                    </div>
                    <h3>Create an account</h3>
                    <form action="{% url 'accounts:register' %}" method="POST">
                            {% csrf_token %}
                        {% include 'includes/messages.html' %}
                        <div class="form-group form-box">
                            <input type="text" name="firstname" class="input-text" placeholder="First Name" required>
                            <i class="fa fa-user"></i>
                        </div>
                        <div class="form-group form-box">
                            <input type="text" name="lastname" class="input-text" placeholder="Last Name" required>
                            <i class="fa fa-user"></i>
                        </div>
                        <div class="form-group form-box">
                            <input type="text" name="username" class="input-text" placeholder="Username" required>
                            <i class="fa fa-user"></i>
                        </div>
                        <div class="form-group form-box">
                            <input type="email" name="email" class="input-text" placeholder="Email Address" required>
                            <i class="flaticon-mail"></i>
                        </div>
                        <div class="form-group form-box">
                            <input type="password" name="password" class="input-text" placeholder="Password" required>
                            <i class="flaticon-lock"></i>
                        </div>
                        <div class="form-group form-box">
                            <input type="password" name="confirm_password" class="input-text" placeholder="Confirm Password">
                            <i class="flaticon-lock"></i>
                        </div>
                        <div class="form-group mb-0 clearfix">
                            <button type="submit" class="btn-md btn-theme float-left">Register</button>
                        </div>
                        <div class="extra-login clearfix">
                            <span>Or Login With</span>
                        </div>
                        <div class="clearfix"></div>
                        <ul class="social-list">
                            <li><a href="{% provider_login_url 'facebook' method='oauth2' %}" class="facebook-bg"><i class="fa fa-facebook facebook-i"></i><span>Facebook</span></a></li>
                            <li><a href="{% provider_login_url 'google'%}" class="google-bg"><i class="fa fa-google google-i"></i><span>Google</span></a></li>
                        </ul>
                    </form>
                    <p>Already a member? <a href="{% url 'accounts:login' %}" class="thembo"> Login here</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Contact section end -->

{% endblock  %}