<header data-ng-include="'/static/modules/core/views/header.client.view.html'"></header>

<section class="row" data-ng-controller="SettingsController">
	<h2 class="col-xs-offset-1 col-xs-10 text-center">{{ 'EDIT_PROFILE' | translate }}</h2>
	<div class="col-xs-offset-3 col-xs-6">
		<form name="userForm" data-ng-submit="updateUserProfile(userForm.$valid)" class="signin form-horizontal" autocomplete="off">
			<fieldset>
				<div data-ng-show="success" class="text-center text-success">
					<strong>{{ 'PROFILE_SAVE_SUCCESS' | translate }}</strong>
				</div>
				<div data-ng-show="error" class="text-center text-danger">
					{{ 'PROFILE_SAVE_ERROR' | translate }}<br>
					<strong data-ng-bind="error"></strong>
				</div>

				<div class="form-group row">
					<div class="col-xs-7 field-title">
						{{ 'FIRST_NAME_LABEL' | translate }}
				    </div>
					<div class="col-xs-12 field-input">
						<input type="text" id="firstName" name="firstName" class="form-control" data-ng-model="user.firstName" ng-pattern="/^[\w0-9 \-.]*$/">
					</div>
				</div>
				<div class="form-group row">
					<div class="col-xs-7 field-title">
						{{ 'LAST_NAME_LABEL' | translate }}
				    </div>
					<div class="col-xs-12 field-input">
					<input type="text" id="lastName" name="lastName" class="form-control" data-ng-model="user.lastName"  ng-pattern="/^[\w0-9 \-.]*$/">
					</div>
				</div>
				<div class="row">
					<hr>
				</div>
				<div class="row form-group">
				    <div class="col-xs-7 field-title">
				    	{{ 'LANGUAGE_LABEL' | translate }}
				    </div>
				    <div class="col-xs-12 field-input">
						<select ng-model="user.language" required>
							<option ng-repeat="language in languages"
									ng-selected="language == user.language"
									value="{{language}}">
								{{language}}
							</option>
				        </select>
				    </div>
				</div>

				<div class="row form-group">
					<div class="col-xs-7 field-title">
						{{ 'USERNAME_LABEL' | translate }}
					</div>
					<div class="col-xs-12 field-input">
						<input type="text" id="username" name="username" class="form-control" data-ng-model="user.username">
					</div>
				</div>

				<div class="row form-group">
				    <div class="col-xs-7 field-title">
				    	{{ 'EMAIL_LABEL' | translate }}
				    </div>
				    <div class="col-xs-12 field-input">
						<input type="email" id="email" name="email" class="form-control" data-ng-model="user.email">
				    </div>
				</div>

				<div class="text-center form-group">
					<button type="submit" class="btn btn-signup btn-rounded">
						{{ 'SAVE_CHANGES' | translate }}
					</button>
					<button type="none" ng-click="cancel()" class="btn btn-rounded">
						{{ 'CANCEL_BTN' | translate }}
					</button>
				</div>

			</fieldset>
		</form>
	</div>
</section>
