{{#section 'head'}}
	<link rel="stylesheet" href="/assets/css/account.css" />
{{/section}}

{{> header}}

<div class="wrapper">

	<div class="account-wrapper">
		<div class="account-sidebar">
			<div class="user">
				<a href="/account/miieditor" class="mii">
					<img src="{{account.mii.image_url}}" alt="Mii image" />
				</a>
				<p class="miiname">{{account.mii.name}}</p>
				<p class="username" value="{{account.username}}">PNID: {{account.username}}</p>
				{{#if tierName}}
					<p class="tier-name tier-level-{{tierLevel}}" value="{{tierName}}">{{tierName}}</p>
				{{else}}
					{{#if (neq account.access_level -1)}}
						<p class="tier-name access-level-{{account.access_level}}" value="{{ lookup locale.account.accountLevel account.access_level }}">{{ lookup locale.account.accountLevel account.access_level }}</p>
					{{else}}
						<p class="tier-name access-level-banned" value="{{ locale.account.banned }}">{{ locale.account.banned }}</p>
					{{/if}}
				{{/if}}
			</div>
			<div class="buttons">
				<a class="button secondary" id="account-upgrade" href="/account/upgrade">
					<p class="caption">{{ locale.account.settings.upgrade }}</p>
				</a>
				<a class="button secondary" id="account-delete">
					<p class="caption">Delete Account</p> <!-- TODO - Add this to weblate, hard-coding for now to push through -->
				</a>
			</div>
		</div>

		<div class="settings-wrapper">
			<h2 class="section-header" id="user-settings">{{ locale.account.settings.settingCards.userSettings }}</h2>
			<div class="setting-card">
				<h2 class="header">{{ locale.account.settings.settingCards.profile }}</h2>
				<a href="/account/edit/profile" class="edit">
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
						<path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
					</svg>
				</a>
				<ul class="setting-list">
					<li>
						<p class="label">{{ locale.account.settings.settingCards.nickname }}</p>
						<p class="value">{{account.mii.name}}</p>
					</li>
					<li>
						<p class="label">{{ locale.account.settings.settingCards.birthDate }}</p>
						<p class="value">{{account.birthdate}}</p>
					</li>
					<li>
						<p class="label">{{ locale.account.settings.settingCards.gender }}</p>
						<p class="value">{{account.gender}}</p>
					</li>
					<li>
						<p class="label">{{ locale.account.settings.settingCards.country }}</p>
						<p class="value">{{account.country}}</p>
					</li>
					<li>
						<p class="label">{{ locale.account.settings.settingCards.timezone }}</p>
						<p class="value">{{account.timezone.name}}</p>
					</li>
				</ul>
			</div>

			<div class="setting-card">
				<h2 class="header">{{ locale.account.settings.settingCards.serverEnv }}</h2>
				<fieldset {{#unless isTester}}disabled{{/unless}}>
					<form class="server-selection" id="server">
						{{#if (eq environment 'prod')}}
							<input type="radio" id="prod" name="server_selection" value="prod" checked>
						{{else}}
							<input type="radio" id="prod" name="server_selection" value="prod">
						{{/if}}
						<label for="prod">
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
								<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
								<polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline>
								<polyline points="7.5 19.79 7.5 14.6 3 12"></polyline>
								<polyline points="21 12 16.5 14.6 16.5 19.79"></polyline>
								<polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
								<line x1="12" y1="22.08" x2="12" y2="12"></line>
							</svg>
							<h2>{{ locale.account.settings.settingCards.production }}</h2>
						</label>
						{{#if isTester}}
						{{#if (eq environment 'test')}}
							<input type="radio" id="beta" name="server_selection" value="test" checked>
						{{else}}
							<input type="radio" id="beta" name="server_selection" value="test">
						{{/if}}
						<label for="beta">
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
								<polygon points="2,21 22,21 14,11.5 14,5 10,3 10,11.5"></polygon>
							</svg>
							<h2>{{ locale.account.settings.settingCards.beta }}</h2>
						</label>
						{{/if}}
					</form>
				</fieldset>
			{{#unless isTester}}
				<p>{{{ locale.account.settings.settingCards.upgradePrompt }}}</p>
			{{else}}
				<button class="button secondary" id="save-server-selection">Save</button>
				<p>{{ locale.account.settings.settingCards.hasAccessPrompt }}</p>
			{{/unless}}
			</div>

			<h2 class="section-header" id="security">{{ locale.account.settings.settingCards.signInSecurity }}</h2>
			<div class="setting-card">
				<h2 class="header">{{ locale.account.account }}</h2>
				<a href="/account/edit/login-info" class="edit">
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
						<path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
					</svg>
				</a>
				<ul class="setting-list">
					<li>
						<p class="label">{{ locale.account.settings.settingCards.email }}</p>
						<p class="value">{{account.email.address}}</p>
					</li>
					<li>
						<p class="label">{{ locale.account.settings.settingCards.password }}</p>
						<p class="value">●●●●●●●●</p>
					</li>
				</ul>
				<p>{{ locale.account.settings.settingCards.passwordResetNotice }}</p>
			</div>

			<div class="setting-card sign-in-history">
				<h2 class="header">{{ locale.account.settings.settingCards.signInHistory }}</h2>
				<p>{{ locale.account.settings.settingCards.no_signins_notice }}</p>
				<ul class="setting-list">
					{{#each account.devices }}
						<li>
							<p class="label">{{this.device_attributes.name}}</p>
							<p class="value">{{this.device_attributes.created_date}}</p>
							</li>
					{{/each}}
				</ul>
				<a href="/account/sign-in-history">
					<button class="button secondary">{{ locale.account.settings.settingCards.fullSignInHistory }}</button>
				</a>
			</div>

			<h2 class="section-header" id="other">{{ locale.account.settings.settingCards.otherSettings }}</h2>
				<div class="setting-card">
					<h2 class="header">{{ locale.account.settings.settingCards.discord }}</h2>
						{{#if discordUser}}
					<p>{{ locale.account.settings.settingCards.connectedToDiscord }} {{ discordUser.username }}{{#if ( neq discordUser.discriminator '0' ) }}#{{ discordUser.discriminator }}{{/if}}</p>
					<a href="/account/remove/discord">
						<button class="button secondary" id="remove-discord-connection">{{ locale.account.settings.settingCards.removeDiscord }}</button>
					</a>
				{{else}}
					<p>{{ locale.account.settings.settingCards.noDiscordLinked }} <a href="{{ discordAuthURL }}">{{ locale.account.settings.settingCards.linkDiscord }}</a></p>
				{{/if}}
			</div>

			<div class="setting-card">
				<h2 class="header">{{ locale.account.settings.settingCards.newsletter }}</h2>
				<p>{{ locale.account.settings.settingCards.no_newsletter_notice }}</p>
				<!--
				<form id="other">
					<input type="checkbox" id="marketing" name="marketing" {{#if account.flags.marketing}}checked{{/if}}>
					<label for="marketing">{{ locale.account.settings.settingCards.newsletterPrompt }}</label>
				</form>
				-->
			</div>
		</div>
	</div>
	{{> footer }}
</div>

{{#if success_message}}
<div class="banner-notice success">
	<div>
		<p>{{success_message}}</p>
	</div>
</div>
{{/if}}

{{#if error_message}}
<div class="banner-notice error">
	<div>
		<p>{{error_message}}</p>
	</div>
</div>
{{/if}}

<div class="modal-wrapper hidden" id="edit-settings">
	<div class="modal">
		<h1 class="title dot">{{ locale.account.settings.unavailable }}</h1>
		<p class="modal-caption">{{ locale.account.settings.settingCards.no_edit_from_dashboard }}</p>
		<div class="modal-button-wrapper">
			<button class="button primary confirm" id="editSettingsCloseButton">{{ locale.modals.close }}</button>
		</div>
	</div>
</div>

<!-- TODO - Add this to weblate, hard-coding for now to push through -->
<div class="modal-wrapper hidden" id="confirm-delete">
	<div class="modal">
		<h1 class="title dot">Delete PNID</h1>
		<p class="modal-caption">Are you sure you want to delete your PNID? Your data across services such as the forums, Miiverse, etc. will all be removed. Your Stripe data and subscription will also be automatically deleted.<br>This action cannot be undone</p>
		<div class="modal-button-wrapper">
			<button class="button primary confirm" id="confirmDeleteConfirmButton">Yes, delete</button>
			<button class="button primary" id="confirmDeleteCloseButton">{{ locale.modals.close }}</button>
		</div>
	</div>
</div>

{{#section 'foot'}}
	<script src="/assets/js/account.js"></script>
{{/section}}