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

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

        <div th:if="${success}" class="alert alert-success" th:text="${success}"></div>

        <div th:if="${#lists.isEmpty(bookings)}" style="text-align:center;color:#888;padding:40px">
            You haven't made any bookings yet. <a th:href="@{/cars}" style="color:#f7941d">Browse cars &rarr;</a>
        </div>

        <div th:unless="${#lists.isEmpty(bookings)}" class="table-wrap">
            <table>
                <thead>
                <tr>
                    <th>ID</th><th>Car</th><th>Driver</th><th>Pickup</th><th>Return</th>
                    <th>Total</th><th>Status</th><th></th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="b : ${bookings}">
                    <td th:text="${b.id}">1</td>
                    <td th:text="${b.car.make + ' ' + b.car.model}">car</td>
                    <td th:text="${b.withDriver and b.driver != null ? b.driver.name : 'Self-drive'}">Self-drive</td>
                    <td th:text="${b.pickupDate}">date</td>
                    <td th:text="${b.returnDate}">date</td>
                    <td>[[${currencySymbol}]]<span th:text="${b.totalAmount}">0</span></td>
                    <td>
                        <span class="badge"
                              th:classappend="'badge-' + ${#strings.toLowerCase(b.status)}"
                              th:text="${b.status}">PENDING</span>
                    </td>
                    <td><a class="btn btn-ghost btn-sm" th:href="@{/my-bookings/{id}/invoice(id=${b.id})}">Invoice</a></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</section>

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