<!-- User's bookmarks -->
<!-- Notes:
    List of all listings they've bookmarked 
    Each listing should have a link to view it
    Each listing should have a link to remove it from their bookmarks
-->

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

<div class="bookmarks container">
    <div class="row my-4 text-center">
        <h1 class="title"><%= title %> </h1>
    </div>
    <div class="row mx-3">
        <section class="filter col-auto"></section>
        <section class="listings col-auto container">
            <div class="scrollable row mt-3 p-2 overflow-auto">
                <% listings.forEach(function (listing){ %>
                    <article class="my-listings 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">
                            <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">
                            <a href="/listings/<%= listing.id %>" class="btn btn-secondary font-btn"><i class="bi bi-box-arrow-up-right"></i> Open</a>
                            <a href="#" class="link-danger ms-3 fs-4"><i class="bi bi-bookmark-x-fill"></i></a>                      
                        </div>
                    </article>
                <% }) %>
            </div>
        </section>
    </div>
</div>

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