<!--- Home page for HeelMeals
    TODO (for stories 1 & 2): 
    - add profile button
 -->
 <link href="/css/styles.css" rel="stylesheet" type="text/css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <a href="/app/home">
    <div class="title">
        <span class="material-symbols-outlined" style="color:white">
            lunch_dining
            </span>
        <h1 style="margin-left: 5px; margin-top: 0px">HeelMeals</h1>
    </div>
</a>

<div class="home-actions-container" >
    <a href="/app/profile">
        <button class="profile-button"> 
            <div style="display: flex; flex-direction: row; justify-content: space-evenly;">
                <span style="position: relative; top: 12px;left: 4px;">Profile</span>
                <span class="material-symbols-outlined">person</span>
            </div>
        </button>
    </a>
    <a href="/app/post">
        <button class="profile-button"> 
            <div style="display: flex; flex-direction: row; justify-content: space-evenly;">
                <span style="position: relative; top: 12px;left: 4px;">Post Review</span>
                <span class="material-symbols-outlined">rate_review</span>
            </div>
        </button>
    </a>
</div>


<!-- Now you can access the username from the reviews! 
    You can do this by saying reviews[i].username
-->
<div class="reviews-page-container">
    <% for(var i=0; i < reviews.length; i++) { %>
        <div style="display: flex; flex-direction: column; justify-content: flex-start;">
            <div style="margin-bottom: 10px;" class="review-box">
                <img class="review-image"src="/<%= reviews[i].photo %>">
                <div class="review-description" style = "margin-top: 0">
                    <h5 style="margin-bottom: 15px;"><%= reviews[i].title %></h5>
                    <div class="review-rating">
                        <% for(var j=0; j < reviews[i].rating; j++) { %>
                            <span class="fa fa-star checked"></span>
                        <% } %>
                        <% for(var k=0; k < 5 - reviews[i].rating; k++) { %>
                            <span class="fa fa-star unchecked"></span>
                        <% } %>
                    </div>
                    <h4><%= reviews[i].description %></h4>
                </div>
                <h5 style="position: relative; top: -50px; right:0px; color: gray">@<%= reviews[i].username%></h5>
            </div>
        </div>
    <% } %>
 </div> 