<!-- IMPORT partials/account/header.tpl -->

{{{ if sessions.length }}}
<div class="mb-3">
	<h5>[[global:sessions]]</h5>
	<ul class="list-group" component="user/sessions">
		<!-- IMPORT partials/account/session-list.tpl -->
	</ul>
</div>
{{{ end }}}

<div class="row">
	<div class="col-sm-6 mb-3">
		{{{ if invitedBy}}}
		<div class="mb-4 pb-3 border-bottom">
			<h6>[[user:info.invited-by]]</h6>
			<div class="d-flex align-items-center gap-2">
				<a href="">{buildAvatar(invitedBy, "24px", true)}</a>
				<a href="">{invitedBy.username}</a>
			</div>
		</div>
		{{{ end }}}

		<div class="mb-4 border-bottom">
			<h6>[[global:recentips]]</h6>
			<div class="">
				<ul class="text-sm text-secondary">
					{{{each ips}}}
					<li>{@value}</li>
					{{{end}}}
				</ul>
			</div>
		</div>

		<div class="mb-4 border-bottom">
			<h6>[[user:info.username-history]]</h6>
			<div class="">
				<ul class="list-unstyled">
					{{{ each usernames }}}
					<li class="d-flex justify-content-between mb-1">
						<span class="text-sm text-secondary">{./value}</span>

						<div>
							{{{ if ./byUid }}}
							<a class="lh-1" href="{{{ if ./byUser.userslug }}}{config.relative_path}/user/{./byUser.userslug}{{{ else }}}#{{{ end }}}">
							{buildAvatar(./byUser, "18px", true)}</a>
							{{{ end }}}
							<span class="timeago text-sm text-secondary lh-1 align-middle" title="{./timestampISO}"></span>
						</div>
					</li>
					{{{ end }}}
				</ul>
			</div>
		</div>

		<div class="mb-4 border-bottom">
			<h6>[[user:info.email-history]]</h6>
			<div class="">
				<ul class="list-unstyled">
					{{{ each emails }}}
					<li class="d-flex justify-content-between mb-1">
						<span class="text-sm text-secondary">{./value}</span>
						<div>
							{{{ if ./byUid }}}
							<a class="lh-1" href="{{{ if ./byUser.userslug }}}{config.relative_path}/user/{./byUser.userslug}{{{ else }}}#{{{ end }}}">
							{buildAvatar(./byUser, "18px", true)}</a>
							{{{ end }}}
							<span class="timeago text-sm text-secondary lh-1 align-middle" title="{./timestampISO}"></span>
						</div>
					</li>
					{{{ end }}}
				</ul>
			</div>
		</div>

			<div class="mb-3 border-bottom">
			<h6>[[user:info.latest-flags]]</h6>
			<div class="">
				{{{ if history.flags.length }}}
				<ul class="recent-flags list-unstyled">
					{{{ each history.flags }}}
					<li class="mb-4 border-bottom">
						<div class="mb-1 d-flex align-items-center justify-content-between">
							<div>
								{{{ if (./type == "user")}}}
								<span class="badge text-bg-info">[[user:info.profile]]</span>
								{{{ else }}}
								<span class="badge text-bg-info">[[user:info.post]]</span>
								{{{ end }}}
								<span class="timestamp timeago" title="{./timestampISO}"></span>
							</div>

							<a href="{config.relative_path}/flags/{./flagId}" class="badge badge border border-gray-300 text-body">[[user:info.view-flag]]</a>
						</div>

						{{{ if (./type == "post") }}}
						<p class="mb-1">
							{{{ if history.flags.targetPurged }}}
							<div>[[flags:target-purged]]</div>
							{{{ else }}}
							<a class="title" href="{config.relative_path}/post/{encodeURIComponent(./pid)}">{./title}</a>
							{{{ end }}}
						</p>
						{{{ end }}}

						<div class="d-flex gap-2 align-items-center mb-3">
							<span class="text-sm">[[user:info.reported-by]]</span>
							<div class="d-flex text-nowrap">
								{{{ each ./reports }}}
								<a style="width: 18px; z-index: 3;" class="text-decoration-none" href="{config.relative_path}/user/{./reporter.userslug}">{buildAvatar(./reporter, "24px", true)}</a>
								{{{ end }}}
							</div>
						</div>
					</li>
					{{{ end }}}
				</ul>
				{{{ else }}}
				<div class="alert alert-light">[[user:info.no-flags]]</div>
				{{{ end }}}
			</div>
		</div>

		<div class="mb-3 border-bottom">
			<h6 class="d-flex align-items-center justify-content-between">
				[[user:info.ban-history]]

				{{{ if (!banned && !isSelf) }}}
				<button class="btn btn-sm btn-danger" component="account/ban">[[user:ban-account]]</button>
				{{{ end }}}
				{{{ if (banned && !isSelf) }}}
				<button class="btn btn-sm btn-success" component="account/unban">[[user:unban-account]]</button>
				{{{ end }}}
			</h6>
			<div class="">
				{{{ if history.bans.length }}}
				<ul class="ban-history list-unstyled">
					{{{ each history.bans }}}
					<li class="mb-4 border-bottom">
						<div class="mb-1 d-flex align-items-center justify-content-between">
							<div>
								<a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "24px", true)}</a>
								<strong>
									<a href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" itemprop="author" data-username="{./user.username}" data-uid="{./user.uid}">{./user.username}</a>
								</strong>
								<span class="timestamp timeago" title="{./timestampISO}"></span>
							</div>
							{{{ if (./type != "unban") }}}
							<span class="badge text-bg-danger">[[user:banned]]</span>
							{{{ else }}}
							<span class="badge text-bg-success">[[user:unbanned]]</span>
							{{{ end }}}
						</div>
						<p class="mb-1">
							<span class="reason">[[user:info.banned-reason-label]]: <strong>{./reason}</strong></span>
						</p>
						<p>
							{{{ if ./until }}}
							<span class="expiry">[[user:info.banned-until, {isoTimeToLocaleString(./untilISO, config.userLang)}]]</span>
							{{{ else }}}
							{{{ if (./type != "unban") }}}
							<span class="expiry">[[user:info.banned-permanently]]</span>
							{{{ end }}}
							{{{ end }}}
						</p>
					</li>
					{{{ end }}}
				</ul>
				{{{ else }}}
				<div class="alert alert-light">[[user:info.no-ban-history]]</div>
				{{{ end }}}
			</div>
		</div>

		<div class="mb-3">
			<h6 class="d-flex align-items-center justify-content-between">
				[[user:info.mute-history]]

				{{{ if !muted }}}
				{{{ if !isSelf }}}
				<button class="btn btn-sm btn-danger" component="account/mute">[[user:mute-account]]</button>
				{{{ end }}}
				{{{ else }}}
				{{{ if !isSelf }}}
				<button class="btn btn-sm btn-success" component="account/unmute">[[user:unmute-account]]</button>
				{{{ end }}}
				{{{ end }}}
			</h6>
			<div class="">
				{{{ if history.mutes.length }}}
				<ul class="ban-history list-unstyled">
					{{{ each history.mutes }}}
					<li class="mb-4 border-bottom">
						<div class="mb-1 d-flex align-items-center justify-content-between">
							<div>
								<a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "24px", true)}</a>
								<strong>
									<a href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" itemprop="author" data-username="{./user.username}" data-uid="{./user.uid}">{./user.username}</a>
								</strong>
								<span class="timestamp timeago" title="{./timestampISO}"></span>
							</div>
							{{{ if (./type != "unmute") }}}
							<span class="badge text-bg-danger">[[user:muted]]</span>
							{{{ else }}}
							<span class="badge text-bg-success">[[user:unmuted]]</span>
							{{{ end }}}
						</div>
						<p class="mb-1">
							<span class="reason">[[user:info.banned-reason-label]]: <strong>{./reason}</strong></span>
						</p>
						<p>
							{{{ if ./until }}}
							<span class="expiry">[[user:info.muted-until, {isoTimeToLocaleString(./untilISO, config.userLang)}]]</span>
							{{{ end }}}
						</p>
					</li>
					{{{ end }}}
				</ul>
				{{{ else }}}
				<div class="alert alert-light">[[user:info.no-mute-history]]</div>
				{{{ end }}}
			</div>
		</div>

	</div>

	<div class="col-sm-6 mb-3">
		{{{ if isAdminOrGlobalModerator }}}
		<div class="card">
			<h5 class="card-header">
				[[user:info.moderation-note]]
			</h5>
			<div class="card-body">
				<textarea component="account/moderation-note" class="form-control mb-3" aria-label="[[user:info.moderation-note]]"></textarea>

				<button class="btn btn-sm float-end btn-success" component="account/save-moderation-note">[[user:info.moderation-note.add]]</button>
				<br/>
				<div component="account/moderation-note/list">
					{{{ each moderationNotes }}}
					<hr/>

					<div data-id="{./id}">
						<div class="d-flex align-items-baseline gap-1 mb-1">
							<a href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">{buildAvatar(./user, "24px", true)}</a>

							<a href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" class="fw-bold" itemprop="author" data-username="{./user.username}" data-uid="{./user.uid}">{./user.username}</a>

							<span class="timeago text-sm text-secondary" title="{./timestampISO}"></span>
						</div>


						<div component="account/moderation-note/content-area" class="d-flex flex-column">
							<div class="content text-secondary">
								{./note}
							</div>
							<button component="account/moderation-note/edit" class="btn btn-sm btn-link align-self-end">[[topic:edit]]</button>
						</div>

						<div component="account/moderation-note/edit-area" class="d-flex flex-column gap-2 hidden">
							<textarea class="form-control form-control-sm w-100 overflow-hidden">{./rawNote}</textarea>
							<div class="align-self-end">
								<button component="account/moderation-note/cancel-edit" class="btn btn-sm btn-link text-danger align-self-end">[[global:cancel]]</button>
								<button component="account/moderation-note/save-edit" class="btn btn-sm btn-primary align-self-end">[[global:save]]</button>
							</div>
						</div>
					</div>
					{{{ end }}}
				</div>
				<!-- IMPORT partials/paginator.tpl -->
			</div>
		</div>
		{{{ end }}}
	</div>
</div>

<!-- IMPORT partials/account/footer.tpl -->