<!--
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⡤⠴⠒⠒⠒⢒⡶⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⠞⠁⠀⠀⠀⠀⠀⡾⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡴⠁⠀⠀⠀⠀⠀⠀⠀⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠞⠁⠀⢀⣀⣀⣀⡀⠀⠀⢧⠀⠀⠀⠀⠀⡴⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢀⣰⠿⠒⠋⠉⠉⠀⠀⠀⠈⠉⠓⠾⢄⣀⠀⠀⢠⡇⠸⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⣩⠏⠉⠒⢒⣲⡤⠤⣀⣀⠀⠀⠀⠀⠀⠈⠑⢤⡘⡄⠀⢳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⠀
⠀⠀⠀⠀⠀⢰⠾⣣⠴⠚⠉⠉⠀⠀⠀⠀⠀⠉⠓⠀⠀⠀⠀⠀⠀⠙⣧⠀⠀⢣⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⡤⣔⡿⡍⡇
⠀⠀⠀⠀⠀⢸⡼⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠆⠀⠀⢳⡀⠀⠀⠀⠀⠀⣀⡤⠞⠋⣡⠞⠉⠀⣇⡇
⠀⠀⠀⠀⣴⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡠⠴⠒⠛⠓⠚⠉⠉⠉⠁⠀⣴⡟⠁⠀⠀⠀⣿⠁
⠀⠀⠀⣼⣁⣠⡤⢴⠖⠒⠒⠦⠤⢴⣶⣢⠤⠤⠔⠚⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣞⡞⠀⠀⠀⠀⢰⢿⠀
⠀⠀⠀⠉⠉⢙⣦⠞⠀⡠⠞⠉⢉⡷⡄⠉⢙⡶⠃⠀⠀⠀⢀⣠⣦⣤⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡎⡼⠀⠀⠀⠀⠀⡜⡞⠀
⠀⠀⠀⣤⡖⠛⠀⠀⡜⠁⠀⡴⢋⣀⣹⣠⠋⠀⠀⠀⠀⣰⣿⠿⠛⠛⠿⣿⣷⣄⡀⠀⠀⠀⠀⠀⡼⢰⠃⠀⠀⠀⠀⡼⢱⠃⠀
⠀⢀⣴⠛⠀⠀⠀⢼⠁⠀⣼⢁⣿⡬⣿⠃⠀⠀⠀⠀⠐⠋⠁⠀⠀⠀⠀⠀⠙⢿⣷⣄⠀⠀⠀⣸⢃⡏⠀⠀⠀⢀⡜⢡⠏⠀⠀
⠀⠸⡿⠀⠀⠀⠀⢻⡀⠀⠀⠀⠉⢠⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⣿⠁⣀⡜⠁⡼⠀⠀⠀⡠⠋⣰⠋⠀⠀⠀
⠀⠀⣧⠀⠀⠀⠀⠈⢳⣀⣙⣦⡤⠋⠀⠀⠀⠀⠀⠀⠀⣰⠄⠀⠀⠀⠀⠀⠀⢤⠀⣹⠌⢩⠏⢠⣇⣠⠴⠊⢀⡼⠁⠀⠀⠀⠀
⠀⠀⠘⡆⢀⡴⠖⠋⠉⠉⠀⠀⠀⠀⠀⠀⠀⠘⢧⣤⣾⣷⣿⣿⣿⣷⣦⡀⠀⢸⠀⠻⣾⠉⠀⠀⠀⠀⢀⣠⠋⠀⠀⠀⠀⠀⠀
⠀⠀⢠⡟⣥⠤⠦⠤⠤⢤⣀⣀⠀⠀⠀⠀⠀⠀⠀⠉⠁⠀⠀⠉⠛⠿⣿⣿⣄⣸⠀⠈⠻⣇⠀⢀⣀⠤⠟⠓⠃⠀⠀⠀⠀⠀⠀
⠀⠀⠸⡆⢧⡀⠀⠀⠀⠀⠀⠈⠙⠲⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠉⠁⠀⠀⠀⣸⡍⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢳⡄⠙⢦⡀⠀⠀⠀⣀⡤⠞⠁⠀⠀⠀⠀⢀⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⡿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠙⢦⣀⣉⣷⡚⠉⠀⠀⠀⠀⠀⠀⠀⢀⡾⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⠼⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⣦⣴⠚⢁⡾⠋⠉⠳⢤⣀⢀⣀⣀⣠⠔⠋⠀⠀⠀⠀⠀⠀⣀⣠⠤⠖⠋⠁⢀⣺⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⢰⣷⡇⠀⡞⠀⠀⠀⠀⠀⡼⠋⠉⠁⠀⠀⣀⣀⠤⠴⠒⠊⠉⠉⠀⠀⠀⠀⠀⣼⣿⠻⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠈⢯⡛⢦⡀⠀⠀⠀⢀⡾⠥⠤⠔⠒⠊⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠰⡆⣸⣹⠛⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢠⡿⠀⢹⣶⣶⣖⡋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⡟⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⢀⡿⠿⠉⠉⠋⠀⠀⠉⠙⠶⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⡀⠹⢤⣀⣀⣀⣀⣀⡠⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⡰⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠢⣄⠀⠀⠀⡀⠀⠀⠀⠀⠀⠀⠀⣼⠇⠀⠀⠀⠀⠀⠙⠋⠩⠿⢿⣁⠀⠀⠀⠀⠀⠀
⡼⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠳⡄⠀⠉⠑⠶⢤⣀⣀⣠⣴⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠿⣅⠀⠀⠀⠀⠀
⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠂⠀⠀⠀⠀⠀⠉⠉⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢦⠀⠀⠀⠀
⡅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⠀⠀⠀
⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠀⠀⠀
⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠀⠀⠀
Yep, this project is made by a furry owo >;3 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta http-equiv="X-Frame-Options" content="DENY">
    <meta http-equiv="Referrer-Policy" content="no-referrer">
    
    <link href="/static/css/main.css?v=1777713660" rel="stylesheet">
    <link href="/static/themes.php?v=1777713660" rel="stylesheet">
    <link rel="stylesheet" href="/static/js/sweetalert2.min.css?v=1747740437">
    <link rel="stylesheet" href="/static/lib/tippy/tippy.css?v=1747740437">
    <link rel="stylesheet" href="/static/css/bootstrap-icons.css?v=1747740437">

    <script src="/static/js/sweetalert2.min.js?v=1747740437" defer></script>
    <script src="/static/header_scripts.js?v=1777713660" defer></script>
    <script src="/static/js/notifications.js?v=1747740437" defer></script>
    <script src="/static/lib/tippy/popper.min.js?v=1747740437" defer></script>
    <script src="/static/lib/tippy/tippy.umd.min.js?v=1747740437" defer></script>

    <link rel="icon" type="image/png" href="/static/favicon/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="/static/favicon/favicon.svg" />
    <link rel="shortcut icon" href="/static/favicon/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/static/favicon/apple-touch-icon.png" />
    <meta name="apple-mobile-web-app-title" content="goSupertools" />

    <script>
        if (localStorage.getItem("dark-mode") === "enabled") {
            document.documentElement.classList.add("dark-mode");
        }
    </script>
    
        
        <style>
        .dark-mode body {
            background-image: url('/static/backgrounds/testt.png');
        }
    </style>
        
        
    <style>
                
            </style>
