<!DOCTYPE HTML>
<html>

<head>
    <meta charset='utf-8'>
    <!--Mobile responsive-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
        Circles
    </title>
    <link rel="shortcut icon" type="image/ico" href="/shared/images/favicon.ico">
    <link rel="stylesheet" href="/shared/main/PNotifyBrightTheme.css">
    <link rel="stylesheet" href="/shared/fontawesome-free-5.10.2/css/all.min.css">
    <link rel="stylesheet" href="/gettheme">
    <link rel="stylesheet" href="theme.css">
    <script defer src="/shared/base32.js"></script>
    <script defer src="/shared/identicon.js"></script>
    <script defer src="/shared/node_modules/pnotify/dist/iife/PNotify.js"></script>
    <script defer src="/shared/node_modules/pnotify/dist/iife/PNotifyButtons.js"></script>
    <script defer src="/shared/useridenticons.js"></script>
    <script defer src="/shared/misc.js"></script>
    <script defer src="/shared/navbar.js"></script>
    <script defer src="/shared/main/apicheck.js"></script>
    <script defer src="detect-plaintext-storage.js"></script>
    <script defer src="sethumanreadable.js"></script>
    <script defer src="default-circle-picker.js"></script>
    <script defer src="sort-posts.js"></script>
    <script defer src="board.js"></script>
    <script defer src="autorefresh.js"></script>
    <script defer src="popular.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>
            </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">
                            Circles <span class="is-pulled-right">v<span id='circlesVersion'></span></span>
                        </h1>
                        <h2 class="subtitle">
                            Anonymous message boards
                        </h2>
                    </div>
                </div>
            </div>
    </section>

    <br>

    <!--Start Content-->
    <div class="container">
        <div class="columns">
            <!--Add Friend-->
            <div class="column is-one-third">
                <div class="card">
                    <form method='POST' action='/' id='addMsg'>
                        <header class="card-header">
                            <p class="card-header-title">
                                Post message
                            </p>
                        </header>
                        <div class="card-content">
                            <div class="content">
                                    <textarea id='newMsgText' class="textarea" name='newMsgText' rows=10 cols=50 required
                                        minlength="2"></textarea>
                            </div>
                        </div>
                        <footer class="card-footer">
                            <a class="card-footer-item">
                                <input class='button is-primary' type='submit' value='Post'>
                            </a>
                        </footer>
                    </form>
                </div>
            </div>
            <!--Feed-->
            <div class="column">
                <div class="card">
                    <header class="card-header">
                        <p class="card-header-title">
                            Feed
                        </p>
                    </header>
                    <div class="card-content">
                        <div class="content">
                            <div class="field">
                                <div class="field has-addons">
                                    <p class="control">
                                        <a class="button is-static">Circle Name</a>
                                    </p>
                                    <p class="control is-expanded">
                                        <input id="feedIDInput" class="input" placeholder="Board name" value="global">
                                    </p>
                                    <p class="control">
                                        <a class="button is-success" id="refreshFeed">Refresh Feed</a>
                                    </p>
                                </div>
                                <div class="field">
                                    <div class="columns">
                                        <div class="column is-2">
                                            <div class="control">
                                                <label for="recommendedBoards" class="label">Default Circles:</label>
                                                <div class="select">
                                                    <select id="recommendedBoards">
                                                        <option value=""></option>
                                                        <option value="global">Global</option>
                                                        <option value="onionr">Onionr</option>
                                                        <option value="games">Games</option>
                                                        <option value="politics">Politics</option>
                                                        <option value="tech">Tech</option>
                                                        <option value="random">Random</option>
                                                        <option value="privacy">Privacy</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="column is-2">
                                            <div class="control">
                                                <label for="popularBoards" class="label">Popular Circles:</label>
                                                <div class="select">
                                                    <select id="popularBoards">
                                                        <option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <p class="control">
                                    <br>
                                        Note: All posts in Circles are publicly accessible.
                                </p>
                                <input type="checkbox" class="checkbox" id="refreshCheckbox" checked>
                                <label for="refreshCheckbox">Auto refresh feed</label>
                                <br>
                                <input type="checkbox" class="checkbox" id="postAnon" checked>
                                <label for="postAnon">Sign posts</label>
                            </div>
                        </div>
                        <div class="content">
                            <span id='loadingBoard'><i class="fas fa-yin-yang fa-spin"></i></span>
                            <div id='feed'>
                                <span id='none'>None yet, try refreshing 😃</span>
                                <!--Message Items are appended here based on template-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--Template markup for Circle message-->
    <template id="cMsgTemplate">
        <div class="box cMsgBox">
            <div class="columns">
                <div class="column cMsg">
                    Message
                </div>
                <div class="column cAuthor is-narrow"></div>
                <img class="identicon image is-48x48" alt="user icon" src="/shared/images/anon.svg">
                <div class="column is-narrow cMsgDate">
                    Date
                </div>
            </div>
        </div>
    </template>
</body>

</html>