<!-- User's posted reviews -->
<!-- Notes:
    List of all reviews they've left
    Each review should have a link to the listing it's for
    Each review should have a link to edit/delete it
-->

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

<div class="reviews 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="reviews col-auto container">
            <div class="scrollable row mt-3 p-2 overflow-auto">
                <% reviews.forEach(function (review){ %>
                    <article class="review container d-flex flex-row my-2">
                        <div class="col-auto d-flex flex-column justify-content-center align-items-center me-4 p-1 text-muted">
                            <div class="d-flex flex-row fs-6">
                                <span class="text-end" style="min-width: 10px;"><%= review.helpedUsersIds.length %></span>
                                <span>&nbsp;helped</span>
                            </div>
                        </div>
                        <div class="col d-flex flex-column justify-content-center p-1 me-4 text-center">
                            <em class="fs-5">"<%= review.comment %>"</em>
                            <div>
                                on <a href="/listings/<%= review.listingId %>" class="link-info link-underline link-underline-opacity-0"><%= review.listingTitle %></a>
                            </div>
                        </div>
                        <div class="col-auto d-flex flex-row justify-content-center align-items-center p-1 text-center">
                            <a href="#" class="link-info ms-3 fs-5"><i class="bi bi-pencil-fill"></i></a>
                            <form action="/account/review/<%= review.id %>?_method=DELETE" method="POST" class="delete">
                                <input type="hidden" name="returnTo" value="account/reviews">
                                <button class="btn btn-danger ms-3"><i class="bi bi-trash3-fill"></i></button>
                            </form>                       
                        </div>
                    </article>
                <% }) %>
            </div>
        </section>
    </div>
</div>

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