</head>
<body>
    
        
    <div class="topbar">
        <div class="topbar-container">
            <div class="logo-container">
                <div class="topbar-title logo">
                    <a href="/">
                        <img src="/static/logos/logo.png" alt="Logo" width="180">
                    </a>
                </div>
                <div id="banner" class="banner">
                    <div class="note" id="bannerNote">The new Marketplace is live! Be sure to check it out &lt;3 - more info in the newspost: https://gosuper.tools/news.php?id=75</div>
                    <button id="closeBanner">&times;</button>
                </div>
                <div class="topbar-subtitle">goSupertools
                </div>
            </div>
            <div class="topbar-button-container">

                <a href="/" class="topbar-button">Home</a>
                <a href="/list/" class="topbar-button">Item
                    Database</a>
                <a href="/sale/"
                    class="topbar-button">Marketplace</a>
                <a href="/list/catwalk.php"
                    class="topbar-button">Catwalk</a>
                <a href="/analyzer-v2/"
                    class="topbar-button">Wardrobe
                    Analyzer</a>

                                </div>
                <div class="topbar-links">
                    <button id="registerButton" class="profile-button"><i class="bi bi-person-plus-fill" style="font-size: 18px; font-weight: bold; margin-right: 8px;"></i>Register</button>
                    <button id="loginButton" class="log-in"><i class="bi bi-box-arrow-in-right" style="font-size: 18px; font-weight: bold; margin-right: 8px;"></i>Login</button>
                                <div class="search-container">
                    <input type="text" id="linkInput" name="searchInput" class="search-input"
                        placeholder="Enter Item Link" autocomplete="off">
                    <button id="srchButton" class="search-button">
                        <i class="bi bi-search" style="font-size: 18px; font-weight: bold;"></i>
                    </button>
                </div>

                <div id="dark-mode-toggle" class="toggle-container">
                    <div class="toggle-switch">
                        <i class="bi bi-moon-fill moon-icon" style="font-size: 18px; color: #D9D9D9;"></i>
                        <i class="bi bi-sun-fill sun-icon" style="font-size: 18px; color: #606060;"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <div class="footer">    
    <div class="footer-links">
        <span><a href="/item/uD8xMxhTE84vMqT0PDyQJ">Random Item</a></span> | 
        <span><a href="/help/">Help</a></span> | 
        <span><a href="/help/info.php">Information</a></span> | 
        <span><a href="/help/safety.php">Safety</a></span> | 
        <span><a href="/help/terms.php">Terms</a></span> | 
        <span><a href="/help/rules.php">Rules</a></span> | 
        <span><a href="/help/thanks.php">Credits</a></span> | 
        <span><a href="/help/feedback.php">Feedback</a></span> | 
        <span><a href="/help/imprint.php">Imprint</a></span>
            </div>
    <div class="footer-note">
        <span>Thanks to © 2024 Momio Aps. All Rights Reserved. Used with permission.</span>
    </div>
