<html lang="en">
<head>
    <title>Juxt - <%= pnid.mii.name %></title>
    <%- include('partials/head'); %>
    <!-- Google / Search Engine Tags -->
    <meta itemprop="name" content="Juxt - <%= pnid.mii.name %>">
    <%if(userSettings.profile_comment_visibility){%><meta itemprop="description" content="<%= userSettings.profile_comment%>"> <%}%>
    <meta itemprop="image" content="https://pretendo-cdn.b-cdn.net/mii/<%= userSettings.pid %>/smile_open_mouth.png">

    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="Juxt - <%= pnid.mii.name %>"/>
    <%if(userSettings.profile_comment_visibility){%><meta property="og:description" content="<%= userSettings.profile_comment%>"/><%}%>
    <meta property="og:url" content="https://juxt.pretendo.network/users/<%= userSettings.pid %>"/>
    <meta property="og:image" content="https://pretendo-cdn.b-cdn.net/mii/<%= userSettings.pid %>/smile_open_mouth.png"/>
    <meta property="og:site_name" content="Juxtaposition"/>

    <!-- Twitter Meta Tags -->
    <meta name="twitter:card" content="summary_large_image"/>
    <meta name="twitter:title" content="Juxt - <%= pnid.mii.name %>"/>
    <%if(userSettings.profile_comment_visibility){%><meta name="twitter:description" content="<%= userSettings.profile_comment%>"/><%}%>
    <meta name="twitter:site" content="@PretendoNetwork"/>
    <meta name="twitter:image" content="https://pretendo-cdn.b-cdn.net/mii/<%= userSettings.pid %>/smile_open_mouth.png"/>
    <meta name="twitter:creator" content="@PretendoNetwork"/>

</head>
<body>
<div id="main">
    <h2 id="title" class="page-header"><%= lang.global.user_page %></h2>
    <%- include('partials/nav_bar', { selection: -1, pid: pid }); %>
    <div id="toast"></div>
    <div id="wrapper">
        <div class="community-top">
            <img class="banner" src="https://juxt-web-cdn.b-cdn.net/images/banner.png" alt="">
            <div class="community-info">
                <img class="user-icon <%if(pnid.accessLevel > 2) {%>verified<%}%>" src="https://pretendo-cdn.b-cdn.net/mii/<%= userSettings.pid %>/normal_face.png">
                <h2 class="community-title"><%= pnid.mii.name %> @<%= pnid.username %><span class="verified-badge" style="<%if(pnid.accessLevel < 2) {%>display: none;<%}%>">✓</span></h2>
                <%if(pnid.pid !== pid && pid !== 1000000000) {%>
                <% var following = parentUserContent.followed_users.indexOf(userContent.pid) !== -1; %>
                <a href="#" class="favorite-button <%if(following){ %>checked<%}%>"  onclick="follow(this)" data-sound="SE_WAVE_CHECKBOX_UNCHECK" data-url="/users/follow" data-community-id="<%=pnid.pid%>" data-text="<% if(following){ %><%= lang.user_page.follow_user %><%} else {%><%= lang.user_page.following_user %><%}%>"><% if(following){ %> <%= lang.user_page.following_user %> <%} else {%> <%= lang.user_page.follow_user %> <%}%></a>
                <%if(following && userContent.followed_users.indexOf(parentUserContent.pid) !== -1) { /*Is mutual*/%>
                <a href="/friend_messages/new/<%=userContent.pid%>" class="message-button" data-sound="SE_WAVE_CHECKBOX_UNCHECK"></a>
                <%}%>
                <%}%>
            </div>
            <h4 class="community-description">
                <!--<%if(userSettings.profile_comment_visibility){%> <%= userSettings.profile_comment%> <%}else {%><%= lang.global.private %><%}%>
                    <%if(pnid.tierName) {%>
                    <%if(pnid.tierName === 'Mario') {%>
                        <span class="supporter-star mario">|
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 23 23" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                </span>
                    <%} else if(pnid.tierName === 'Super Mario') {%>
                        <span class="supporter-star super">|
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 23 23" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                </span>
                    <%} else if(pnid.tierName === 'Mega Mushroom') {%>
                        <span class="supporter-star mega">|
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 23 23" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                </span>
                    <%}%>
                    <%}%>
                    <%if(pnid.accessLevel === 3) {%>
                        <span class="supporter-star dev">|
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 23 23" fill="rainbow" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tool">
                            <defs>
                                <linearGradient id="rainbow">
                                    <stop offset="16%" stop-color="red" />
                                    <stop offset="32%" stop-color="orange" />
                                    <stop offset="48%" stop-color="yellow" />
                                    <stop offset="64%" stop-color="green" />
                                    <stop offset="80%" stop-color="blue" />
                                    <stop offset="96%" stop-color="purple" />
                                </linearGradient>
                            </defs>
                            <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
                        </svg>
                </span>
                    <%}%>
                    <%if(pnid.accessLevel === 2) {%>
                        <span class="supporter-star mega">|
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 23 23" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shield"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                </span>
                    <%}%>
                    <%if(pnid.accessLevel === 1) {%>
                        <span class="supporter-star tester">|
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256" fill="none" stroke="currentColor"><path d="M104,32V93.8a8.4,8.4,0,0,1-1.1,4.1l-63.6,106A8,8,0,0,0,46.1,216H209.9a8,8,0,0,0,6.8-12.1l-63.6-106a8.4,8.4,0,0,1-1.1-4.1V32" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="88" y1="32" x2="168" y2="32" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M62.6,165c11.8-8.7,32.1-13.6,65.4,3,35.7,17.9,56.5,10.8,67.9,1.1" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                </span>
                    <%}%>-->
            </h4>
            <div class="info-boxes-wrapper">
                <div>
                    <h4><%= lang.user_page.country %></h4>
                    <h4><%if(userSettings.country_visibility){%><%=pnid.country%><%}else {%><%= lang.global.private %><%}%></h4>
                </div>
                <div>
                    <h4><%= lang.user_page.birthday %></h4>
                    <h4><%if(userSettings.birthday_visibility){%><%=moment.utc(pnid.birthdate).format("MMM Do")%><%}else {%><%= lang.global.private %><%}%></h4>
                </div>
                <div>
                    <h4><%= lang.user_page.game_experience %></h4>
                    <h4>
                        <%if(userSettings.game_skill_visibility){%>
                        <%if(userSettings.game_skill === 0) {%>
                            <%= lang.setup.experience_text.beginner %>
                        <%} else if(userSettings.game_skill === 1) {%>
                            <%= lang.setup.experience_text.intermediate %>
                        <%} else if(userSettings.game_skill === 2) {%>
                            <%= lang.setup.experience_text.expert %>
                        <%} else {%>
                            N/A
                        <%}%>
                        <%}else {%>
                            <%= lang.global.private %>
                        <%}%>
                    </h4>
                </div>
                <div>
                    <h4><%= lang.user_page.followers %></h4>
                    <h4 id="user-page-followers-tab" id="followers"><%= userContent.following_users.length %></h4>
                </div>
                <%if(pnid.pid === pid) {%>
                <div>
                    <h4>Download User Data</h4>
                    <h4 id="user-page-download-tab"><a href="/downloadUserData.json">Download</a></h4>
                </div>
                <%}%>
            </div>
        </div>
        <%- include('partials/' + template, { bundle }); %>
    </div>
</div>
</body>
</html>
