extends ../layout.pug
block title
	|Icy Network - User Settings

block append links
	link(rel="stylesheet", type="text/css", href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css")
	script(src="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.js")

block body
	.container.mt-4.mb-4
		nav(aria-label="breadcrumb")
			ol.breadcrumb
				li.breadcrumb-item
					a(href="/") Home
				li.breadcrumb-item.active(aria-current="page") User Settings
		h1 User Settings
		.modal.fade#avatarModal(tabindex="-1", role="dialog", aria-labelledby="avatarModalTitle", aria-hidden="true")
			.modal-dialog.modal-lg(role="document")
				.modal-content
					.modal-header
						h5.modal-title#avatarModalTitle Change Avatar
						button.close(type="button", data-dismiss="modal", aria-label="Close")
							span(aria-hidden="true") ×
					.modal-body
						include partials/avatar.pug
					.modal-footer
						button.btn.btn-secondary(type="button", data-dismiss="modal") Close
						button.btn.btn-primary#btnDone(type="button", style="display: none;") Done
						button.btn.btn-primary#btnUpload(type="button", style="display: none;") Upload
		.row
			.col-md-3
				.nav.flex-column.nav-pills#v-pills-tab(role="tablist", aria-orientation="vertical")
					a.nav-link.active#v-pills-main-tab(data-toggle="tab", href="#v-pills-main", role="tab", aria-control="v-pills-main", aria-selected="true") General Settings
					if auth
						a.nav-link#v-pills-social-tab(data-toggle="tab", href="#v-pills-social", role="tab", aria-control="v-pills-social", aria-selected="false") Social Accounts
					a.nav-link#v-pills-oauth2-tab(data-toggle="tab", href="#v-pills-oauth2", role="tab", aria-control="v-pills-oauth2", aria-selected="false") Authorizations
					a.nav-link#v-pills-actions-tab(data-toggle="tab", href="#v-pills-actions", role="tab", aria-control="v-pills-actions", aria-selected="false") Account Actions
			.col-9
				.tab-content#v-pills-tabContent
					.tab-pane.fade.show.active#v-pills-main(role="tabpanel", aria-labelledby="v-pills-main")
						h2 General Settings
						if message.text
							if message.error
								.alert.alert-danger
									span #{message.text}
							else
								.alert.alert-success
									span #{message.text}
						form#loginForm(method="POST", action="")
							input(type="hidden", name="csrf", value=csrf)
							.form-group
								label(for="username") Username
								input.form-control(type="text", name="username", id="username", value=user.username, disabled)
							.form-group
								label(for="display_name") Display Name
								input.form-control(type="text", name="display_name", id="display_name", value=user.display_name)
							label Avatar
							.avatarCont
								include ../includes/avatar.pug
								.options
									a(data-toggle="modal", data-target="#avatarModal" href='#') Change Avatar
									if user.avatar_file
										a#removeAvatar(href='#') Remove Avatar
							button.btn.btn-primary(type="submit") Save Settings
					.tab-pane.fade#v-pills-social(role="tabpanel", aria-labelledby="v-pills-social")
						h3 Social Media Accounts
						p You can add social media accounts to your account for ease of login. Once added, logging in from linked sources logs you into this account automatically.
						if auth
							include ../includes/external.pug
							if auth.google == false
								a.option.disconnect.login-btn.float-lg-right(href="/api/external/google/remove")
									i.fas.fa-fw.fa-times
									|Unlink Google
							if auth.twitter == false
								a.option.disconnect.login-btn.float-lg-right(href="/api/external/twitter/remove")
									i.fas.fa-fw.fa-times
									|Unlink Twitter
							if auth.facebook == false
								a.option.disconnect.login-btn.float-lg-right(href="/api/external/facebook/remove")
									i.fas.fa-fw.fa-times
									|Unlink Facebook
							if auth.discord == false
								a.option.disconnect.login-btn.float-lg-right(href="/api/external/discord/remove")
									i.fas.fa-fw.fa-times
									|Unlink Discord
					.tab-pane.fade#v-pills-oauth2(role="tabpanel", aria-labelledby="v-pills-oauth2")
						h2 Authorized Applications
						p Applications which have access to basic user information. You may restrict access at any time by pressing the red icon on the top right of the application card.
						.cl#clientlist
							p Please enable JavaScript to view this content.
					.tab-pane.fade#v-pills-actions(role="tabpanel", aria-labelledby="v-pills-actions")
						h3 Account Actions
						if password
							a.option(href="/user/manage/password")
								i.fas.fa-fw.fa-lock
								|Change Password
							if totp
								a.option(href="/user/two-factor/disable")
									i.fas.fa-fw.fa-lock
									|Disable Two-Factor Authentication
							else
								a.option(href="/user/two-factor")
									i.fas.fa-fw.fa-lock
									|Enable Two-Factor Authentication
						a.option(href="/user/manage/email")
							i.fas.fa-fw.fa-envelope
							|Change Email Address