</div>

<style>
    .gsm-ad-container {
        width: 100%;
        max-width: inherit;
        padding: 20px 0;
        text-align: center;
        margin: 10px auto 80px auto;
    }
    
    .gsm-ad-banner {
        background-color: var(--gst-background-columncontainer-opacity);
        border-radius: 25px;
        padding: 10px;
        display: inline-block;
        max-width: 100%;
    }
    
    .dark-mode .gsm-ad-banner {
        background-color: #2a2a2a;
        color: #e0e0e0;
    }
    
    .gsm-ad-content {
        min-height: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }
    
    .column-container {
        margin-bottom: 100px;
    }
</style>


<title>goSupertools - My Portfolio</title>
<style>
    .user-info {
        margin: 20px 0;
        font-size: 18px;
        font-weight: bold;
    }

    .create-portfolio-button button,
    .stats-button button,
    .look-button {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 16px;
        z-index: 2;
        background-color: var(--gst-background-pink);
        border-radius: 17px;
        padding: 9px;
        text-align: end;
        color: var(--gst-text-on-pink);
        font-weight: 500;
        padding-right: 15px;
        padding-left: 15px;
        margin: 10px;
        border: none;
        margin-right: 140px;
        cursor: pointer;
        transition: 0.2s;
        text-decoration: none;
    }

    .create-portfolio-button button:hover,
    .stats-button button:hover,
    .look-button:hover {
        background-color: var(--gst-background-pink-hover);
    }

    .stats-button button {
        right: unset;
        left: 0;
        margin-right: unset;
    }
    .look-button {
        left: 0;
  right: unset;
  margin-left: 125px;
    }

    .error {
        color: red;
        font-weight: bold;
        margin-top: 20px;
        color: var(--gst-text-555);
    }

    .look {
        padding: 20px;
        width: 150px;
        border-radius: 10px;
        background-color: var(--gst-background-lightgray);
        border: 1px solid var(--gst-border-pink);
    }

    .portfolio-item {
        padding: 10px;
        margin: 10px 10px 0 10px;
        border-radius: 10px;
        background-color: var(--gst-background-white2);
    }

    .portfolio-item:hover {
        background-color: var(--gst-gray-hover);
    }

    .look-content {
        margin-top: 10px;
        height: 300px;
        position: relative;
        margin-bottom: 20px;
    }

    .dressup-container {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .look-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        justify-content: center;
        min-height: 540px;
    }

    .buttonwrappr svg {
        width: 30px;
        height: auto;
    }

    .buttonwrappr {
        background-color: var(--gst-background-white2);
        border-radius: 15px;
        display: flex;
        justify-content: space-evenly;
        padding: 5px 0 2px 0;
    }

    .likes {
        margin-top: 10px;
        font-weight: bold;
    }

    .add-to-board-btn,
    .edit-look-btn,
    .remove-look-btn,
    .copy-url-btn {
        width: fit-content;
        background-color: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        display: flex;
        align-items: center;
        font-size: 16px;
        margin-bottom: 4px;
    }

    .div-wrapper {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        max-height: 0;
        overflow-y: auto;
        transition: max-height 0.3s ease;
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
    }

    .div-wrapper.open {
        max-height: 250px;
    }

    .dressup-item-count {
        font-size: 14px;
        color: var(--gst-text-555);
        cursor: pointer;
        text-decoration: underline;
        text-align: center;
        transition: transform 0.3s ease;
        padding: 6px;
    }

    .dressup-item-count svg {
        height: 17px;
        vertical-align: bottom;
        padding-right: 2px;
    }

    .dressup-mannequin {
        background-image: url('../static/images/mannequin.png');
        background-repeat: no-repeat;
        height: 300px;
        width: 140px;
        z-index: 1;
    }

    .dressup-item {
        z-index: 2;
    }


    .img-wrapper {
        margin: 2px;
        background-color: #818181;
        padding: 5px;
        border-radius: 8px;
        width: 55px;
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .img-wrapper img {
        max-width: 100%;
        max-height: 100%;
    }

    .img-wrapper:hover {
        cursor: pointer;
        filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.8));
    }

    .vibetag-item {
        font-size: 12px;
        background-color: var(--gst-background-pink);
        padding: 5px 10px;
        border-radius: 100px;
        transition: 0.3s;
        min-height: 15px;
        color: transparent;
        border: 0.69px solid var(--gst-border-white);
        width: fit-content;
        font-weight: bold;
        margin: 10px 0 auto;
        white-space: nowrap;
        overflow: hidden;
        max-width: 14px;
        cursor: pointer;
    }

    .vibetag-item img {
        height: 15px;
        vertical-align: top;
        padding-right: 3px;
    }

    .vibetag {
        display: flex;
        justify-content: center;
        gap: 5px;
    }

    .vibetag-item:hover {
        max-width: 150px;
        overflow: visible;
        color: var(--gst-text-on-pink);
    }

    .look-title {
        color: var(--gst-text-pink);
        font-weight: 700;
        font-size: 14px;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .board-title {
        color: var(--gst-text-pink);
        font-weight: 700;
        font-size: 17px;
    }

    .portfolio-list {
        width: 422px;
  border: 1px solid var(--gst-border-pink);
  position: absolute;
  border-radius: 10px;
  margin-top: 84.5px;
  margin-left: 26px;
  height: 500px;
  overflow-y: auto;
  background-color: var(--gst-background-lightgray);
  padding-bottom: 10px;
    }

    .header-container {
        width: 2000px;
        text-align: center;
    }

    .header-container h2 {
        font-size: 36px;
        font-weight: 700;
        margin: 0;
        padding: 20px;
    }

    .dressup-item,
    .dressup-back-item,
    .dressup-mannequin {
        position: absolute;
    }

    .dressup-back-item {
        z-index: 0;
    }

    .look-modelname {
        color: var(--gst-text-555);
        font-weight: 500;
        font-size: 12px;
        margin-bottom: 5px;
    }

    .board-info {
        color: var(--gst-text-555);
    }

    .pagination-info {
        background-color: var(--gst-background-pink-hover);
        color: #fff;
        border-radius: 7px;
        font-size: 17px;
        font-weight: 700;
        padding: 10px 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 20px;
        margin: 0 5px 0 5px;
    }

    .pagination a {
        margin: 0 5px 0 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--gst-background-pink-hover);
        border-radius: 7px;
        padding: 10px 20px;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        height: 20px;
        width: 0px;
        transition: 0.2s;
    }

    .pagination a:hover {
        background-color: var(--gst-background-pink);
    }

    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 15px;
        width: 940px;
        margin-bottom: 15px;
    }

    .pagination img {
        filter: invert(100%);
        height: 24px;
        width: 24px;
    }
