<!-- Listing search result -->
<!-- Notes:
    List of all listings that match the search query
    Each listing should have a link to view it
    Each listing should have a link to bookmark it
    Filter settings should be displayed
        by default, all listings should be shown
        by default, within 6km of the user's location, expand until min 3 listings shown
        options: ratings, price, distance
    Sort settings should be displayed
        by Best Match (default), listings shown in distance order
            (could) if the user is logged in, show their nearby (3km) bookmarks at the top
        by Ratings, listings shown in descending order of average ratings
-->

<%- include('../partials/header') %>
<%- include('../partials/nav') %>

<div class="listings container">
    <div class="listings-search row row-auto m-3 align-items-center">
        <h5 class="col-auto fs-2">Search results for...</h5>
        <form class="col" action="/listings" method="GET">
            <div class="input-group searchbar">
                <input type="text" name="search" class="form-control" style="min-width: 200px;" value="<%= searchQuery %>">
                <button type="submit" class="btn btn-secondary"><i class="bi bi-search"></i></button>
            </div>
        </form>
        <button class="col-auto btn btn-secondary font-btn ms-3"><i class="bi bi-geo-alt-fill"></i> Use my location</button>
    </div>
    <div class="row mx-3">
        <section class="filter col-auto"></section>
        <section class="listings col container">
            <div class="row d-flex">
                <form class="listings-sort row mt-4" action="/listings" method="GET">
                    <div class="input-group align-items-center justify-content-end">
                        <input type="hidden" name="search" value="<%= searchQuery %>">
                        <label for="sort-by">SORT &nbsp;</label>
                        <select name="sort-by" id="sort-by" class="sort">
                            <option <%= sortBy === 'best-match' ? 'selected' : '' %> value="best-match">Best Match</option>
                            <option <%= sortBy === 'ratings' ? 'selected' : '' %> value="ratings">Avg. Rating</option>
                            <option <%= sortBy === 'distance' ? 'selected' : '' %> value="distance">Distance</option>
                        </select>
                        <button type="submit" class="btn btn-secondary font-btn ms-2 py-0">Apply</button>
                    </div>
                </form>
            </div>
            <div class="scrollable row mt-3 p-2 overflow-auto">
                <% listings.forEach(function (listing){ %>
                    <a href="/listings/<%= listing.id %>" class="link-underline link-underline-opacity-0 text-decoration-none text-black">
                        <article class="search container d-flex flex-row">
                            <div class="col-2 d-flex flex-column justify-content-center align-items-center me-4 p-1 text-center fs-6">
                                <% if (listing.distance) {  %>
                                    <p>
                                        <%= listing.distance %> km
                                    </p>
                                <% } %>
                                <p>
                                    <% for (let i = 0; i < Math.floor(listing.stars); i++) { %>
                                        <i class="bi bi-star-fill"></i>
                                    <% } %>
                                    <% if (listing.stars % 1 >= 0.5 && listing.stars % 1 <= 0.9) { %>
                                    <i class="bi bi-star-half"></i>
                                    <% } %>
                                    <% for (let i = 0; i < 5 - Math.ceil(listing.stars); i++) { %>
                                    <i class="bi bi-star"></i>
                                    <% } %>
                                    <br>
                                    <% if (listing.numReviews === 0) {  %>
                                        No Reviews
                                    <% } else { %>
                                        <%= listing.rating  %> (<%= listing.numReviews  %>)
                                    <% } %>
                                </p>
                            </div>
                            <div class="col d-flex flex-column justify-content-center align-items-start p-1 me-4 text-left">
                                <h3 class="row title text-primary fw-bold text-break fs-2"><%= listing.title %></h3>
                                <p class="row fst-italic fs-5"><%= listing.subtitle %></p>
                                <!-- <p class="row">Products: X, Y, X</p> -->
                            </div>
                            <div class="col-auto d-flex flex-row justify-content-center align-items-center p-1 text-center">
                                <i class="bi bi-arrow-right-square-fill"></i>
                            </div>
                        </article>
                    </a>
                <% }) %>
            </div>
            <div class="row row-auto"></div>
        </section>
    </div>
</div>

<%- include('../partials/footer') %>