<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/layout :: head('Sign up')}"></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">Join · MV Rent</span>
            <h1>Join the<br/>ride.</h1>
            <p class="lead">Create your account and unlock self-drive cars across South India in seconds.</p>
        </div>
        <ul class="auth-feats">
            <li><span class="ic">&#9889;</span><span>Book in under a minute</span></li>
            <li><span class="ic">&#127881;</span><span>Member-only offers</span></li>
            <li><span class="ic">&#128663;</span><span>Track all your bookings</span></li>
        </ul>
    </aside>

    <!-- Form panel -->
    <main class="auth-main">
        <h2>Create your account</h2>
        <p class="subtitle">Sign up to book cars in seconds</p>

        <div th:if="${error}" class="auth-alert err" th:text="${error}"></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>
            Sign up with Google
        </a>

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

        <form th:action="@{/register}" th:object="${user}" method="post">
            <div class="auth-grid2">
                <div class="form-group field">
                    <label>Full Name</label>
                    <input type="text" th:field="*{fullName}" placeholder="Jane Doe" required/>
                </div>
                <div class="form-group field">
                    <label>Username</label>
                    <input type="text" th:field="*{username}" placeholder="janedoe" required/>
                </div>
                <div class="form-group field">
                    <label>Email</label>
                    <input type="email" th:field="*{email}" placeholder="jane@email.com" required/>
                </div>
                <div class="form-group field">
                    <label>Phone</label>
                    <input type="tel" th:field="*{phone}" placeholder="+91 9XXXXXXXXX"/>
                </div>
                <div class="form-group field">
                    <label>Driving License No.</label>
                    <input type="text" th:field="*{licenseNumber}" placeholder="DL-XX-XXXXXXX"/>
                </div>
                <div class="form-group field">
                    <label>Customer Type</label>
                    <select name="customerCategoryId">
                        <option value="">— Individual —</option>
                        <option th:each="cc : ${customerCategories}" th:value="${cc.id}" th:text="${cc.name}"></option>
                    </select>
                </div>
                <div class="form-group field">
                    <label>Password</label>
                    <input type="password" name="rawPassword" placeholder="min 6 characters" required minlength="6"/>
                </div>
            </div>
            <button class="btn btn-primary" type="submit">Create account</button>
        </form>

        <p class="auth-foot">Already have an account? <a th:href="@{/login}">Login</a></p>
    </main>

</div>

</body>
</html>
