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

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

{% block content %}
<!-- breadcrumb begin -->

<!-- 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>Login to dashboard</h2>
                    <p>fill in the form below to login to your account dashboard.</p>
                </div>
                <div class="wpo-contact-form-area">
                    <form method="post" class="contact-validation-active" action="{% url 'userdashboard:login' %}">
                        {% csrf_token %}
                        {% if messages %}
                        {% for msg in messages %}
                        <div class="alert alert-danger text-center" role="alert">
                            {{ msg }}
                        </div>
                        <br>
                        {% endfor %}
                        {% endif %}                      
                        <div>
                            {% render_field form.username class="form-control" placeholder="Username" %}
                        </div>
                        <div>
                            {% render_field form.password class="form-control" placeholder="Password" %}
                        </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 'password_reset' %}" class="lost-your-password">Forgot your password?</a><br>
                                <a href="{% url 'userdashboard:register' %}" class="lost-your-password">Register an account?</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div> <!-- end container -->
</section>
<!-- end wpo-contact-pg-section -->

{% endblock content %}