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

<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">&#128663; Driver Portal</span>
        <div class="admin-aside-body">
            <h1>Driver <span>Portal</span></h1>
            <p>Sign in to see your assigned trips, update your availability and manage your profile.</p>
        </div>
        <ul class="admin-feats">
            <li><span class="ic">&#128205;</span> View your upcoming &amp; past trips</li>
            <li><span class="ic">&#9889;</span> Set yourself available or off duty</li>
            <li><span class="ic">&#128196;</span> Keep your documents in check</li>
        </ul>
    </aside>

    <!-- Login form -->
    <main class="admin-auth-main">
        <div class="admin-lock">&#128663;</div>
        <h2>Sign in</h2>
        <p class="subtitle">Access your driver 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="@{/driver/login}" method="post">
            <div class="form-group field">
                <label>Username</label>
                <input type="text" name="username" placeholder="driver 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>
