<!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>StreamHive</title>
    <link id="theme-link" rel="stylesheet" type="text/css" href="dark-style.css">
    <link rel="shortcut icon" href="images/streamhive logo.png" type="favicon">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"/>
</head>
<body>
    <nav class="navbar">
    <img id="logo" src="images/streamhive logo.png" alt="">
    <div class="left_nav">
            <a class="all_text" href="index"><h1>StreamHive</h1></a>
            <a class="all_text" id="browseid" href="browse"><h1>Browse</h1></a>
        </div>
        <div class="middle_nav">
            <div class="search_bar">
                <input aria-label="Searchtext" type="search" placeholder="Search" autocapitalize="off" autocorrect="off" maxlength="150" spellcheck="false">
                <button aria-label="Searchbutton" disabled><span class="material-symbols-outlined close">search</span></button>
            </div>
        </div>
        <div class="right_nav">
        </div>
        <div class="icons_container">
            <button>
            <svg width="100%" height="100%" viewBox="0 0 20 20" class="default-icon"><path fill-rule="evenodd" d="M4 3h12l2 4v10H2V7l2-4zm.236 4H8v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V7h3.764l-1-2H5.236l-1 2zM16 9h-2.17A3.001 3.001 0 0 1 11 11H9a3.001 3.001 0 0 1-2.83-2H4v6h12V9z" clip-rule="evenodd"></path></svg>
            </button>
            <div class="hidebutton">    
                <button><svg width="100%" height="100%" viewBox="0 0 20 20" id="icon2" class="default-icon"><path fill-rule="evenodd" d="M7.828 13 10 15.172 12.172 13H15V5H5v8h2.828zM10 18l-3-3H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2l-3 3z" clip-rule="evenodd"></path></svg></button>
                <div id="whisper_dropdown">
                    <div id="whisper_container">
                        <div class="whisper_text">Coming Soon!</div>
                        <hr>
                        <div class="coming_soon_blur">
                            Coming Soon!
                        </div>
                    </div>
                </div>
            </div>
            <button class="bits_button">
                <div class="icon-and-text">
                    <svg width="100%" height="100%" viewBox="0 0 20 20"  class="default-icon"><path fill-rule="evenodd" d="m3 12 7-10 7 10-7 6-7-6zm2.678-.338L10 5.487l4.322 6.173-.85.728L10 11l-3.473 1.39-.849-.729z" clip-rule="evenodd"></path></svg>
                    <h5>Get bits</h5>
                </div>
            </button>
            <div class="icons_container default-icon">
                <svg width="100%" height="100%" viewBox="0 0 20 20" id="icon" class="default-icon"><path fill-rule="evenodd" d="M5 7a5 5 0 1 1 6.192 4.857A2 2 0 0 0 13 13h1a3 3 0 0 1 3 3v2h-2v-2a1 1 0 0 0-1-1h-1a3.99 3.99 0 0 1-3-1.354A3.99 3.99 0 0 1 7 15H6a1 1 0 0 0-1 1v2H3v-2a3 3 0 0 1 3-3h1a2 2 0 0 0 1.808-1.143A5.002 5.002 0 0 1 5 7zm5 3a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" clip-rule="evenodd"></path></svg>
                <div id="dropdown-content">
                    <div class="channel_icon_container">
                            <div class="pfp"><img id="pfp1" src="<%= profilePictureUrl %>" alt="Profile Picture"></div>
                            <div class="channel_name"><%= username %></div>
                    </div>
                    <hr>
                    <div id="channel_container">
                        <svg width="2rem" height="2rem" viewBox="0 0 20 20" class="channel2_icon"><path fill-rule="evenodd" d="M7 2a4 4 0 0 0-1.015 7.87A1.334 1.334 0 0 1 4.667 11 2.667 2.667 0 0 0 2 13.667V18h2v-4.333c0-.368.298-.667.667-.667A3.32 3.32 0 0 0 7 12.047 3.32 3.32 0 0 0 9.333 13c.369 0 .667.299.667.667V18h2v-4.333A2.667 2.667 0 0 0 9.333 11c-.667 0-1.22-.49-1.318-1.13A4.002 4.002 0 0 0 7 2zM5 6a2 2 0 1 0 4 0 2 2 0 0 0-4 0z" clip-rule="evenodd"></path><path d="M12 8h4v1.51V9l2-1v4l-2-1v1h-4V8z"></path></svg>
                        <div id="channel_text">Channel</div>
                    </div>
                    <hr>
                    <div class="dark_theme_container">
                        <svg width="100%" height="100%" version="1.1" viewBox="0 0 20 20" x="0px" y="0px" class="dark_theme_icon"><g><path fill-rule="evenodd" d="M8.614 2.134a8.001 8.001 0 001.388 15.879 8.003 8.003 0 007.884-6.635 6.947 6.947 0 01-2.884.62 7.004 7.004 0 01-6.388-9.864zM6.017 5.529a5.989 5.989 0 00-2.015 4.484c0 3.311 2.69 6 6 6a5.99 5.99 0 004.495-2.028 9.006 9.006 0 01-8.48-8.456z" clip-rule="evenodd"></path></g></svg>
                        <div class="dark_theme_text">Dark Theme</div>
                        
                    </div>
                    <hr>
                    <a href="/logout"><div class="logout_container">
                        <svg width="100%" height="100%" version="1.1" viewBox="0 0 20 20" x="0px" y="0px" class="logout_icon"><g><path d="M16 18h-4a2 2 0 01-2-2v-2h2v2h4V4h-4v2h-2V4a2 2 0 012-2h4a2 2 0 012 2v12a2 2 0 01-2 2z" fill="white"></path><path d="M7 5l1.5 1.5L6 9h8v2H6l2.5 2.5L7 15l-5-5 5-5z" fill="white"></path></g></svg>
                        <div class="logout_text">Log out</div>
                    </div></a>  
            </div>
        </div>
    </nav>
    <div class="container">
        <div class="sidebar">
            <div class="bar_header">
                <div id="top_sidebar">
                    <h1 class="all_text" id="for_you">For you</h1>
                    <svg width="100%" height="100%" version="1.1" viewBox="0 0 20 20" x="0px" y="0px" class="hide_sidebar"><g><path d="M16 16V4h2v12h-2zM6 9l2.501-2.5-1.5-1.5-5 5 5 5 1.5-1.5-2.5-2.5h8V9H6z"></path></g></svg>   
                </div>
            </div>
        </div>
        <div class="main_div">
            <div class="main_top">
                    <div class="channel_pfp"><img id="pfp2" src="<%= profilePictureUrl %>" alt="Profile Picture"></div>
                    <div class="channel_name"><%= username %></div>
                    	
                    <iframe class="channel_video" src="/images/test video.mp4" frameborder="0"></iframe>
                  </div>
                </div>
              </div>
            </div>
          </div>
        <div class="for_you">
            
        </div>
    </div>
    </div>
    <script src="index.js"></script>
    <script src="client.js"></script>
</body>
</html>