<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/layout :: head('My Trips')}"></head>
<body>
<nav th:replace="~{fragments/layout :: driverbar}"></nav>

<section class="dash">
    <div class="container">
        <div class="page-header"><h1>My Trips</h1></div>

        <div class="card dash-table">
            <table th:if="${not #lists.isEmpty(trips)}">
                <thead><tr><th>ID</th><th>Customer</th><th>Car</th><th>Pickup</th><th>Return</th><th>Route</th><th>Total</th><th>Status</th></tr></thead>
                <tbody>
                <tr th:each="b : ${trips}">
                    <td th:text="${'#' + b.id}">#1</td>
                    <td th:text="${b.user.fullName}">name</td>
                    <td th:text="${b.car.make + ' ' + b.car.model}">car</td>
                    <td th:text="${b.pickupDate}">date</td>
                    <td th:text="${b.returnDate}">date</td>
                    <td th:text="${b.pickupLocation + ' → ' + b.dropLocation}">route</td>
                    <td>[[${currencySymbol}]]<span th:text="${b.totalAmount}">0</span></td>
                    <td><span class="dash-pill" th:classappend="'pill-' + ${#strings.toLowerCase(b.status)}" th:text="${b.status}">PENDING</span></td>
                </tr>
                </tbody>
            </table>
            <div th:if="${#lists.isEmpty(trips)}" class="media-empty">No trips assigned to you yet.</div>
        </div>
    </div>
</section>

<footer th:replace="~{fragments/layout :: footer}"></footer>
</body>
</html>
