<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/layout :: head('Login')}"></head>
<body class="auth-page">

<div class="auth-shell">

    <!-- Brand / visual panel -->
    <aside class="auth-aside">
        <a class="auth-brand" th:href="@{/}">
            <img th:src="@{/images/logo.png}" alt="MV Rent"/>
        </a>
        <div class="auth-copy">
            <span class="auth-eyebrow">Self-drive · MV Rent</span>
            <h1>Drive the future,<br/>today.</h1>
            <p class="lead">Self-drive electric &amp; premium cars, booked in seconds. Welcome back.</p>
        </div>
        <ul class="auth-feats">
            <li><span class="ic">&#9889;</span><span>Instant booking confirmation</span></li>
            <li><span class="ic">&#128737;</span><span>Fully insured, sanitised fleet</span></li>
            <li><span class="ic">&#128205;</span><span>Pickup across South India</span></li>
        </ul>
    </aside>

    <!-- Form panel -->
    <main class="auth-main">
        <h2>Welcome back</h2>
        <p class="subtitle">Login to continue with your booking</p>

        <div th:if="${param.error}" class="auth-alert err">Invalid username or password</div>
        <div th:if="${param.logout}" class="auth-alert ok">You have been logged out</div>
        <div th:if="${success}" class="auth-alert ok" th:text="${success}"></div>

        <a th:href="@{/oauth2/authorization/google}" class="social-btn">
            <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
                <path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3c-1.6 4.7-6.1 8-11.3 8-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.6 6.1 29.6 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.3-.4-3.5z"/>
                <path fill="#FF3D00" d="M6.3 14.7l6.6 4.8C14.7 16 19 12 24 12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.6 6.1 29.6 4 24 4 16.3 4 9.7 8.3 6.3 14.7z"/>
                <path fill="#4CAF50" d="M24 44c5.5 0 10.4-2.1 14.1-5.5l-6.5-5.5C29.6 34.6 26.9 36 24 36c-5.2 0-9.6-3.3-11.2-7.9l-6.6 5.1C9.6 39.6 16.2 44 24 44z"/>
                <path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4.1-4.1 5.5l6.5 5.5c-.5.4 7.3-5.3 7.3-15 0-1.3-.1-2.3-.4-3.5z"/>
            </svg>
            Continue with Google
        </a>

        <div class="auth-divider">or sign in with email</div>

        <form th:action="@{/login}" method="post">
            <div class="form-group field">
                <label>Username</label>
                <input type="text" name="username" placeholder="your username" required autofocus/>
            </div>
            <div class="form-group field">
                <label>Password</label>
                <input type="password" name="password" placeholder="&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;" required/>
            </div>
            <button class="btn btn-primary" type="submit">Login</button>
        </form>

        <p class="auth-foot">New here? <a th:href="@{/register}">Create an account</a></p>
    </main>

</div>

</body>
</html>
