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

<div class="admin-auth-shell">

    <!-- Brand / info panel -->
    <aside class="admin-auth-aside">
        <a class="admin-brand" th:href="@{/}">
            <img th:src="@{/images/logo.png}" alt="MV Rent"/>
        </a>
        <span class="admin-badge">&#127970; Vendor Portal</span>
        <div class="admin-aside-body">
            <h1>Vendor <span>Portal</span></h1>
            <p>Track your trips, earnings and settlements with MV&nbsp;Rent — and download statements anytime.</p>
        </div>
        <ul class="admin-feats">
            <li><span class="ic">&#128205;</span> Track your trips &amp; revenue</li>
            <li><span class="ic">&#128176;</span> Commission &amp; net earnings</li>
            <li><span class="ic">&#128196;</span> Download settlement statements</li>
        </ul>
    </aside>

    <!-- Login form -->
    <main class="admin-auth-main">
        <div class="admin-lock">&#127970;</div>
        <h2>Sign in</h2>
        <p class="subtitle">Access your vendor dashboard</p>

        <div th:if="${param.error}" class="alert alert-error">Invalid credentials or not authorised</div>
        <div th:if="${param.logout}" class="alert alert-success">You have been signed out</div>

        <form th:action="@{/vendor/login}" method="post">
            <div class="form-group field">
                <label>Username</label>
                <input type="text" name="username" placeholder="vendor 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">Sign in</button>
        </form>

        <p class="admin-auth-foot">
            <a th:href="@{/}">&larr; Back to main site</a>
        </p>
    </main>

</div>

</body>
</html>