</style>
</head>
<body>
    <div class="column-container">
    <a href="/help/help.php?id=26"><div id="questionIcon">Help</div></a>
        <div class="header-container">
            <h2>My Portfolio</h2>
        </div>
        
                    <div class="error">You are not logged in or user not found.</div>
            </div>

    <script>
                        document.addEventListener("DOMContentLoaded", function () {
            const countItemsLinks = document.querySelectorAll('.dressup-item-count');
            let currentOpenWrapper = null;

            const urlParams = new URLSearchParams(window.location.search);
            const filterValue = urlParams.get('filter');
            if (filterValue) {
                const filterSelect = document.querySelector('select[name="filter"]');
                filterSelect.value = filterValue;
            }

            const likedLooks = JSON.parse(localStorage.getItem('likedLooks')) || [];

            countItemsLinks.forEach(link => {
                link.addEventListener('click', function () {
                    const lookDiv = this.closest('.look');
                    const imgWrapper = lookDiv.querySelector('.div-wrapper');

                    if (imgWrapper.classList.contains('open')) {
                        imgWrapper.classList.remove('open');
                        resetDressupItems(lookDiv);
                        currentOpenWrapper = null;
                    } else {
                        if (currentOpenWrapper) {
                            currentOpenWrapper.classList.remove('open');
                            const prevLookDiv = currentOpenWrapper.closest('.look');
                            resetDressupItems(prevLookDiv);
                        }

                        imgWrapper.innerHTML = '';
                        const dressupContainer = lookDiv.querySelector('.dressup-container');
                        const dressupItems = dressupContainer.querySelectorAll('.dressup-item');

                        dressupItems.forEach(item => {
                            const imgSrc = item.querySelector('img').src;
                            const imgElement = document.createElement('div');
                            imgElement.classList.add('img-wrapper');
                            imgElement.setAttribute('data-img-src', imgSrc);
                            imgElement.innerHTML = '<img src="' + imgSrc + '">';
                            imgElement.addEventListener('mouseenter', function () {
                                highlightDressupItem(imgSrc, lookDiv);
                            });
                            imgElement.addEventListener('mouseleave', function () {
                                resetDressupItems(lookDiv);
                            });
                            imgElement.addEventListener('click', function () {
                                openItemInNewTab(item.dataset.uiid);
                            });

                            imgWrapper.prepend(imgElement);
                        });

                        imgWrapper.classList.add('open');
                        currentOpenWrapper = imgWrapper;
                    }
                });
            });

            function highlightDressupItem(imgSrc, lookDiv) {
                const dressupItems = lookDiv.querySelectorAll('.dressup-item img');
                const isDarkMode = document.documentElement.classList.contains('dark-mode');
                const shadowColor = isDarkMode ? 'rgba(255, 255, 255, 0.8)' : 'rgba(0, 0, 0, 0.8)';
                
                dressupItems.forEach(item => {
                    if (item.src === imgSrc) {
                        item.style.filter = `drop-shadow(0 0 4px ${shadowColor})`;
                    } else {
                        item.style.filter = 'none';
                    }
                });
            }

            function resetDressupItems(lookDiv) {
                const dressupItems = lookDiv.querySelectorAll('.dressup-item img');
                dressupItems.forEach(item => {
                    item.style.filter = 'none';
                });
            }

            function openItemInNewTab(uiid) {
                const url = '/item/' + uiid;
                window.open(url, '_blank');
            }

            function handleLikeButtonClick(event) {
                const lookDiv = event.target.closest('.look');
                const lookID = lookDiv.dataset.lookId;
                const likeButton = event.target.closest('.like-button');
                const likeImg = likeButton.querySelector('.like-img');
                const likeCount = likeButton.querySelector('span');

                let likedLooks = JSON.parse(localStorage.getItem('likedLooks')) || [];

                if (likedLooks.includes(lookID)) {
                    alert('You have already liked this look.');
                    return;
                }

                fetch('../api/list/like.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ lookID: lookID })
                }).then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            likedLooks.push(lookID);
                            localStorage.setItem('likedLooks', JSON.stringify(likedLooks));
                            likeCount.innerText = data.likes;
                            likeButton.disabled = true;
                            likeImg.src = '../static/icons/fav2.svg';
                        } else {
                            alert('Error liking the look.');
                        }
                    }).catch(error => {
                        console.error('Error:', error);
                    });
            }

            const likeButtons = document.querySelectorAll('.like-button');
            likeButtons.forEach(button => {
                const lookID = button.closest('.look').dataset.lookId;
                if (likedLooks.includes(lookID)) {
                    button.disabled = true;
                    const likeImg = button.querySelector('.like-img');
                    likeImg.src = '../static/icons/fav2.svg';
                } else {
                    button.addEventListener('click', handleLikeButtonClick);
                }
            });
        });


