h1(focusTitle) Account settings

.row.text-large
	.col-md-6
		form(name="form" (submit)="submit()" style="max-width: 400px; margin-bottom: 100px")
			.form-group
				h3 Account details
			.form-group
				label(for="account-id") Account ID
				input#account-id.form-control([value]="account?.id" readonly)
			.form-group
				label(for="account-name") Account Name
				input#account-name.form-control(
					type="text" name="name" [(ngModel)]="data.name" required [maxlength]="nameMaxLength")
				small.form-text.text-warning This name will be visible to other players
			.form-group
				label(for="birthdate")
					| Date of birth
					fa-icon.ms-1.text-danger(*ngIf="showAccountAlert" [icon]="alertIcon" title="Missing field value")
				date-picker([(date)]="data.birthdate")
			.form-group(*ngIf="accountError")
				.alert.alert-danger
					| {{accountError}}
			.form-group(*ngIf="accountSaved")
				.alert.alert-success
					| Changes saved
			.form-group.text-end
				button.btn.btn-default(type="submit" [disabled]="!canSubmit" style="min-width: 100px;")
					| {{saveButtonText}}

		div(style="margin-bottom: 100px;")
			.form-group
				h3 Connected social accounts

			.form-group
				p.text-muted.
					If you remove social account, you won't be able to use it to sign-in to the game anymore.

			.form-group
				ul.list-unstyled
					li.item-connected-account.d-flex.justify-content-between(*ngFor="let s of sites")
						a([href]="s.url" target="_blank" rel="noopener noreferrer")
							fa-icon.me-1([icon]="icon(s.icon)" [fixedWidth]="true")
							b #[span.visually-hidden {{s.icon}}] {{s.name}}
						button.btn.btn-sm.btn-danger(*ngIf="sites.length > 1" (click)="removeSite(s)" [disabled]="removingSite")
							| remove

			.form-group
				p.text-danger.
					Please do NOT connect any social sites that #[b do not belong to you!]
					Connecting social sites belonging to other people may result in unexpected account merge
					and loss of one or both accounts.
				p.text-danger.
					Please contact our support email if you accidentally merge your account with someone else.
				.dropdown(dropdown)
					button.btn.btn-default.dropdown-toggle(dropdownToggle)
						| connect another social site to this account
					.dropdown-menu(*dropdownMenu)
						button.dropdown-item(*ngFor="let p of providers" (click)="connectSite(p)")
							fa-icon.me-1([icon]="icon(p.id)" [fixedWidth]="true")
							| #[span.visually-hidden {{p.name}}] {{p.name}}

			.form-group(*ngIf="mergeError")
				.alert.alert-danger
					| {{mergeError}}

			.form-group(*ngIf="authError")
				.alert.alert-danger
					| {{authError}}

			.form-group(*ngIf="mergedAccount")
				.alert.alert-success
					| Account connected successfully

			.form-group(*ngIf="removedAccount")
				.alert.alert-success
					| Account removed successfully

	.col-md-6
		div(style="margin-bottom: 100px;")
			.form-group
				.float-end
					span.text-muted Page: {{page + 1}}
					button.btn.btn-sm.btn-outline-secondary.ms-2((click)="page = page - 1; pageChanged()" [disabled]="!hides || page === 0")
						| Previous page
					button.btn.btn-sm.btn-outline-secondary.ms-1((click)="page = page + 1; pageChanged()" [disabled]="!hides || hides.length < hidesPerPage")
						| Next page
				h3 Hidden players

			div(*ngIf="!hides")
				.text-muted.text-center.p-4 loading...

			ul.list-unstyled(*ngIf="hides")
				.text-muted.text-center.p-4(*ngIf="!hides.length") no hidden players
				li.item-connected-account.d-flex.align-items-center(*ngFor="let h of hides")
					b.flex-grow-1 {{h.name}}
					span.text-muted.me-2 hidden {{h.date}}
					button.btn.btn-sm.btn-danger((click)="unhidePlayer(h)")
						| unhide player