<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="<%= cdnURL %>/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="<%= cdnURL %>/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="<%= cdnURL %>/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="<%= cdnURL %>/mii/<%= userSettings.pid %>/normal_face.png">
                <h2 class="community-title"><%= pnid.mii.name %> @<%= pnid.username %><%if(pnid.accessLevel >= 2) {%><span class="verified-badge">✓</span><%}%></h2>
            </div>
            <h4 class="community-description">
                <%= userSettings.profile_comment%>
				<%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><%=pnid.country%></h4>
                </div>
                <div>
                    <h4><%= lang.user_page.birthday %></h4>
                    <h4><%=moment.utc(pnid.birthdate).format("MMM Do")%></h4>
                </div>
                <div>
                    <h4><%= lang.user_page.game_experience %></h4>
                    <h4>
                        <%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
                        <%}%>
                    </h4>
                </div>
                <div>
                    <h4><%= lang.user_page.followers %></h4>
                    <h4 id="user-page-followers-tab" id="followers"><%= userContent.following_users.length %></h4>
                </div>
				<div>
					<h4>User Profile Link</h4>
                    <h4><a href="/users/<%= userSettings.pid %>">User Profile Link</a></h4>
                </div>
            </div>
        </div>
		<div class="p-3 py-5">
			<div class="mt-5 text-center">
				<h4 class="text-right">Juxt User Settings</h4>
			</div>
			<div class="row mt-2">
				<div class="col">
					<label class="labels">Account Status</label>
					<select class="form-select" aria-label="Account Status" name="account_status" id="account_status">
						<option value="0" <%if (userSettings.account_status == 0) { %>selected<% } %>>Normal</option>
						<option value="1" <%if (userSettings.account_status == 1) { %>selected<% } %>>Limited from Posting</option>
						<option value="2" <%if (userSettings.account_status == 2) { %>selected<% } %>>Temp Ban</option>
						<option value="3" <%if (userSettings.account_status == 3) { %>selected<% } %>>Permanent Ban</option>
					</select>
				</div>
				<div class="col">
					<label for="ban_date">Banned Until:</label>
					<input type="datetime-local" id="ban_lift_date" name="ban_lift_date" value="<%= userSettings.ban_lift_date %>">
				</div>
				<div class="col">
					<label class="labels">Ban Reason</label>
					<input id="ban_reason" type="text" class="form-control" placeholder="Ban reason" style="width: 100%;" value="<%= userSettings.ban_reason %>">
				</div>
			</div>
			<div class="mt-5 text-center">
				<button class="btn btn-primary profile-button" type="button" onclick="savePNID()">Save User</button>
			</div>
		</div>
    </div>
</div>
<script>
    const account_status = document.getElementById('account_status');
    const ban_lift_date = document.getElementById('ban_lift_date');
    const ban_reason = document.getElementById('ban_reason');

    function savePNID() {
        fetch('/admin/accounts/<%= userSettings.pid %>', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                account_status: Number(account_status.value),
                ban_lift_date: ban_lift_date.value,
                ban_reason: ban_reason.value,
            })
        })
                .then(response => response.json())
                .then(({ error }) => {
                    if (!error) {
                        alert('Juxt user data saved')
                    }
                })
                .catch(console.log);
    }
</script>
</body>
</html>
