{% extends 'base/base.html' %}

{% block content %}
<main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
    <!-- Navbar -->
    <nav class="navbar navbar-main navbar-expand-lg px-0 mx-4 shadow-none border-radius-xl" id="navbarBlur"
        navbar-scroll="true">
        <div class="container-fluid py-1 px-3">

               
            <div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
                <div class="ms-md-auto pe-md-3 d-flex align-items-center">
                    <div class="input-group">
                        <span class="input-group-text text-body"><i class="fas fa-search"
                                aria-hidden="true"></i></span>
                        <input type="text" class="form-control" placeholder="Type here...">
                    </div>
                </div>
                <ul class="navbar-nav  justify-content-end">
                    <li class="nav-item d-flex align-items-center">
                        <a class="btn btn-outline-success btn-sm mb-0 me-3"  href="{% url 'home' %}">Home</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- End Navbar -->
<div class="container">
    <div class="row">
        <div class="col-xl-8 col-lg-5 col-md-6 d-flex flex-column mx-auto">
            <div class="card card-plain mt-8">
                {% if messages %}

                {% for message in messages %}
                <div class="alert alert-success" role="alert">
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                {% endfor %}

                {% endif %}
                <div class="card-header pb-0 text-left bg-transparent">
                    <h3 class="font-weight-bolder text-success text-gradient" style="text-align: center;">Login</h3>

                </div>
                <div class="card-body">
                    <form role="form" method="post" action="{% url 'login' %}">
                        {% csrf_token %}
                        <label>Email</label>
                        <div class="mb-3">
                            <input type="email" name="username" class="form-control" placeholder="Email" required>
                        </div>
                        <label>Password</label>
                        <div class="mb-3">
                            <input type="password" name="password" class="form-control" placeholder="Password" required>
                        </div>
                        <div class="text-center">
                            <button type="submit" class="btn bg-gradient-success w-100 mt-4 mb-0">Sign in</button>
                        </div>
                    </form>
                    {% if error_message %}
                    <div class="text-center text-danger">{{ error_message }}</div>
                    {% endif %}
                    {% if login_error %}
                    <div class="text-center text-danger">{{ login_error }}</div>
                    {% endif %}
                </div>
                <div class="card-footer text-center pt-0 px-lg-2 px-1">
                    <p class="mb-4 text-sm mx-auto">
                        Don't have an account?
                        <a href="{% url 'register' %}" class="text-info text-gradient font-weight-bold">Sign up</a>
                    </p>
                    <p class="mb-4 text-sm mx-auto">
                        Forget Password
                        <a href="{% url 'password_reset' %}" class="text-info text-gradient font-weight-bold">Reset Here!</a>
                    </p>
                </div>
            </div>
        </div>

    </div>
</div>
</main>
{% endblock content %}