{% extends 'base.html' %}

{% block content %}
<div class="row justify-content-center align-items-center" style="min-height: 80vh;">
    <div class="col-md-4">
        <div class="card border-0 shadow-lg rounded-4 overflow-hidden">
            <div class="bg-primary p-4 text-center text-white">
                <i class="bi bi-person-circle fs-1"></i>
                <h3 class="fw-bold mt-2">Welcome Back</h3>
                <p class="small opacity-75">Login to manage your orders</p>
            </div>
            <div class="card-body p-4">
                <form action="{{ url_for('web.login') }}" method="POST">
                    <div class="mb-3">
                        <label class="form-label small fw-bold">Email or Username</label>
                        <div class="input-group">
                            <span class="input-group-text bg-light border-0"><i class="bi bi-person"></i></span>
                            <input type="text" name="email" class="form-control bg-light border-0"
                                placeholder="Email or Username" required>
                        </div>
                    </div>
                    <div class="mb-4">
                        <label class="form-label small fw-bold">Password</label>
                        <div class="input-group">
                            <span class="input-group-text bg-light border-0"><i class="bi bi-lock"></i></span>
                            <input type="password" name="password" class="form-control bg-light border-0"
                                placeholder="••••••••" required>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary w-100 py-2 fw-bold rounded-3 shadow-sm">
                        Login Now
                    </button>
                </form>
            </div>
            <div class="card-footer bg-white border-0 text-center pb-4">
                <p class="small text-muted">Don't have an account?
                    <a href="{{ url_for('web.signup') }}" class="text-primary fw-bold text-decoration-none">Create
                        Account</a>
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}