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

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

        <div class="cars-toolbar">
            <input class="cars-search" id="vfSearch" type="text" placeholder="Search cars…"/>
        </div>

        <div class="table-wrap">
            <table>
                <thead><tr><th>ID</th><th>Reg No</th><th>Make / Model</th><th>Type</th><th>Price/day</th><th>Status</th></tr></thead>
                <tbody id="vfBody">
                <tr th:each="c : ${cars}">
                    <td th:text="${c.id}">1</td>
                    <td th:text="${c.registrationNumber}">REG</td>
                    <td th:text="${c.make + ' ' + c.model}">name</td>
                    <td th:text="${c.type}">SUV</td>
                    <td>[[${currencySymbol}]]<span th:text="${c.pricePerDay}">2000</span></td>
                    <td><span class="badge"
                              th:classappend="${c.status.name() == 'ACTIVE'} ? 'badge-confirmed' : (${c.status.name() == 'MAINTENANCE'} ? 'badge-pending' : 'badge-cancelled')"
                              th:text="${c.status}">ACTIVE</span></td>
                </tr>
                <tr th:if="${#lists.isEmpty(cars)}"><td colspan="6" style="color:#888">No cars attached.</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</section>

<script src="/js/admin-table.js"></script>
<script>AdminTable.liveFilter(document.getElementById('vfSearch'), document.getElementById('vfBody'));</script>

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