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

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

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

        <div class="table-wrap">
            <table>
                <thead><tr><th>ID</th><th>Name</th><th>Phone</th><th>Licence</th><th>Day Charge</th><th>Status</th></tr></thead>
                <tbody id="vfBody">
                <tr th:each="d : ${drivers}">
                    <td th:text="${d.id}">1</td>
                    <td th:text="${d.name}">name</td>
                    <td th:text="${d.phone} ?: '—'">—</td>
                    <td th:text="${d.licenceNumber}">DL</td>
                    <td>[[${currencySymbol}]]<span th:text="${d.dailyCharge} ?: '—'">800</span></td>
                    <td><span class="badge"
                              th:classappend="${d.status.name() == 'AVAILABLE'} ? 'badge-confirmed' : (${d.status.name() == 'ON_TRIP'} ? 'badge-pending' : 'badge-cancelled')"
                              th:text="${d.status}">AVAILABLE</span></td>
                </tr>
                <tr th:if="${#lists.isEmpty(drivers)}"><td colspan="6" style="color:#888">No drivers 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>
