{% extends 'base.html' %}
{% block title %} | Login{% 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>Login 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">
                <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>Sign into your account</h3>
                    {% include 'includes/messages.html' %}
                    <form action=""{% url 'accounts:login' %}"" method="POST">
                        {% csrf_token %}
                        <div class="form-group form-box">
                            <input type="text" name="username" class="input-text" placeholder="Username" 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 mb-0 clearfix">
                            <button type="submit" class="btn-md btn-theme float-left">Login</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>Don't have an account? <a href="{% url 'accounts:register' %}" class="thembo"> Register here</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Contact section end -->

{% endblock  %}