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

{% load static %}

{% block title %} Sign In {% endblock %}

{% block body_attributes %} {% endblock body_attributes %}

{% block stylesheet %} 
	<!--begin::Page bg image-->
    <style>
        body { background-image: url("{% static 'images/patterns/background.jpeg' %}"); } 
        [data-theme="dark"] body { background-image: url("{% static 'images/patterns/background-dark.jpeg' %}"); }
    </style>
	<!--end::Page bg image-->
{% endblock stylesheet %}

{% block content %} 

    <!--begin::Main-->
    <!--begin::Root-->
    <div class="d-flex flex-column flex-root">
        <!--begin::Authentication - Sign-in -->
        <div class="d-flex flex-column flex-lg-row flex-column-fluid">
            <!--begin::Aside-->
            <div class="d-flex flex-lg-row-fluid">
                <!--begin::Content-->
                <div class="d-flex flex-column flex-center pb-0 pb-lg-10 p-10 w-100">
                    <!--begin::Image-->
                    <a href="{% url 'landing:index' %}" class="mb-5 mb-lg-0">
                        <img class="theme-light-show mx-auto mw-100 w-150px w-lg-200px mb-10 mb-lg-20" src="{% static 'images/logos/logo.png' %}" alt="" />
                        <img class="theme-dark-show mx-auto mw-100 w-150px w-lg-200px mb-10 mb-lg-20" src="{% static 'images/logos/logo.png' %}" alt="" />
                    </a>
                    <!--end::Image-->
                    <!--begin::Title-->
                    <h1 class="text-gray-800 fs-2qx fw-bold text-center mb-7">UseVoice.</h1>
                    <!--end::Title-->
                    <!--begin::Text-->
                    <div class="text-gray-600 fs-base text-center fw-semibold">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
                        Vivamus sodales eros non arcu pellentesque convallis.<br>
                        Nunc dignissim lectus in malesuada porta.<br>
                        Proin ac erat sed urna congue suscipit.<br>
                        Morbi aliquet eget nisl id ornare.
                    </div>
                    <!--end::Text-->
                </div>
                <!--end::Content-->
            </div>
            <!--begin::Aside-->
            <!--begin::Body-->
            <div class="d-flex flex-column-fluid flex-lg-row-auto justify-content-center justify-content-lg-end p-12">
                <!--begin::Wrapper-->
                <div class="bg-body d-flex flex-center rounded-4 w-md-600px p-10">
                    <!--begin::Content-->
                    <div class="w-md-400px">
                    <!--begin::Form-->
                    <form class="form w-100" novalidate="novalidate" id="kt_sign_in_form" data-kt-redirect-url="{% url 'landing:index' %}" action="#">
                        {% csrf_token %}
                        <!--begin::Heading-->
                        <div class="text-center mb-11">
                            <!--begin::Title-->
                            <h1 class="text-dark fw-bolder mb-3"> Sign In </h1>
                            <!--end::Title-->
                            <!--begin::Subtitle-->
                            <div class="text-gray-500 fw-semibold fs-6"> Your Social Campaigns </div>
                            <!--end::Subtitle=-->
                        </div>
                        <!--begin::Heading-->
                        <!--begin::Login options-->
                        <div class="row g-3 mb-9">
                            <!--begin::Col-->
                            <div class="col-md-6">
                                <!--begin::Google link=-->
                                <a href="#" class="btn btn-flex btn-outline btn-text-gray-700 btn-active-color-primary bg-state-light flex-center text-nowrap w-100">
                                <img alt="Logo" src="{% static 'images/logos/google-icon.svg' %}" class="h-15px me-3" />Sign in with Google</a>
                                <!--end::Google link=-->
                            </div>
                            <!--end::Col-->
                            <!--begin::Col-->
                            <div class="col-md-6">
                                <!--begin::Google link=-->
                                <a href="#" class="btn btn-flex btn-outline btn-text-gray-700 btn-active-color-primary bg-state-light flex-center text-nowrap w-100">
                                <img alt="Logo" src="{% static 'images/logos/apple-black.svg' %}" class="theme-light-show h-15px me-3" />
                                <img alt="Logo" src="{% static 'images/logos/apple-black-dark.svg' %}" class="theme-dark-show h-15px me-3" />Sign in with Apple</a>
                                <!--end::Google link=-->
                            </div>
                            <!--end::Col-->
                        </div>
                        <!--end::Login options-->
                        <!--begin::Separator-->
                        <div class="separator separator-content my-14">
                            <span class="w-125px text-gray-500 fw-semibold fs-7">Or with email</span>
                        </div>
                        <!--end::Separator-->
                        <!--begin::Input group=-->
                        <div class="fv-row mb-8">
                            <!--begin::Email-->
                            <input type="email" placeholder="Email" name="email" id="email" autocomplete="off" class="form-control bg-transparent" maxlength="100" required="" />
                            <!--end::Email-->
                        </div>
                        <!--end::Input group=-->
                        <div class="fv-row mb-8">
                            <!--begin::Password-->
                            <input type="password" name="password" placeholder="Password" autocomplete="off" class="form-control bg-transparent" id="password" maxlength="100" required="">
                            <!--end::Password-->
                        </div>
                        <!--end::Input group=-->
                        <!--begin::Accept-->
                        <div class="fv-row mb-8">
                            <!--begin::Wrapper-->
                            <div class="d-flex flex-stack flex-wrap gap-3 fs-base fw-semibold mb-8 ">
                                <!--begin::Remembre Me-->
                                <label class="form-check form-check-inline align-items-center">
                                    <input class="form-check-input" type="checkbox" name="remember_me" id="remember_me"/>
                                    <span class="form-check-label fw-semibold text-gray-700 fs-base ms-1">RemembreMe</span>
                                </label>
                                <!--end::Remembre Me-->
                                <!--begin::Link-->
                                <a href="{% url 'accounts:password_reset' %}" class="link-primary">Forgot Password ?</a>
                                <!--end::Link-->
                            </div>
                            <!--end::Wrapper-->
                        </div>
                        <!--end::Accept-->

                        <!--begin::Submit button-->
                        <div class="d-grid mb-10">
                            <button type="submit" id="kt_sign_in_submit" class="btn btn-primary">
                                <!--begin::Indicator label-->
                                <span class="indicator-label">Sign In</span>
                                <!--end::Indicator label-->
                                <!--begin::Indicator progress-->
                                <span class="indicator-progress">
                                    Please wait... 
                                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                </span>
                                <!--end::Indicator progress-->
                            </button>
                        </div>
                        <!--end::Submit button-->
                        <!--begin::Sign up-->
                        <div class="text-gray-500 text-center fw-semibold fs-6">
                            Not a Member yet? 
                            <a href="{% url 'accounts:signup' %}" class="link-primary">Sign up</a>
                        </div>
                        <!--end::Sign up-->
                    </form>
                    <!--end::Form-->
                    </div>
                    <!--end::Content-->
                </div>
                <!--end::Wrapper-->
            </div>
            <!--end::Body-->
        </div>
        <!--end::Authentication - Sign-in-->
    </div>
    <!--end::Root-->
    <!--end::Main-->
{% endblock content %}

{% block javascripts %}
    <script src="{% static 'js/custom/sign_in.js' %}"></script>

    <script>
        // On document ready
        KTUtil.onDOMContentLoaded(function() {
            KTSigninGeneral.init();
        });
    </script>

    {% if messages %}
        {% for message in messages %}
            <script>
                KTUtil.onDOMContentLoaded(function() {
                    Swal.fire({
                        text: " {{ message }} ",
                        icon: "{{ message.tags }}",
                        buttonsStyling: false,
                        confirmButtonText: "Close",
                        customClass: {
                            confirmButton: "btn btn-primary"
                        }
                    });
                });
            </script>
        {% endfor %}
    {% endif %} 
{% endblock javascripts %}