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

{% block title %} Login {% endblock title %}

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

{% block content %}

    <div class="page-inner">
        <div class="page-header">
            <h4 class="page-title">Register</h4>
            <ul class="breadcrumbs">
                <li class="nav-home">
                    <a href="#">
                        <i class="flaticon-home"></i>
                    </a>
                </li>
                <li class="separator">
                    <i class="flaticon-right-arrow"></i>
                </li>
                <li class="nav-item">
                    <a href="#">Authentication</a>
                </li>
                <li class="separator">
                    <i class="flaticon-right-arrow"></i>
                </li>
                <li class="nav-item">
                    <a href="#">Register</a>
                </li>
            </ul>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">

                            {% if msg %}
                                <span class="text-danger">{{ msg | safe }}</span>
                            {% else %}
                            <span>
                                Complete your credentials 
                            </span>
                            {% endif %}

                        </div>
                    </div>

                    <form method="post" action="">

                        {% csrf_token %}

                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 col-lg-4">

                                    <div class="form-group">
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <i class="icon-user"></i>
                                                </span>
                                            </div>
                                            {{ form.username }}
                                        </div>
                                    </div>
                                    <span class="text-danger">{{ form.username.errors }}</span>

                                    <div class="form-group">
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <i class="icon-envelope"></i>
                                                </span>
                                            </div>
                                            {{ form.email }}
                                        </div>
                                    </div>
                                    <span class="text-danger">{{ form.email.errors }}</span>

                                    <div class="form-group">
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <i class="icon-lock"></i>
                                                </span>
                                            </div>
                                            {{ form.password1 }}
                                        </div>
                                    </div>
                                    <span class="text-danger">{{ form.password1.errors }}</span>

                                    <div class="form-group">
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <i class="icon-lock"></i>
                                                </span>
                                            </div>
                                            {{ form.password2 }}
                                        </div>
                                    </div>
                                    <span class="text-danger">{{ form.password2.errors }}</span>

                                </div>
                            </div>
                        </div>
                        <div class="card-action">
                            <button type="submit" class="btn btn-success">Submit</button>
                            &nbsp; &nbsp;
                            <span>Already have and account?</span> <a href="{% url 'login' %}" >Login</a>
                        </div>

                    </form>

                </div>
            </div>
        </div>
    </div>

{% endblock content %}

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