{% load static %}

{% include "pxy_dashboard/partials/main.html" %}

<head>
    {% include "pxy_dashboard/partials/title-meta.html" with title="Log In" %}

    {% include "pxy_dashboard/partials/head-css.html" %}
</head>

<body class="authentication-bg position-relative">

    {% include "pxy_dashboard/partials/background.html" %}

    <div class="account-pages pt-2 pt-sm-5 pb-4 pb-sm-5 position-relative">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xxl-4 col-lg-5">
                    <div class="card">

                        <!-- Logo -->
                        <div class="card-header pt-4 text-center">
                            <div class="auth-brand mb-0">
                                <a href="/" class="logo-dark">
                                    <span><img src="{% static 'dashboard/images/logo-dark.png' %}" alt="dark logo" height="28"></span>
                                </a>
                                <a href="/" class="logo-light">
                                    <span><img src="{% static 'dashboard/images/logo.png' %}" alt="logo" height="28"></span>
                                </a>
                            </div>
                        </div>

                        <div class="card-body p-4">

                            <div class="text-center w-75 m-auto">
                                <h4 class="text-dark-50 text-center pb-0 fw-bold">Sign In</h4>
                                <p class="text-muted mb-4">Enter your email address and password to access admin panel.
                                </p>
                            </div>

                            <form action="#">

                                <div class="mb-3">
                                    <label for="emailaddress" class="form-label">Email address</label>
                                    <input class="form-control" type="email" id="emailaddress" required=""
                                        placeholder="Enter your email">
                                </div>

                                <div class="mb-3">
                                    <a href="{% url 'recoverpw' %}" class="text-muted float-end fs-12">Forgot your
                                        password?</a>
                                    <label for="password" class="form-label">Password</label>
                                    <div class="input-group input-group-merge">
                                        <input type="password" id="password" class="form-control"
                                            placeholder="Enter your password">
                                        <div class="input-group-text" data-password="false">
                                            <span class="password-eye"></span>
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-3 mb-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="checkbox-signin" checked>
                                        <label class="form-check-label" for="checkbox-signin">Remember me</label>
                                    </div>
                                </div>

                                <div class="mb-3 mb-0 text-center">
                                    <button class="btn btn-primary" type="submit"> Log In </button>
                                </div>

                            </form>
                        </div> <!-- end card-body -->
                    </div>
                    <!-- end card -->

                    <div class="row mt-3">
                        <div class="col-12 text-center">
                            <p class="text-white-50">Don't have an account? <a href="{% url 'register' %}"
                                    class="text-white ms-1 link-offset-3 text-decoration-underline"><b>Sign Up</b></a>
                            </p>
                        </div> <!-- end col -->
                    </div>
                    <!-- end row -->

                </div> <!-- end col -->
            </div>
            <!-- end row -->
        </div>
        <!-- end container -->
    </div>
    <!-- end page -->

    <footer class="footer footer-alt">
        <span class="text-white-50">
            <script>document.write(new Date().getFullYear())</script> © Polisplexity - Coderthemes.com
        </span>
    </footer>

    {% include "pxy_dashboard/partials/footer-script.html" %}

    {% block extra_js %}
    <!-- App js -->
    <script src="{% static 'dashboard/js/app.min.js' %}"></script>
    {% endblock extra_js %}