<template name="profile">
	<div class="container-sm">
		<div class="page-component">
			<h1>
				<span class="fa fa-cogs fa-fw" aria-hidden="true"></span>
				{{mf 'login.frame.settings'}}
			</h1>
		</div>
		{{#if unsubscribeSuccess}}
			<div class="alert alert-success" role="alert">
				<span class="fa-stack fa-lg">
					<i class="fa fa-envelope-o fa-stack-1x"></i>
					<i class="fa fa-ban fa-stack-2x"></i>
				</span>
				{{mf 'notifications.unsubscribeSuccess' 'You have successfully unsubscribed from notifications.'}}
			</div>
		{{/if}}
		{{#if unsubscribeError}}
			<div class="alert alert-danger" role="alert">
				<span class="fa-stack fa-lg">
					<i class="fa fa-envelope-o fa-stack-1x"></i>
					<i class="fa fa-ban fa-stack-2x"></i>
				</span>
				{{mf 'notifications.unsubscribeError' 'There has been an error with your unsubscription from notifications. Please Try again.'}}
			</div>
		{{/if}}
		{{#unless loggedIn}}
			{{mf 'profile.not_logged_in' 'You are not logged in'}}
		{{else}}
			<a class="page-link" href="{{pathFor 'userprofile' _id=currentUser._id}}">
				<span class="fa fa-user-circle-o fa-fw" aria-hidden="true"></span>
				{{mf 'login.frame.profile' 'Visit my profile'}}
			</a>
			<div class="page-component">
				{{#if editing}}
					<div class="details-form">
						<form class="form-horizontal profile-info-edit">
							<div class="form-group">
								<label for="editform_username" class="control-label">
									{{mf 'profile.input.username' 'Username'}}
								</label>
								<div class="control-input">
									<input class="form-control"
										id="editform_username"
										type="text"
										value="{{user.name}}"/>
									</div>
							</div>
							<div class="form-group">
								<label for="editform_email" class="control-label">
									{{mf 'profile.email' 'E-Mail'}} {{mf '_inputField.optional'}}
								</label>
								<div class="control-input">
									<input class="form-control"
										id="editform_email"
										type="text"
										value="{{user.email}}"/>
								</div>
							</div>
							<div class="form-group">
								<div class="control-btn">
									<div class="checkbox">
										<label>
											<input type="checkbox" class="js-notifications" {{notificationsChecked}}/>
											<span class="fa fa-asterisk fa-fw" aria-hidden="true"></span>
											{{mf 'profile.toggle.notifications' 'Receive notifications'}}
										</label>
									</div>
								</div>
							</div>
							<div class="form-actions">
								{{> buttonSave}}
								{{> buttonCancel event="js-profile-info-cancel"}}
							</div>
						</form>
					</div>
				{{else}}
					<div class="details-body profile-info">
						<div class="details-content">
							<div class="details-info-group">
								<div class="details-info-label">
									{{mf 'profile.username' 'Username'}}
								</div>
								<div class="details-info-data">
									{{user.name}}
								</div>
							</div>
							{{#if user.have_email}}
								<div class="details-info-group">
									<div class="details-info-label">
										{{mf 'profile.email' 'E-Mail'}} {{mf '_inputField.optional'}}
									</div>
									<div class="details-info-data">
										{{user.email}}
										<small class="mail-verified">
											{{#if user.verified}}
												<span class="fa fa-check-square" aria-hidden="true"></span>
												{{mf 'profile.emailVerified' "verified"}}
											{{/if}}
										</small>
									</div>
								</div>
								{{#unless user.verified}}
									<div class="details-info-group">
										<div class="details-info-label"></div>
										<div class="details-info-data">
											{{> verifyEmail}}
										</div>
									</div>
								{{/unless}}
							{{/if}}
							<div class="details-info-group">
								<div class="details-info-label">
									<span class="fa fa-asterisk fa-fw" aria-hidden="true"></span>
									{{mf 'profile.notification.subscribe' 'Get notifications'}}
								</div>
								<div class="details-info-data">
									{{#if user.notifications}}
										{{mf '_option.on'}}
									{{else}}
										{{mf '_option.off'}}
									{{/if}}
								</div>
							</div>
						</div>
					</div>
					{{#if changingPass}}
					<div class="details-form">
						<form class="form-horizontal" id="changePwd">
							<div class="form-group">
								<label for="oldpassword" class="control-label">
									{{mf 'profile.input.oldPassword' 'Your current password'}}
								</label>
								<div class="control-input">
									<input type="password" class="form-control" id="oldpassword" value=""/>
								</div>
							</div>
							<div class="form-group">
								<label for="newpassword" class="control-label">
									{{mf 'profile.input.newPassword' 'New password'}}
								</label>
								<div class="control-input">
									<input type="password" class="form-control" id="newpassword" value=""/>
								</div>
							</div>
							<div class="form-group">
								<label for="newpassword_confirm" class="control-label">
									{{mf 'profile.input.repeatPassword' 'Repeat new password'}}
								</label>
								<div class="control-input">
									<input type="password" class="form-control" id="newpassword_confirm" value=""/>
								</div>
							</div>
							<div class="form-actions">
								{{> buttonSave}}
								{{> buttonCancel event="js-change-pwd-cancel"}}
							</div>
						</form>
					</div>
					{{/if}}
					<div class="actions">
						{{#unless changingPass}}
							<button type="button" class="btn btn-default js-change-pwd-btn">
								<span class="fa fa-lock fa-fw" aria-hidden="true"></span>
								{{mf 'profile.changePass' 'Change my password'}}
							</button>
						{{/unless}}
						{{> buttonEdit event="js-profile-info-edit"}}
						{{#unless expanded}}
							{{> buttonDelete event="js-expand"}}
						{{/unless}}
					</div>
				{{/if}}
				{{#if expanded}}
					<div class="profile-delete-confirmation">
						<p>{{mf 'profile.reallydelete' 'Please confirm that you would like to delete your profile. This cannot be undone, you will have to create a new account if you want to use this site again.'}}</p>
						<div class="form-actions">
							{{> buttonDeleteConfirm
								event="js-profile-delete-confirm-btn"
								textIdle=(mf 'profile.delete.confirm.button' 'Delete my user and all its profile')
								textBusy=(mf 'profile.delete.confirm.button.busy' 'Deleting profile...')
							}}
							{{> buttonCancel event="js-collapse"}}
						</div>
					</div>
				{{/if}}
			</div>
			<div class="page-component">
				<a class="btn btn-success translate-link" href="/translate">
					<span class="fa fa-language fa-fw" aria-hidden="true"></span>
					{{mf 'Profile.translate_this_page' 'Help us to translate this Page'}}
				</a>
			</div>
			<div class="page-component page-component-seperated profile-grouplist">
				<h3>{{mf 'profile.groups' 'My groups'}}</h3>
				<h5>
					{{#mf KEY='profile.groupMembership' NUM_GROUPS=groupCount}}
					You are {NUM_GROUPS, plural,
					=0 {not member of any group}
					=1 {member of the group:}
					other {member of # groups:}}
					{{/mf}}
				</h5>
				<ul class="groups">
					{{#each user.groups}}
						{{#with this._id}}
							<li>
								{{> groupNameFull}}
							</li>
						{{/with}}
					{{/each}}
				</ul>
				<a class="btn btn-add"
					href="{{pathFor 'groupDetails' _id='create'}}">
					<span class="fa fa-plus fa-fw" aria-hidden="true"></span>
					{{mf 'profile.createNewGroup.button' 'Create a new group'}}
				</a>
			</div>
			<div class="page-component page-component-seperated profile-venues-list">
				<h3>{{mf 'profile.venues' 'My venues:'}}</h3>
				{{#if isVenueEditor}}
					<ul class="list-unstyled">
						{{#each user.venues}}
							<li>{{> venueLink venue=this}}</li>
						{{/each}}
					</ul>
				{{else}}
					<p>{{mf 'userprofile.noOwnVenues' "You're not editor of any venue."}}</p>
				{{/if}}
				<a class="btn btn-add" href="{{pathFor 'venueDetails' _id='create'}}">
					<span class="fa fa-plus fa-fw" aria-hidden="true"></span>
					{{mf 'profile.createNewVenue.button' 'Create a new venue'}}
				</a>
			</div>
			{{> usersCourselist profileData=this ownProfile=true}}
		{{/unless}}
	</div>
</template>