document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('createPortfolioBtn').addEventListener('click', function() {
        Swal.fire({
            title: 'Create Board',
            input: 'text',
            inputLabel: 'Board Name',
            inputPlaceholder: 'Enter Board name',
            inputAttributes: {
                maxlength: 60
            },
            showCancelButton: true,
            confirmButtonText: 'Create',
            preConfirm: (portfolioName) => {
                if (!portfolioName) {
                    Swal.showValidationMessage('Please enter a Board name');
                }
                return portfolioName;
            }
        }).then((result) => {
            if (result.isConfirmed) {
                const portfolioName = result.value;
                fetch('../api/list/save_portfolio.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: new URLSearchParams({ portfolio_name: portfolioName })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire('Success', 'Board created successfully!', 'success')
                        .then(() => {
                            window.location.reload();
                        });
                    } else {
                        Swal.fire('Error', data.message || 'Failed to create Board.', 'error');
                    }
                })
                .catch(() => {
                    Swal.fire('Error', 'An error occurred. Please try again later.', 'error');
                });
            }
        });
    });
document.querySelectorAll('.edit-look-btn').forEach(function(button) {
    button.addEventListener('click', function() {
        const lookId = this.getAttribute('data-look-id');
        const currentTitle = this.closest('.look').querySelector('.look-title').textContent;
        const currentVibes = this.getAttribute('data-vibe').split(',');

        
        Swal.fire({
            title: 'Edit Look',
            html: `
                <input id="swal-input-title" class="swal2-input" placeholder="Title" value="${currentTitle}" maxlength="60">
                <div style="margin-top: 10px;">
                    <label for="vibe1">Vibe Tag 1:</label>
                    <select id="vibe1" class="swal2-select">
                        <option value="">Select Vibe</option>
                        <option value=\"Activities\" ${currentVibes[0] === 'Activities' ? 'selected' : ''}>Activities</option><option value=\"Alternative\" ${currentVibes[0] === 'Alternative' ? 'selected' : ''}>Alternative</option><option value=\"Bohemian\" ${currentVibes[0] === 'Bohemian' ? 'selected' : ''}>Bohemian</option><option value=\"Casual\" ${currentVibes[0] === 'Casual' ? 'selected' : ''}>Casual</option><option value=\"Chic\" ${currentVibes[0] === 'Chic' ? 'selected' : ''}>Chic</option><option value=\"Cultural\" ${currentVibes[0] === 'Cultural' ? 'selected' : ''}>Cultural</option><option value=\"Eccentric\" ${currentVibes[0] === 'Eccentric' ? 'selected' : ''}>Eccentric</option><option value=\"Fantasy\" ${currentVibes[0] === 'Fantasy' ? 'selected' : ''}>Fantasy</option><option value=\"Goth\" ${currentVibes[0] === 'Goth' ? 'selected' : ''}>Goth</option><option value=\"Historic\" ${currentVibes[0] === 'Historic' ? 'selected' : ''}>Historic</option><option value=\"Holiday\" ${currentVibes[0] === 'Holiday' ? 'selected' : ''}>Holiday</option><option value=\"Inclusivity\" ${currentVibes[0] === 'Inclusivity' ? 'selected' : ''}>Inclusivity</option><option value=\"Masculine\" ${currentVibes[0] === 'Masculine' ? 'selected' : ''}>Masculine</option><option value=\"Sci-fi\" ${currentVibes[0] === 'Sci-fi' ? 'selected' : ''}>Sci-fi</option><option value=\"Sexy\" ${currentVibes[0] === 'Sexy' ? 'selected' : ''}>Sexy</option><option value=\"Summer\" ${currentVibes[0] === 'Summer' ? 'selected' : ''}>Summer</option><option value=\"Sweet\" ${currentVibes[0] === 'Sweet' ? 'selected' : ''}>Sweet</option><option value=\"Urban\" ${currentVibes[0] === 'Urban' ? 'selected' : ''}>Urban</option><option value=\"Wacky\" ${currentVibes[0] === 'Wacky' ? 'selected' : ''}>Wacky</option><option value=\"Winter\" ${currentVibes[0] === 'Winter' ? 'selected' : ''}>Winter</option>                    </select>
                </div>
                <div style="margin-top: 10px;">
                    <label for="vibe2">Vibe Tag 2:</label>
                    <select id="vibe2" class="swal2-select">
                        <option value="">Select Vibe</option>
                        <option value=\"Activities\" ${currentVibes[1] === 'Activities' ? 'selected' : ''}>Activities</option><option value=\"Alternative\" ${currentVibes[1] === 'Alternative' ? 'selected' : ''}>Alternative</option><option value=\"Bohemian\" ${currentVibes[1] === 'Bohemian' ? 'selected' : ''}>Bohemian</option><option value=\"Casual\" ${currentVibes[1] === 'Casual' ? 'selected' : ''}>Casual</option><option value=\"Chic\" ${currentVibes[1] === 'Chic' ? 'selected' : ''}>Chic</option><option value=\"Cultural\" ${currentVibes[1] === 'Cultural' ? 'selected' : ''}>Cultural</option><option value=\"Eccentric\" ${currentVibes[1] === 'Eccentric' ? 'selected' : ''}>Eccentric</option><option value=\"Fantasy\" ${currentVibes[1] === 'Fantasy' ? 'selected' : ''}>Fantasy</option><option value=\"Goth\" ${currentVibes[1] === 'Goth' ? 'selected' : ''}>Goth</option><option value=\"Historic\" ${currentVibes[1] === 'Historic' ? 'selected' : ''}>Historic</option><option value=\"Holiday\" ${currentVibes[1] === 'Holiday' ? 'selected' : ''}>Holiday</option><option value=\"Inclusivity\" ${currentVibes[1] === 'Inclusivity' ? 'selected' : ''}>Inclusivity</option><option value=\"Masculine\" ${currentVibes[1] === 'Masculine' ? 'selected' : ''}>Masculine</option><option value=\"Sci-fi\" ${currentVibes[1] === 'Sci-fi' ? 'selected' : ''}>Sci-fi</option><option value=\"Sexy\" ${currentVibes[1] === 'Sexy' ? 'selected' : ''}>Sexy</option><option value=\"Summer\" ${currentVibes[1] === 'Summer' ? 'selected' : ''}>Summer</option><option value=\"Sweet\" ${currentVibes[1] === 'Sweet' ? 'selected' : ''}>Sweet</option><option value=\"Urban\" ${currentVibes[1] === 'Urban' ? 'selected' : ''}>Urban</option><option value=\"Wacky\" ${currentVibes[1] === 'Wacky' ? 'selected' : ''}>Wacky</option><option value=\"Winter\" ${currentVibes[1] === 'Winter' ? 'selected' : ''}>Winter</option>                    </select>
                </div>
            `,
            showCancelButton: true,
            confirmButtonText: 'Save',
            preConfirm: () => {
                const newTitle = document.getElementById('swal-input-title').value;
                const newVibe1 = document.getElementById('vibe1').value;
                const newVibe2 = document.getElementById('vibe2').value;

                if (!newTitle) {
                    Swal.showValidationMessage('Please enter a title');
                }

                if (newVibe1 === newVibe2 && newVibe1 !== '') {
                    Swal.showValidationMessage('Please use two different vibe tags');
                }

                return { newTitle, newVibe1, newVibe2 };
            }
        }).then((result) => {
            if (result.isConfirmed) {
                const { newTitle, newVibe1, newVibe2 } = result.value;
                fetch('../api/list/edit_look.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: new URLSearchParams({
                        look_id: lookId,
                        new_title: newTitle,
                        new_vibe: `${newVibe1},${newVibe2}`
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire('Success', 'Look updated successfully!', 'success')
                        .then(() => {
                            window.location.reload();
                        });
                    } else {
                        Swal.fire('Error', data.message || 'Failed to update look.', 'error');
                    }
                })
                .catch(() => {
                    Swal.fire('Error', 'An error occurred. Please try again later.', 'error');
                });
            }
        });
    });
});


    document.querySelectorAll('.add-to-board-btn').forEach(function(button) {
        button.addEventListener('click', function() {
            const lookId = this.getAttribute('data-look-id');
            fetch('../api/list/get_portfolio_status.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: new URLSearchParams({ look_id: lookId })
            })
            .then(response => response.json())
            .then(data => {
                Swal.fire({
                    title: 'Add to Board',
                    html: `
                        <form id="addToBoardForm">
                            ${data.portfolios.map(portfolio => `
                                <div>
                                    <input type="checkbox" name="portfolio[]" value="${portfolio.id}" ${portfolio.checked ? 'checked' : ''}>
                                    <label>${portfolio.name}</label>
                                </div>
                            `).join('')}
                        </form>
                    `,
                    showCancelButton: true,
                    confirmButtonText: 'Save'
                }).then((result) => {
                    if (result.isConfirmed) {
                        const form = document.getElementById('addToBoardForm');
                        const selectedPortfolios = Array.from(form.querySelectorAll('input[name="portfolio[]"]:checked'))
                            .map(input => input.value);
                        const unselectedPortfolios = Array.from(form.querySelectorAll('input[name="portfolio[]"]:not(:checked)'))
                            .map(input => input.value);

                        fetch('../api/list/add_look_to_portfolio.php', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            },
                            body: new URLSearchParams({
                                look_id: lookId,
                                portfolio_ids: selectedPortfolios.join(','),
                                deletePortfolio_ids: unselectedPortfolios.join(',')
                            })
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                Swal.fire('Success', 'Look updated in the selected Boards.', 'success');
                            } else {
                                Swal.fire('Error', data.message || 'Failed to update look in Boards.', 'error');
                            }
                        })
                        .catch(() => {
                            Swal.fire('Error', 'An error occurred. Please try again later.', 'error');
                        });
                    }
                });
            })
            .catch(() => {
                Swal.fire('Error', 'An error occurred while loading Boards.', 'error');
            });
        });
    });
            document.querySelectorAll('.remove-look-btn').forEach(function(button) {
                button.addEventListener('click', function() {
                    const lookId = this.getAttribute('data-look-id');
                    Swal.fire({
                        title: 'Delete Look',
                        text: 'Are you sure you want to Delete this look?',
                        showCancelButton: true,
                        confirmButtonText: 'Remove'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            fetch('../api/list/remove_look.php', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/x-www-form-urlencoded'
                                },
                                body: new URLSearchParams({ look_id: lookId })
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    Swal.fire('Success', 'Look removed successfully!', 'success')
                                    .then(() => {
                                        window.location.reload();
                                    });
                                } else {
                                    Swal.fire('Error', data.message || 'Failed to Delete look.', 'error');
                                }
                            })
                            .catch(() => {
                                Swal.fire('Error', 'An error occurred. Please try again later.', 'error');
                            });
                        }
                    });
                });
            });
        });
        document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('statisticsBtn').addEventListener('click', function() {
        Swal.fire({
            title: 'Statistics',
            html: `
                <p>Total Likes: 0</p>
                <p>Total Looks: 0</p>
                <p>Total Boards: 0</p>
            `,
            icon: 'info',
            confirmButtonText: 'Close'
        });
    });
});
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.copy-url-btn').forEach(function(button) {
                button.addEventListener('click', function() {
                    const gsmUrl = this.getAttribute('data-gsm-url');
                    
                    if (!gsmUrl) {
                        Swal.fire({
                            toast: true,
                            position: 'top-end',
                            icon: 'error',
                            title: 'No URL available',
                            showConfirmButton: false,
                            timer: 1500
                        });
                        return;
                    }
                    
                    window.open(gsmUrl, '_blank');
                });
            });
            
            tippy('.add-to-board-btn', {
                content: 'Add to Board',
                placement: 'top'
            });
            
            tippy('.edit-look-btn', {
                content: 'Edit Look',
                placement: 'top'
            });
            
            tippy('.remove-look-btn', {
                content: 'Delete Look',
                placement: 'top'
            });
            
            tippy('.copy-url-btn', {
                content: 'Open Look on gSm',
                placement: 'top'
            });
        });
    </script>
</body>
</html>