<html>
<head>
    <link rel="stylesheet" type="text/css" href="<%= cdnURL %>/css/juxt.css">
    <script src="<%= cdnURL %>/js/pjax.min.js"></script>
    <script src="<%= cdnURL %>/js/juxt.js"></script>
    <!-- Google Analytics -->
    <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-195842548-1', 'auto');
        ga('send', 'pageview');
    </script>
    <!-- End Google Analytics -->
    <meta content="<%= community.name %> - Juxtaposition Community" property="og:title" />
    <meta content="<%= community.followers%> Followers" property="og:site_name">
    <meta content="<%= community.description %>" property="og:description" />
    <meta content="https://portal.olv.pretendo.cc/communities/<%= community.community_id %>/new" property="og:url" />
    <meta content="https://portal.cdn.pretendo.cc/icons/<%= community.community_id %>.png" property="og:image" />
    <meta content="#1F8A42" data-react-helmet="true" name="theme-color" />
</head>
<body>
<%- include('nav_bar', { selection: 2 }); %>
<div id="main">
    <div id="windowOverlay" class="overlay" style="margin-bottom: 0">
        <div class="overlay-content" style="position: fixed">
            <div id="post-window" class="post-wrapper">
                <!--Start of Main Post-->
                <form class="post-emotion-radio" action="/posts/new" method="post" enctype="multipart/form-data">
                    <table>
                        <tr>
                            <td colspan="2">
                                <h1 class="communities-header" style="padding-left: 50px; padding-top: 10px"><%= lang.new_post.post_to %> <%= community.name %></h1>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <img class="post-user-icon" src="<%= mii_image_CDN %>/<%= user.pid %>/normal_face.png">
                                <input type="hidden" id="olive_title_id" name="olive_title_id" value="<%= community.title_id[0] %>">
                                <input type="hidden" id="olive_community_id" name="olive_community_id" value="<%= community.community_id %>">
                                <input type="hidden" id="_post_type" name="_post_type" value="body">
                            </td>
                            <td>
                                <div class="post-emotions-wrapper">
                                    <label for="post-emotion-0">
                                        <input type="radio" name="emotion" id="post-emotion-0" value="0" onclick="changeMiiImageReaction(this)" checked>
                                        <span class="post-emotion-0"></span>
                                    </label>
                                    <label for="post-emotion-1">
                                        <input type="radio" name="emotion" id="post-emotion-1" value="1" onclick="changeMiiImageReaction(this)">
                                        <span class="post-emotion-1"></span>
                                    </label>
                                    <label for="post-emotion-2">
                                        <input type="radio" name="emotion" id="post-emotion-2" value="2" onclick="changeMiiImageReaction(this)">
                                        <span class="post-emotion-2"></span>
                                    </label>
                                    <label for="post-emotion-3">
                                        <input type="radio" name="emotion" id="post-emotion-3" value="3" onclick="changeMiiImageReaction(this)">
                                        <span class="post-emotion-3"></span>
                                    </label>
                                    <label for="post-emotion-4">
                                        <input type="radio" name="emotion" id="post-emotion-4" value="4" onclick="changeMiiImageReaction(this)">
                                        <span class="post-emotion-4"></span>
                                    </label>
                                    <label for="post-emotion-5">
                                        <input type="radio" name="emotion" id="post-emotion-5" value="5" onclick="changeMiiImageReaction(this)">
                                        <span class="post-emotion-5"></span>
                                    </label>
                                </div>
                                <div class="post-emotions-arrow-left"></div>
                            </td>
                            <td>
                                <div class="post-screenshot-picker" onclick="loadScreenshots()">
                                    <div class="post-screenshot-picker-icon"></div>
                                    <div class="post-screenshot-picker-dropdown">
                                        <div><img src="" class="post-screenshot-preview" id="post-top-screen-preview" onclick="selectScreenshot(1)"></div>
                                        <div><img src="" class="post-screenshot-preview" id="post-bottom-screen-preview" onclick="selectScreenshot(2)"></div>
                                        <div onclick="selectScreenshot(0)">No Screenshot</div>
                                        <input type="hidden" id="screenshot-value" name="screenshot" value="">
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="post-type-button-text selected" onclick="swapPostType(0)"></div>
                            </td>
                            <td rowspan="2" id="post-text-input">
                                <textarea class="post-textarea" id="comment" name="body" maxlength="280" placeholder="<%= lang.new_post.text_hint %>" rows="4" cols="50" onchange="if(wiiuFilter.checkWord(this.value) === -2) { this.value = ''; alert('<%= lang.new_post.swearing %>');}"></textarea>
                            </td>
                            <td rowspan="2" id="post-painting-input" style="display: none;">
                                <div class="post-memo">
                                    <img class="post-memo-preview" id="memo" width="640px" height="240px" src="" style="display: none;" onclick="newPainting(false)">
                                    <input type="hidden" id="memo-value" name="painting" value="">
                                </div>
                            </td>
                            <br>
                        </tr>
                        <tr>
                            <td>
                                <div class="post-type-button-painting" onclick="swapPostType(1);newPainting(false)"></div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <label class="checkbox-container checkbox-post">Spoilers
                                    <input type="checkbox" id="spoiler" name="spoiler" value="true" onclick="wiiuSound.playSoundByName('SE_WAVE_MENU', 1);">
                                    <span class="checkmark"></span>
                                </label>
                            </td>
                        </tr>
                        <tr style="height: 70px">
                            <td class="post-close-button-wrapper" colspan="2">
                                <div class="post-close-button" onclick="hideNewPostScreen();wiiuMemo.reset();">X <b><%= lang.global.close %></b></div>
                            </td>
                            <td>
                                <input type="submit" value="Post" class="submit-button" style="margin-left: -124px;" onclick="wiiuBrowser.lockUserOperation(true);wiiuSound.playSoundByName('SE_WAVE_MENU', 1);wiiuSound.playSoundByName('BGM_OLV_MAIN_LOOP_NOWAIT', 3);">
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
    </div>
    <div class="community-page-header" style="background-image: url('<%= cdnURL %>/banner/<%= community.community_id %>.png')"></div>
    <div class="community-page-header-overlay"></div>
    <div class="community-page-back-button" onclick="back()">
        <p class="user-page-back-button-text"><%= lang.global.go_back %></p>
    </div>
    <div id="community-new-post-wrapper" <%if(user.pid === 1000000000 || user.account_status !== 0) {%> style="display: none" <%}%>>
        <div class="new-post-button-text" onclick="showNewPostScreen()">
            + <%= lang.new_post.new_post_text %>
        </div>
    </div>
    <div class="community-page-info-container">
        <%if(user.followed_communities.indexOf(community.community_id) !== -1){ %>
            <div class="community-page-follow-button-wrapper selected">
                <p class="community-page-follow-button-text" id="<%= community.community_id %>" onclick="followCommunity(this)" style="color: #FFFFFF"><%= lang.community.following %></p>
            </div>
        <%} else {%>
        <div class="community-page-follow-button-wrapper" <%if(user.pid === 1000000000) {%> style="display: none" <%}%>>
            <p class="community-page-follow-button-text" id="<%= community.community_id %>" onclick="followCommunity(this)"><%= lang.community.follow %></p>
        </div>
        <%}%>
        <img class="community-page-info-icon" src="<%= cdnURL %>/icons/<%= community.community_id %>.png">
        <h2 class="community-page-title"><%= community.name %></h2>
        <h4 class="community-page-description"><%= community.description %></h4>
        <div class="community-page-margin-line"></div>
        <table class="community-page-table-wrapper">
            <tbody>
            <tr>
                <td>
                    <div class="community-page-shaded-info-container">
                        <h4 class="community-page-table-label"><%= lang.community.followers %></h4>
                        <h4 class="community-page-table-text"><%= community.followers %></h4>
                    </div>
                </td>
                <td>
                    <div class="community-page-shaded-info-container">
                        <h4 class="community-page-table-label"><%= lang.community.posts %></h4>
                        <h4 class="community-page-table-text"><%=totalNumPosts%></h4>
                    </div>
                </td>
                <td>
                    <div class="community-page-shaded-info-container" style="width: 507px;">
                        <h4 class="community-page-table-label"><%= lang.community.tags %></h4>
                        <h4 class="community-page-table-text">N/A</h4>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="community-page-post-box">
        <table class="community-page-posts-header switcher">
            <tbody>
            <tr>
                <td>
                    <h4 id="recent-tab" onclick="loadPosts(0)" class="community-page-posts-header-tab active"><%= lang.community.recent %></h4>
                </td>
                <td>
                    <h4 id="popular-tab" onclick="loadPosts(1)" class="community-page-posts-header-tab"><%= lang.community.popular %></h4>
                </td>
                <td>
                    <h4 id="verified-tab" onclick="loadPosts(2)" class="community-page-posts-header-tab"><%= lang.community.verified %></h4>
                </td>
            </tr>
            </tbody>
        </table>
        <div id="wrapper">
            <% if(totalNumPosts === 0) {%>
                <p class="no-posts-text"><%= lang.global.no_posts %></p>
            <%} else { %>
                <button id="load-more-posts-button" data-offset="20"  onclick="loadCommunityPosts(this)"><%= lang.global.more %></button>
                <% newPosts.forEach(function(post) { %>
                        <%- include('post_template', { post: post, mii_image_CDN: mii_image_CDN, lang: lang, reply: false  }); %>
                <% }); %>
            <%}%>
        </div>
    </div>
    <br>
    <img src="" onerror="wiiuBrowser.showLoadingIcon(!1);window.scroll(0, 0);">
</div>
<br>
<body onload="stopLoading(); wiiuBrowser.showLoadingIcon(!1);wiiuBrowser.lockUserOperation(false);">
</body>
</html>
