<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
        Onionr Chat
    </title>
    <link rel='shortcut icon' type='image/ico' href='/shared/images/favicon.ico'>
    <link rel="stylesheet" href="/gettheme">
    <link rel="stylesheet" href="/chat/css/convos.css">
    <script defer src='/shared/misc.js'></script>
    <script defer src='/shared/direct-connections.js'></script>
    <script defer src='/chat/js/messages.js'></script>
    <script defer src='/chat/js/message-feed.js'></script>
    <script defer src='/chat/js/resizes.js'></script>
    <script defer src='/chat/js/change-convo.js'></script>
    <script defer src="/shared/navbar.js"></script>
    <script defer src='/chat/js/main.js'></script>
</head>

<body>

    <nav class="navbar is-dark" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
            <a class="navbar-item idLink" href="/">
                <img src="/shared/images/favicon.ico" class="navbarLogo">
            </a>

            <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
                data-target="navbarBasic">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </a>
        </div>

        <div id="navbarBasic" class="navbar-menu">
            <div class="navbar-start">
                <a class="navbar-item idLink" href="/mail/">Mail</a>
                <a class="navbar-item idLink" href="/friends/">Friends</a>
                <a class="navbar-item idLink" href="/board/">Circles</a>
                <a class="navbar-item idLink" href="/chat/">Chat</a>
            </div>
        </div>
    </nav>

    <!--Hero (Dark Section)-->
    <section class="hero is-small is-dark">
        <div class="hero-body">
            <div class="container">
                <div class="columns">
                    <div class="column">
                        <h1 class="title">
                            Onionr Chat
                        </h1>
                        <h2 class="subtitle">
                            Instant Messaging
                        </h2>
                    </div>
                    <div class="column is-7">
                        <div class="field">
                            <div class="field has-addons">
                                <p class="control">
                                    <a class="button is-static">Identity</a>
                                </p>
                                <p class="control is-expanded">
                                    <input id="myPub" class="input myPub" type="text" readonly>
                                </p>
                                <p class="control">
                                    <a id="myPubCopy" class="button is-primary">Copy</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="messageEntry" id="messageEntryTemplate">
            <span class="from has-text-primary">Jenny</span>
            <div class="messageContent">I'll stay right here</div>
    </div>
    <br>

    <div class="columns chatContent">
        <div class="column has-background-grey-dark has-text-light is-one-fifths content convoListContainer">
            <span class='friendsTitle'>Friends</span>
            <hr>
            <ul class='conversationList'></ul>
        </div>
        <div class="column chatBox has-text-light has-background-dark is-four-fifths">
            <span class="chatFeed">
            </span>
            <div class="field has-addons">
                <p class="control chatInput">
                    <textarea class="textarea has-dark-text" name="message-to-send" id="message-to-send" placeholder="Type your message" rows="1"></textarea>
                </p>
            </div>
        </div>
    </div>
</body>

</html>