<!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>Search Results</title>
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/default-styling.css">
    <link rel="stylesheet" href="/css/form-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('components/navigation/header-admin') %>
            <% break; case 'user' :%>
                <%- include('components/navigation/header-user') %>
                    <% break; case 'anon' :%>
                        <%- include('components/navigation/header') %>
                            <% break; }%>
                                <!-- END OF HEADER -->

                                <div class="wide-grid-section">
                                    <div class="main-menu">
                                        <form action="/searchresults">
                                            <div class="searchbar-container-secondary">
                                                <input type="text" name="search" id="search-secondary"
                                                    value="<%=search%>">
                                                <button type="submit" class="boxicon-submit">
                                                    <span class="material-symbols-rounded">
                                                        search
                                                    </span>
                                                </button>
                                            </div>
                                            <div class="filter-menu">
                                                <div class="filter-section">
                                                    <h3>Category:</h3>
                                                    <select id="category-dropdown" name="category"
                                                        class="category-dropdown">
                                                        <%if(!category){%>
                                                            <option value="" selected hidden>Select category</option>
                                                            <%} else{%>
                                                                <option value="<%=category%>" selected hidden>
                                                                    <%=category%>
                                                                </option>
                                                                <%}%>
                                                                    <option value="">None</option>
                                                                    <%for(const cat of categories){%>
                                                                        <option value="<%=cat.Nama_Kategori%>">
                                                                            <%=cat.Nama_Kategori%>
                                                                        </option>
                                                                        <%}%>
                                                    </select>
                                                </div>

                                                <div class="filter-section">
                                                    <h3>Subcategory:</h3>
                                                    <select id="subcategory-dropdown" name="subcategory"
                                                        class="subcategory-dropdown">
                                                        <%if(!subcategory){%>
                                                            <option value="" selected hidden>Select subcategory</option>
                                                            <%} else{%>
                                                                <option value="<%=category%>" selected hidden>
                                                                    <%=subcategory%>
                                                                </option>
                                                                <%}%>
                                                                    <option value="">None</option>
                                                                    <%for(const scat of subcategories){%>
                                                                        <option value="<%=scat.Nama_Subkategori%>">
                                                                            <%=scat.Nama_Subkategori%>
                                                                        </option>
                                                                        <%}%>
                                                    </select>
                                                </div>

                                                <div class="filter-section">
                                                    <h3>Color:</h3>
                                                    <select id="color-dropdown" name="warna" class="color-dropdown">
                                                        <%if(!warna){%>
                                                            <option value="" selected hidden>Select color</option>
                                                            <%} else{%>
                                                                <option value="<%=warna%>" selected hidden>
                                                                    <%=warna%>
                                                                </option>
                                                                <%}%>
                                                                    <option value="">None</option>

                                                                    <%for(const color of colors){%>
                                                                        <option value="<%=color.Warna%>">
                                                                            <%=color.Warna%>
                                                                        </option>
                                                                        <%}%>

                                                    </select>
                                                </div>


                                                <div class="filter-section">
                                                    <h3>Brand:</h3>
                                                    <select id="brand-dropdown" name="brand" class="brand-dropdown">
                                                        <%if(!brand){%>
                                                            <option value="" selected hidden>Select brand</option>
                                                            <%} else{%>
                                                                <option value="<%=brand%>" selected hidden>
                                                                    <%=brand%>
                                                                </option>
                                                                <%}%>
                                                                    <option value="">None</option>
                                                                    <%for(const brn of brands){%>
                                                                        <option value="<%=brn.Nama_Merk%>">
                                                                            <%=brn.Nama_Merk%>
                                                                        </option>
                                                                        <%}%>
                                                    </select>
                                                </div>


                                            </div>
                                        </form>
                                        <div class="search-result-grid">
                                            <%for(const bag of bagsRes){%>
                                                <div class="result-item">
                                                    <img src="<%='../'+bag.Foto%>" alt="">
                                                    <h3 class="result-item-name">
                                                        <%=bag.namaTas%>
                                                    </h3>
                                                    <a href="<%='bag/'+bag.Id_Tas%>">View Detail</a>
                                                </div>
                                                <%}%>
                                        </div>
                                    </div>
                                </div>
</body>

</html>