<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BagsForYou - Share your review!</title>
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/default-styling.css">
    <link rel="stylesheet" href="/css/profile-styling.css">
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
    <script src="/js/script.js" defer></script>
</head>

<body>
    <!-- COMPONENT HEADER UTAMA -->
    <%switch(status){ case 'admin' :%>
        <%- include('../navigation/header-admin') %>
            <% break; case 'user' :%>
                <%- include('../navigation/header-user') %>
                    <% break; case 'anon' :%>
                        <%- include('../navigation/header') %>
                            <% break; }%>
                                <!-- END OF HEADER -->
                                <div id="profile-main" class="profile-container-account">
                                    <div class="user-information" id="self-profile">
                                        <div class="username-data-container">
                                            <a href="/profile" class="apaajabiargaitem">
                                                <h2 class="username-tag"><%- username %></h2>
                                            </a>
                                            <a href="/profile/edit">Edit</a>
                                        </div>
                                        <div class="following-follower-container">
                                            <p><strong><%=follow[0]%></strong> <a href="/profile/self/follower"
                                                    class="follower-info">Follower</a></p>
                                            <p><strong><%=follow[1]%></strong> <a href="/profile/self/following"
                                                    class="following-info">Following</a> </p>
                                        </div>
                                    </div>
                                    <!-- profile-self.ejs -->

                                    <!-- profile-self.ejs -->
                                    <div class="review-box">
                                        <% if (postResult===null) { %>
                                            <div class="empty-data">
                                                <h3>It's a bit empty here..</h3>
                                                <p>Add new review?</p>
                                                <a href="/addReview">Start reviewing</a>
                                            </div>
                                            <% } else { %>
                                                <div class="self-post">
                                                    <% reviews.forEach(review=> { %>
                                                        <div class="review-post">
                                                            <img src="../<%= review.Foto %>" alt=""
                                                                class="bag-picture-review">
                                                            <div class="review-information">
                                                                <h2>
                                                                    <%= review.namaTas %>
                                                                </h2>
                                                                <div id="star-for-bag">
                                                                    <% for (let i=0; i < review.Bintang; i++) { %>
                                                                        <svg xmlns="http://www.w3.org/2000/svg"
                                                                            height="18" viewBox="0 -960 960 960"
                                                                            width="18" id="star1" fill="#ffd700"
                                                                            stroke="black" stroke-width="20">
                                                                            <path
                                                                                d="m233-80 65-281L80-550l288-25 112-265 112 265 288 25-218 189 65 281-247-149L233-80Z" />
                                                                        </svg>
                                                                        <% } %>
                                                                </div>
                                                                <p>
                                                                    <%= review.Isi_Review %>
                                                                </p>
                                                            </div>
                                                        </div>
                                                        <% }) %>
                                                </div>
                                                <% } %>
                                    </div>
                                </div>
                                <%- include('../navigation/footer') %>
</body>

</html>