<div class="ma_page_content">
	<div class="ma_pc_inner">
		<div class="page_padding">
			<!-- Settings -->
				<div class="sett_page">
					<h3>{{LANG Profile Settings}}</h3>
					<?php echo loadPage("settings/sidebar"); ?>
					<div class="st_content">
						<div class="st_form">
							<form method="post" action="" id="general-form">
								<div class="alert alert-danger alert-empty" id="output-general-errors"></div>
								<div class="row">
									<div class="col-md-12 p-0">
										<div class="form-group mat_input">
											<label class="col-md-12" for="name"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"></path></svg> {{LANG Full Name}}</label>
											<div class="col-md-12">
												<input type="text" name="name" id="name" value="{{USER name}}">
											</div>
										</div>
									</div>
								</div>
								<div class="form-group mat_input">
									<label class="col-md-12 p-0" for="about_me"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg> {{LANG About Me}}</label>
									<textarea name="about_me" id="about_me" rows="3" autofocus="">{{USER about_decoded}}</textarea>
								</div>
								<div class="row">
									<div class="col-md-6 p-0">
										<div class="form-group mat_input">
											<label class="col-md-12" for="facebook"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z"></path></svg> {{LANG Facebook Username}}</label>
											<div class="col-md-12">
												<input type="text" name="facebook" id="facebook" value="{{USER facebook}}">
											</div>
										</div>
									</div>
									<div class="col-md-6 p-0">
										<div class="form-group mat_input">
											<label class="col-md-12" for="website"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M16,6H13V7.9H16C18.26,7.9 20.1,9.73 20.1,12A4.1,4.1 0 0,1 16,16.1H13V18H16A6,6 0 0,0 22,12C22,8.68 19.31,6 16,6M3.9,12C3.9,9.73 5.74,7.9 8,7.9H11V6H8A6,6 0 0,0 2,12A6,6 0 0,0 8,18H11V16.1H8C5.74,16.1 3.9,14.26 3.9,12M8,13H16V11H8V13Z"></path></svg> {{LANG Website}}</label>
											<div class="col-md-12">
												<input type="text" name="website" id="website" value="{{USER website}}">
											</div>
										</div>
									</div>
								</div>
								<div class="row">
									<?php
         								$fields = GetProfileFields('profile');
         								if (count($fields) > 0) {
									foreach ($fields as $key => $wo['field']) {
									echo LoadPage('settings/profile-fields',$wo['field']);
									}
									echo '<input name="custom_fields" type="hidden" value="1">';
									}
									?>
								</div>
								<div class="last-sett-btn modal-footer">
									<input type="hidden" id="user-id" name="user_id" value="{{USER id}}">
									<button type="submit" class="btn btn-primary btn-mat" id="btn-general-submit">{{LANG Save}}</button>
								</div>
							</form>
						</div>
					</div>
				</div>
			<!-- End Settings -->
		</div>
	</div>
</div>

<script>
$(document).ready(function() { 
    var options = { 
    	url: "{{CONFIG ajax_url}}/user/profile?hash_id=" + getHashID(),
        beforeSubmit:  function () {
        	$('#output-general-errors').removeClass("alert-success").addClass('alert-danger');
        	$('#output-general-errors').empty();
        	$("#btn-general-submit").text("{{LANG Please wait..}}");
        }, 
        success: function (data) {
        	$("#btn-general-submit").text("{{LANG Save}}");
        	if (data.status == 200) {
        		$('#output-general-errors').removeClass("alert-danger").addClass('alert-success');
        		$('#output-general-errors').html(data.message);
        		setTimeout(function () {
        			$('#output-general-errors').html("");
        		}, 2000);
        	} else if (data.status == 400) {
        		var errros = data.errors.join("<br>");
        		$('#output-general-errors').html(errros);
        	} 
        }
    }; 
    $('#general-form').ajaxForm(options); 
}); 
</script>