{% extends 'account/base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% load socialaccount %}
{% block title %}Login{% endblock title %}

{% block extra_css %}
    <!-- owl.carousel css -->
    <link rel="stylesheet" href="{% static 'libs/owl.carousel/dist/assets/owl.carousel.min.css' %}">

    <link rel="stylesheet" href="{% static 'libs/owl.carousel/dist/assets/owl.theme.default.min.css' %}">
{% endblock extra_css %}
    
{% block content %}
<body class="auth-body-bg">
        
    <div>
        <div class="container-fluid p-0">
            <div class="row g-0">
                
                <div class="col-xl-9">
                    <div class="auth-full-bg pt-lg-5 p-4">
                        <div class="w-100">
                            <div class="bg-overlay"></div>
                            <div class="d-flex h-100 flex-column">

                                <div class="p-4 mt-auto">
                                    <div class="row justify-content-center">
                                        <div class="col-lg-7">
                                            <div class="text-center">
                                                
                                                <h4 class="mb-3"><i class="bx bxs-quote-alt-left text-primary h1 align-middle me-3"></i><span class="text-primary">5k</span>+ Satisfied clients</h4>
                                                
                                                <div dir="ltr">
                                                    <div class="owl-carousel owl-theme auth-review-carousel" id="auth-review-carousel">
                                                        <div class="item">
                                                            <div class="py-3">
                                                                <p class="font-size-16 mb-4">" Fantastic theme with a ton of options. If you just want the HTML to integrate with your project, then this is the package. You can find the files in the 'dist' folder...no need to install git and all the other stuff the documentation talks about. "</p>

                                                                <div>
                                                                    <h4 class="font-size-16 text-primary">Abs1981</h4>
                                                                    <p class="font-size-14 mb-0">- Skote User</p>
                                                                </div>
                                                            </div>
                                                            
                                                        </div>

                                                        <div class="item">
                                                            <div class="py-3">
                                                                <p class="font-size-16 mb-4">" If Every Vendor on Envato are as supportive as Themesbrand, Development with be a nice experience. You guys are Wonderful. Keep us the good work. "</p>

                                                                <div>
                                                                    <h4 class="font-size-16 text-primary">nezerious</h4>
                                                                    <p class="font-size-14 mb-0">- Skote User</p>
                                                                </div>
                                                            </div>
                                                            
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end col -->

                <div class="col-xl-3">
                    <div class="auth-full-page-content p-md-5 p-4">
                        <div class="w-100">

                            <div class="d-flex flex-column h-100">
                                <div class="mb-4 mb-md-5">
                                    <a href="{% url 'dashboard' %}" class="d-block auth-logo">
                                        <img src="{% static 'images/logo-dark.png' %}" alt="" height="18" class="auth-logo-dark">
                                        <img src="{% static 'images/logo-light.png' %}" alt="" height="18" class="auth-logo-light">
                                    </a>
                                </div>
                                <div class="my-auto">
                                    
                                    <div>
                                        <h5 class="text-primary">Welcome Back !</h5>
                                        <p class="text-muted">Sign in to continue to Skote.</p>
                                    </div>
        
                                    <div class="mt-4">
                                        <form class="form-horizontal" action="{% url 'account_login' %}" method="POST" enctype="multipart/form-data">
                                            {% csrf_token %}
                                            {% for message in messages %}
                                                    <div class="alert {{ message.tags }} mb-4" role="alert">
                                                        <strong>{{ message }}</strong>
                                                    </div>
                                            {% endfor %} 
                                            
                                            {{ form|crispy}}
                                            
                                            <div class="mt-3 d-grid">
                                                <button class="btn btn-primary waves-effect waves-light" type="submit">Log In</button>
                                            </div>
                                            <div>
                                                
                                            </div>
                
                                            <div class="mt-4 text-center">
                                                <h5 class="font-size-14 mb-3">Sign in with</h5>
                
                                                <ul class="list-inline">
                                                    <li class="list-inline-item">
                                                        <a href="{% provider_login_url 'facebook' %}" class="social-list-item bg-primary text-white border-primary">
                                                            <i class="mdi mdi-facebook"></i>
                                                        </a>
                                                    </li>
                                                    
                                                    <li class="list-inline-item">
                                                        <a href="{% provider_login_url 'google' %}" class="social-list-item bg-danger text-white border-danger">
                                                            <i class="mdi mdi-google"></i>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
    
                                            <div class="mt-4 text-center">
                                                <a href="{% url 'account_reset_password' %}" class="text-muted"><i class="mdi mdi-lock me-1"></i> Forgot your password?</a>
                                            </div>
                                        </form>
                                        <div class="mt-5 text-center">
                                            <p>Don't have an account ? <a href="{% url 'account_signup' %}" class="fw-medium text-primary"> Signup now </a> </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="mt-4 mt-md-5 text-center">
                                    <p class="mb-0">© <script>document.write(new Date().getFullYear())</script> Skote. Crafted with <i class="mdi mdi-heart text-danger"></i> by Themesbrand</p>
                                </div>
                            </div>
                            
                            
                        </div>
                    </div>
                </div>
                <!-- end col -->
            </div>
            <!-- end row -->
        </div>
        <!-- end container-fluid -->
    </div>

{% endblock content %}

{% block extra_javascript %}
    <!-- owl.carousel js -->
    <script src="{% static 'libs/owl.carousel/dist/owl.carousel.min.js' %}"></script>

    <!-- auth-2-carousel init -->
    <script src="{% static 'js/pages/auth-2-carousel.init.js' %}"></script>
{% endblock extra_javascript %}
    