<!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">
    <meta name="description" content="Login | Crispy - Open Source Chat">
    <meta name="keywords" content="online, chat, app, open-source. crispy">
    <meta property="og:site_name" content="App | Crispy">
    <link rel="icon" href="https://tallerthanshort.github.io/ut3.ggpht/icons/crispy.png" type="image/png">
    <meta property="og:title" content="App | Crispy">
    <meta property="og:image" content="https://tallerthanshort.github.io/ut3.ggpht/icons/crispy.png">
    <meta property="og:description" content="Login | Crispy - Open Source Chat">
    <link rel="icon" type="image/x-icon" href="https://tallerthanshort.github.io/ut3.ggpht/icons/crispy.png">
    <% if (title) { %>
        <title><%= title %> | Crispy</title>
    <% } else { %>
        <title>App | Crispy</title>
    <% } %>
    <link rel="stylesheet" href="/css/crispychicken.css">
    <meta name="theme-color" content="rgba(33, 33, 33, 0.98)">
</head>
<body>
    <div class="appContainer">
        <div class="appPanel">
            <div class="notPanel">
                <div class="application">
                    <div class="app-primary">
                        <div class="custom-background"></div>
                        <div class="layer1">
                            <div class="layer2">
                                <div class="container">
                                    <nav class="guildNav" style="display: flex;">
                                        <ul class="unorderedList1">
                                            <div class="scroller" style="overflow: hidden scroll;">
                                                <div id="logoContainer">
                                                    <div class="guildItem" onclick="location.href='/app/'" title="Home Screen" style="cursor: pointer;">
                                                        <div>
                                                            <div class="wrapper">
                                                                <img src="https://tallerthanshort.github.io/ut3.ggpht/icons/crispy.png" style="width: 48px; height: 48px; border-radius: 14px;">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div id="servers" style="overflow: visible scroll; padding-right: 0px; width: 100%; position: relative;">
                                                    <% if (guildData) { %>
                                                        <% for (const guild of guildData) { %>
                                                            <div class="guildItem" onclick="location.href='/app/<%= guild.uid %>'" title="<%= guild.title %>">
                                                                <div>
                                                                    <div class="wrapper">
                                                                        <div class="guildImageContainer">
                                                                            <div class="guildImage">
                                                                                <img src="<%= guild.img %>" alt="<%= guild.title %> icon" style="width: 48px; height: 48px; border-radius: 14px;">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        <% } %>
                                                    <%} else {%>
                                                        <div class="guildItem" onclick="location.href='/app'" title="Join a guild to get Started!">
                                                            <div>
                                                                <div class="wrapper">
                                                                    <div class="guildImageContainer">
                                                                        <div class="guildImage">
                                                                            <img src="https://tallerthanshort.github.io/ut3.ggpht/icons/crispy.png" alt="<%= guild.title %> icon" style="width: 48px; height: 48px; border-radius: 14px;">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    <% } %>
                                                </div>
                                                <hr>
                                                <div>
                                                    <div class="guildItem" onclick="location.href='/settings/'" title="Settings" style="cursor: pointer;">
                                                        <div>
                                                            <div class="wrapper">
                                                                <img src="https://tallerthanshort.github.io/ut3.ggpht/icons/settings.png" style="width: 48px; height: 48px; border-radius: 14px;">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </ul>
                                    </nav>
                                    <div class="basecont">
                                        <div class="contentBase" style="position: relative;">
                                            <div class="chatContainer">
                                                <div class="header">
                                                    <div class="headerWrapper">
                                                        <div class="iconWrapper" onclick="toggleMenu()" title="Toggle Nav Bar Visibility">
                                                            <svg viewBox="0 0 24 24" height="24" width="24" aria-hidden="true" focusable="false" class="backarrowtang" xmlns="http://www.w3.org/2000/svg">
                                                                <path d="M13.293 6.293 7.586 12l5.707 5.707 1.414-1.414L10.414 12l4.293-4.293z"></path>
                                                            </svg>
                                                        </div>
                                                        <div class="titleWrapper">
                                                            <h3 class="eligible"><%= title %></h3>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="chatcont">
                                                    <div class="chatContent">
                                                        <div class="messagesWrapper"></div>
                                                        <form class="messageSend">
                                                            <div class="guilTextArea">
                                                                <div class="scrollerText">
                                                                    <div class="innerText">
                                                                        <div></div>
                                                                        <div></div>
                                                                        <div class="innerTextArea" style="height: 44px;">
                                                                            <div>
                                                                                <div class="placeholderText" aria-hidden="true">Message <%= title %></div>
                                                                                <div role="textbox" aria-multiline="true" spellcheck="true" aria-haspopup="listbox" aria-invalid="false" aria-autocomplete="list" class="eaYLPr1XoMpjI" autocorrect="off" data-can-focus="true" aria-label="Message <%= title %>" data-slate-editor="true" data-slate-node="value" zindex="-1" style="position: relative; outline: none; white-space: pre-wrap; overflow-wrap: break-word;" contenteditable="true">
                                                                                    <div data-slate-node="element">
                                                                                        <span data-slate-node="text">
                                                                                            <span data-slate-leaf="true" class="emptyText-1o0WH_">
                                                                                                <span data-slate-zero-width="n" data-slate-length="0">ï»¿<br>
                                                                                                </span>
                                                                                            </span>
                                                                                        </span>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="textAreaButtons">
                                                                            <div class="emoticonPicker"></div>
                                                                            <button style="cursor: pointer; width: auto; background: transparent; color: white; border: 0; padding: 0; margin: 0; position: relative; display: flex;">
                                                                                <svg width="44px" height="44px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.2111 2.06722L3.70001 5.94499C1.63843 6.46039 1.38108 9.28612 3.31563 10.1655L8.09467 12.3378C9.07447 12.7831 10.1351 12.944 11.1658 12.8342C11.056 13.8649 11.2168 14.9255 11.6622 15.9053L13.8345 20.6843C14.7139 22.6189 17.5396 22.3615 18.055 20.3L21.9327 4.78886C22.3437 3.14517 20.8548 1.6563 19.2111 2.06722ZM8.92228 10.517C9.85936 10.943 10.9082 10.9755 11.8474 10.6424C12.2024 10.5165 12.5417 10.3383 12.8534 10.1094C12.8968 10.0775 12.9397 10.0446 12.982 10.0108L15.2708 8.17974C15.6351 7.88831 16.1117 8.36491 15.8202 8.7292L13.9892 11.018C13.9553 11.0603 13.9225 11.1032 13.8906 11.1466C13.6617 11.4583 13.4835 11.7976 13.3576 12.1526C13.0244 13.0918 13.057 14.1406 13.4829 15.0777L15.6552 19.8567C15.751 20.0673 16.0586 20.0393 16.1147 19.8149L19.9925 4.30379C20.0372 4.12485 19.8751 3.96277 19.6962 4.00751L4.18509 7.88528C3.96065 7.94138 3.93264 8.249 4.14324 8.34473L8.92228 10.517Z" fill="white"/>
                                                                                </svg>
                                                                            </button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function toggleMenu(){
            const navTag = document.querySelector('.guildNav');
            const arrow = document.querySelector(".backarrowtang");
            if(navTag.style.display === 'flex'){
                navTag.style.display = 'none';
                arrow.innerHTML = '<path d="M10.707 17.707 16.414 12l-5.707-5.707-1.414 1.414L13.586 12l-4.293 4.293z"></path>'
            } else {
                navTag.style.display = 'flex'
                arrow.innerHTML = '<path d="M13.293 6.293 7.586 12l5.707 5.707 1.414-1.414L10.414 12l4.293-4.293z"></path>'
            }
        }
    </script>
</body>
</html>