<!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 - </title>
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/default-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" />

</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="result-container">
                                    <div class="container-left" id="bagpost">
                                        <div class="title-container">
                                            <div class="result-image-container">
                                                <% console.log(bag.Foto);%>
                                                    <img src="../<%=bag.Foto%>" alt="" class="bagresult-image">
                                            </div>
                                            <div class="bagdetail-title">
                                                <h2>
                                                    <%=bag.namaTas%>
                                                </h2>
                                                <div class="judul-star">
                                                    <%for(let i=0;i<5;i++){%>
                                                        <%if(displayStar>0){%>
                                                            <%displayStar--;%>
                                                                <svg id="star3" xmlns="http://www.w3.org/2000/svg"
                                                                    height="24" viewBox="0 -960 960 960" width="24"
                                                                    fill="#ffd400" stroke="black">
                                                                    <path
                                                                        d="m233-80 65-281L80-550l288-25 112-265 112 265 288 25-218 189 65 281-247-149L233-80Z" />
                                                                </svg>
                                                                <%}else{%>
                                                                    <svg id="star4" xmlns="http://www.w3.org/2000/svg"
                                                                        height="24" viewBox="0 -960 960 960" width="24"
                                                                        stroke="black">
                                                                        <path
                                                                            d="m233-80 65-281L80-550l288-25 112-265 112 265 288 25-218 189 65 281-247-149L233-80Z" />
                                                                    </svg>
                                                                    <%}%>
                                                                        <%}%>
                                                                            <%=average%>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="detail">
                                            <p class="category"><strong>Category :</strong> Bags >
                                                <%=bag.Nama_Kategori%>
                                            </p>
                                            <p class="sub-category"><strong>Subcategory :</strong>
                                                <%=bag.Nama_Subkategori%>
                                            </p>
                                            <p class="dimension"><strong>Dimension :</strong>
                                                <%=bag.Dimensi%>
                                            </p>
                                            <p class="desc">
                                                <strong>Description :</strong><br>
                                                <%=bag.Deskripsi%>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="container-right">
                                        <div class="reviewUser">
                                            <% for(const review of reviews){%>
                                                <div class="review">
                                                    <div class="account-review-container">
                                                        <p class="userReviewName">
                                                            <%=review.Username%>
                                                        </p>
                                                        <a href="/profile/<%=review.Id_Account%>" style="all: unset;">
                                                            <button class="reviewProfileButton">Profile</button>
                                                        </a>
                                                    </div>
                                                    <%for(let i=0;i<5;i++){%>
                                                        <%if(review.Bintang>i){%>
                                                            <svg id="star3" xmlns="http://www.w3.org/2000/svg"
                                                                height="24" viewBox="0 -960 960 960" width="24"
                                                                fill="#ffd400" stroke="black">
                                                                <path
                                                                    d="m233-80 65-281L80-550l288-25 112-265 112 265 288 25-218 189 65 281-247-149L233-80Z" />
                                                            </svg>
                                                            <%}else{%>
                                                                <svg id="star4" xmlns="http://www.w3.org/2000/svg"
                                                                    height="24" viewBox="0 -960 960 960" width="24"
                                                                    stroke="black">
                                                                    <path
                                                                        d="m233-80 65-281L80-550l288-25 112-265 112 265 288 25-218 189 65 281-247-149L233-80Z" />
                                                                </svg>
                                                                <%}%>
                                                                    <%}%>
                                                                        <p class="review-text">
                                                                            <%=review.Isi_Review%>
                                                                        </p>
                                                                        <br>
                                                </div>
                                                <%}%>
                                        </div>
                                    </div>
                                </div>

                                <%- include('../navigation/footer') %>
</body>

</html>