{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login | Peyso - Bootstrap 5 Landing Page Template</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="Themesbrand" />

    <!-- App favicon -->
    <link rel="shortcut icon" href="{% static 'images/favicon.ico' %}">

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css">

    <!-- Material Icon -->
    <link rel="stylesheet" type="text/css" href="{% static 'css/materialdesignicons.min.css' %}" />

    <!-- Custom  sCss -->
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}" />

</head>

<body class="bg-primary">

    <div class="authentication-page hero-1 py-5">
        <!-- bg-overlay-img -->
        <div class="bg-overlay overflow-hidden bg-transparent">
            <div class="hero-1-bg"></div>
        </div>

        <div class="container">
            <div class="row justify-content-center  mt-sm-5">
                <div class="col-md-8 col-lg-6 col-xl-5">
                    <div>
                        <div class="text-center mb-5">
                            <a href="{% url 'layout1' %}" class="mb-3 d-block auth-logo">
                                    <img src="{% static 'images/logo-light.png' %}" alt="" height="22" class="logo">
                                </a>
                            <h5 class="font-16 text-white-50">Bootstrap 5 Landing page template</h5>
                        </div>

                        <div class="card">
                            <div class="card-body p-4">
                                <div class="text-center mt-2">
                                    <h5>Welcome Back !</h5>
                                    <p>Sign in to continue to Peyso.</p>

                                </div>

                                <div class="p-2 mt-4">
                                    <form action="{% url 'layout1' %}">

                                        <div class="mb-3">
                                            <label class="form-label" for="username">Username</label>
                                            <input type="text" class="form-control" id="username" placeholder="Enter username">
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label" for="userpassword">Password</label>
                                            <input type="password" class="form-control" id="userpassword" placeholder="Enter password">
                                        </div>

                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="auth-remember-check">
                                            <label class="form-check-label" for="auth-remember-check">Remember me</label>
                                        </div>

                                        <div class="mt-3 d-grid">
                                            <a href="{% url 'layout1' %}" class="btn btn-info" type="submit">Log In</a>
                                        </div>


                                        <div class="mt-4 text-center">
                                            <a href="{% url 'account:recover_password' %}" class="text-body"><i class="mdi mdi-lock me-1"></i> Forgot your password?</a>
                                        </div>
                                    </form>
                                    <!-- end-form -->
                                </div>
                            </div>
                        </div>

                        <div class="mt-4 text-center text-white-50">
                            <p>Don't have an account ? <a href="{% url 'account:register' %}" class="font-weight-semibold text-white"> Signup </a> </p>
                        </div>

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


    <!-- Javascript -->
    <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>

    <!-- unicon -->
    <script src="https://unicons.iconscout.com/release/v2.1.11/script/monochrome/bundle.js"></script>

</body>

</html>