<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="<%= user.user_id %> - Juxtaposition User" property="og:title" />
    <meta content="<%= user.profile_comment %>" property="og:description" />
    <meta content="<%= user.followers%> Followers" property="og:site_name">
    <meta content="https://portal.olv.pretendo.cc/users/show?pid=<%= user.pid %>" property="og:url" />
    <meta content="https://mii-images.cdn.pretendo.cc/<%= user.pid %>/normal_face.png" property="og:image" />
    <meta content="#673DB6" data-react-helmet="true" name="theme-color" />
</head>
<body>
<%- include('nav_bar', { selection: -1 }); %>
<div id="main">
    <div class="community-page-header" style="background: #673DB6;margin-left: -150px;"></div>
    <div class="user-page-back-button" onclick="back()">
        <p class="user-page-back-button-text"><%= lang.global.go_back %></p>
    </div>
    <div class="community-page-info-container">
        <div class="community-page-action-button-wrapper">
            <%if(parentUser.followed_users.indexOf(user.pid) !== -1){ %>
            <div class="user-page-follow-button-wrapper friend selected" <%if(parentUser.pid === 1000000000) {%> style="display: none" <%}%>>
                <p class="user-page-follow-button-text" id="<%= user.pid %>" onclick="" style="color: #FFFFFF"><%= lang.user_page.unfriend %></p>
            </div>
            <%} else if(parentUser.followed_users.indexOf(user.pid) !== -1){ %>
            <div class="user-page-follow-button-wrapper friend selected" <%if(parentUser.pid === 1000000000) {%> style="display: none" <%}%>>
                <p class="user-page-follow-button-text" id="<%= user.pid %>" onclick="" style="color: #FFFFFF"><%= lang.user_page.pending %></p>
            </div>
            <%} else {%>
            <div class="user-page-follow-button-wrapper friend" <%if(parentUser.pid === 1000000000) {%> style="display: none" <%}%>>
                <p class="user-page-follow-button-text" id="<%= user.pid %>" onclick=""><%= lang.user_page.befriend %></p>
            </div>
            <%}%>

            <%if(parentUser.followed_users.indexOf(user.pid) !== -1){ %>
            <div class="user-page-follow-button-wrapper selected" <%if(parentUser.pid === 1000000000) {%> style="display: none" <%}%>>
                <p class="user-page-follow-button-text" id="<%= user.pid %>" onclick="followUser(this)" style="color: #FFFFFF"><%= lang.user_page.following_user %></p>
            </div>
            <%} else {%>
            <div class="user-page-follow-button-wrapper" <%if(parentUser.pid === 1000000000) {%> style="display: none" <%}%>>
                <p class="user-page-follow-button-text" id="<%= user.pid %>" onclick="followUser(this)"><%= lang.user_page.follow_user %></p>
            </div>
            <%}%>
        </div>
        <%if(user.official) {%>
            <img class="community-page-info-icon verified" src="<%= mii_image_CDN %>/<%= user.pid %>/normal_face.png">
            <span class="community-page-verified-user-badge community-page-verified" style="margin-left: 110px;margin-top: 5px;"></span>
        <%} else {%>
            <img class="community-page-info-icon" src="<%= mii_image_CDN %>/<%= user.pid %>/normal_face.png">
            <span class="community-page-verified-user-badge community-page-verified" style="display: none;"></span>
        <%}%>
        <h2 class="community-page-title"><%= user.user_id %> (<%= user.pnid %>)</h2>
        <h4 class="community-page-description"><%= user.profile_comment %></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.user_page.country %></h4>
                        <h4 class="community-page-table-text"><%if(user.country_visibility){%><%=user.country%><%}else {%>Private<%}%></h4>
                    </div>
                </td>
                <td>
                    <div class="community-page-shaded-info-container">
                        <h4 class="community-page-table-label"><%= lang.user_page.birthday %></h4>
                        <h4 class="community-page-table-text"><%if(user.birthday_visibility){%><%=moment.utc(user.birthday).format("MMM Do")%><%}else {%>Private<%}%></h4>
                    </div>
                </td>
                <td>
                    <div class="community-page-shaded-info-container">
                        <h4 class="community-page-table-label"><%= lang.user_page.game_experience %></h4>
                        <h4 class="community-page-table-text">
                            <%if(user.game_skill === 0) {%>
                                <%= lang.setup.experience_text.beginner %>
                            <%} else if(user.game_skill === 1) {%>
                                <%= lang.setup.experience_text.intermediate %>
                            <%} else if(user.game_skill === 2) {%>
                                <%= lang.setup.experience_text.expert %>
                            <%} else {%>
                                N/A
                            <%}%>
                        </h4>
                    </div>
                </td>
                <td>
                    <div class="community-page-shaded-info-container">
                        <h4 class="community-page-table-label"><%= lang.global.yeahs %></h4>
                        <h4 class="community-page-table-text">N/A</h4>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div>
        <table class="user-page-tab-table">
            <tbody>
            <tr>
                <td onclick="switchUserPageTabs(0, '<%= user.pid %>')">
                    <div class="user-page-tab left selected" id="user-page-posts-tab">
                        <%=numPosts%> <%= lang.user_page.posts %>
                    </div>
                    <div class="user-page-tab-triangle selected" id="user-page-posts-triangle"></div>
                </td>
                <td onclick="switchUserPageTabs(1, '<%= user.pid %>')">
                    <div class="user-page-tab" id="user-page-friends-tab">
                        0 <%= lang.user_page.friends %>
                    </div>
                    <div class="user-page-tab-triangle" id="user-page-friends-triangle"></div>
                </td>
                <td onclick="switchUserPageTabs(2, '<%= user.pid %>')">
                    <div class="user-page-tab" id="user-page-following-tab">
                        <%= user.following %> <%= lang.user_page.following %>
                    </div>
                    <div class="user-page-tab-triangle" id="user-page-following-triangle"></div>
                </td>
                <td onclick="switchUserPageTabs(3, '<%= user.pid %>')">
                    <div class="user-page-tab right" id="user-page-followers-tab">
                        <%= user.followers %> <%= lang.user_page.followers %>
                    </div>
                    <div class="user-page-tab-triangle" id="user-page-followers-triangle"></div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="community-page-post-box">
        <% if(numPosts === 0) {%>
            <p class="no-posts-text"><%= lang.global.no_posts %></p>
        <%} else { %>
                <button id="load-more-posts-button" data-offset="20" onclick="loadUserPosts(this, '<%= user.pid %>')"><%= lang.global.more %></button>
            <% newPosts.forEach(function(post) { %>
                <%- include('post_template', { post: post, mii_image_CDN: mii_image_CDN, lang: lang, user: parentUser, reply: false  }); %>
            <% }); %>
        <%}%>
    </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>
