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

<section>
    <div class="container">
        <div class="section-title">
            <h2>Available Cars</h2>
            <p th:if="${pickup != null}"
               th:text="'Showing cars available between ' + ${pickup} + ' and ' + ${ret} + ' (' + ${days} + ' day' + (${days} > 1 ? 's' : '') + ')'">dates</p>
            <p th:unless="${pickup != null}">All vehicles currently in service</p>
        </div>

        <!-- Filter bar -->
        <form class="filter-bar" th:action="@{/cars}" method="get">
            <div class="field"><label>Pickup</label><input type="date" name="pickup" th:value="${pickup}"/></div>
            <div class="field"><label>Return</label><input type="date" name="ret" th:value="${ret}"/></div>
            <div class="field">
                <label>Type</label>
                <select name="type">
                    <option value="">Any</option>
                    <option th:each="t : ${carTypes}" th:value="${t}" th:text="${t}" th:selected="${type == t}"></option>
                </select>
            </div>
            <div class="field">
                <label>Min seats</label>
                <select name="minSeats">
                    <option value="">Any</option>
                    <option th:each="n : ${ {2,4,5,7} }" th:value="${n}" th:text="${n + '+'}" th:selected="${minSeats == n}"></option>
                </select>
            </div>
            <div class="field">
                <label>Transmission</label>
                <select name="transmission">
                    <option value="">Any</option>
                    <option th:each="tr : ${transmissions}" th:value="${tr}" th:text="${tr}" th:selected="${transmission == tr}"></option>
                </select>
            </div>
            <div class="field"><label>Max price/day</label><input type="number" name="maxPrice" th:value="${maxPrice}" th:placeholder="${currencySymbol}"/></div>
            <div class="field">
                <label>Driver</label>
                <label style="font-weight:400;font-size:13px;display:flex;align-items:center;gap:6px;height:42px">
                    <input type="checkbox" name="withDriver" value="true" th:checked="${withDriver}"/> With driver
                </label>
            </div>
            <div class="field" style="justify-content:flex-end">
                <label>&nbsp;</label>
                <button class="btn btn-primary" type="submit">Search</button>
            </div>
        </form>

        <p th:if="${withDriver}" style="font-size:13px;color:#666;margin-bottom:14px">
            <span th:if="${availableDrivers > 0}" th:text="${availableDrivers + ' driver(s) available for chauffeur bookings.'}">drivers</span>
            <span th:if="${availableDrivers == 0}" style="color:#e23b3b">No drivers currently available — you can still self-drive.</span>
        </p>

        <div th:if="${#lists.isEmpty(cars)}" style="text-align:center;color:#888;padding:40px">
            No cars match your search. <a th:href="@{/cars}" style="color:#f7941d">Reset filters &rarr;</a>
        </div>

        <div class="vehicles-grid">
            <div th:each="car : ${cars}" class="vehicle-card">
                <div class="vehicle-img" th:classappend="${car.imageUrl == null} ? 'placeholder' : ''">
                    <img th:if="${car.imageUrl != null}" th:src="${car.imageUrl}" th:alt="${car.make}"/>
                    <span th:unless="${car.imageUrl != null}" th:text="${#strings.substring(car.make,0,1)}">C</span>
                </div>
                <div class="vehicle-body">
                    <span class="tag" th:text="${car.type}">SUV</span>
                    <h3 th:text="${car.make + ' ' + car.model}">Car name</h3>
                    <div class="specs">
                        <span th:text="${car.seats + ' seats'}">5 seats</span>
                        <span th:text="${car.transmission}">Manual</span>
                        <span th:text="${car.fuelType}">Petrol</span>
                    </div>
                    <div class="feature-tags" th:if="${not #sets.isEmpty(car.featureTags)}">
                        <span class="ftag" th:each="ft : ${car.featureTags}" th:text="${ft}">AC</span>
                    </div>
                    <div class="price-row">
                        <div class="price">
                            <span th:if="${days != null}">
                                [[${currencySymbol}]]<span th:text="${car.pricePerDay * days}">0</span>
                                <small th:text="'/ ' + ${days} + ' day' + (${days} > 1 ? 's' : '')">/ days</small>
                            </span>
                            <span th:unless="${days != null}">
                                [[${currencySymbol}]]<span th:text="${car.pricePerDay}">2000</span> <small>/ day</small>
                            </span>
                        </div>
                        <a class="btn btn-primary btn-sm"
                           th:href="@{/cars/{id}(id=${car.id}, pickup=${pickup}, ret=${ret})}">View</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

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