<script type="text/javascript">
$(function(){
	var tab_idx = 100;
	$('input,select,textarea', '#prof-form').not(':hidden').not(':disabled').each(function(){
		$(this).attr({ tabindex: ++tab_idx });
	});
});

ajax.callback.user_register = function(data){
	$('#'+ data.mode).html(data.html);
};

$(document).ready(function(){
  $('.popover-check').popover({
	placement : 'top',
	html      : 'true'
  });
});
</script>

<div id="autocomplete_popup">
	<div class="relative">
		<div class="close" onclick="$('div#autocomplete_popup').hide();"></div>
		<div class="title">{L_YOUR_NEW_PASSWORD}</div>
		<div>
			<input value="" autocomplete="off" type="text"/>
			<span class="regenerate" title="{L_REGENERATE}" onclick="autocomplete(true);"></span>
		</div>
	</div>
</div>

<form id="prof-form" method="post" action="profile.php<!-- IF IS_ADMIN && PR_USER_ID -->?u={PR_USER_ID}<!-- ENDIF -->" class="tokenized" enctype="multipart/form-data">
<input type="hidden" name="mode" value="{MODE}" />
<input type="hidden" name="reg_agreed" value="1" />
<!-- IF NEW_USER --><input type="hidden" name="admin" value="1" /><!-- ENDIF -->
<!-- IF ADM_EDIT -->
<input type="hidden" name="u" value="{PR_USER_ID}" />
<!-- ENDIF -->
<!-- IF not ADM_EDIT -->
<script type="text/javascript">
x = new Date();
tz = -x.getTimezoneOffset()/60;
document.write('<input type="hidden" name="user_timezone" value="'+tz+'" />');
</script>
<!-- ELSE -->
<input type="hidden" name="user_timezone" value="{USER_TIMEZONE}" />
<!-- ENDIF -->
<div class="col-md-12">
<div class="nav-tabs-custom">
	<ul class="nav nav-tabs pull-right">
		<li class="active"><a href="#registration_info" data-toggle="tab">{L_REGISTRATION_INFO}</a></li>
		<!-- IF LOGGED_IN -->
		<li><a href="#profile_info" data-toggle="tab">{L_PROFILE_INFO}</a></li>
		<li><a href="#preferences" data-toggle="tab">{L_PREFERENCES}</a></li>
		<li><a href="#avatar" data-toggle="tab">{L_AVATAR}</a></li>
		<!-- ENDIF -->
		<li class="pull-left header"><i class="fa fa-inbox"></i> {L_REGISTRATION_INFO}</li>
	</ul>
	<div class="tab-content">
		<div class="chart tab-pane active" id="registration_info">
			<div class="form-horizontal">
			<div class="form-group">
				<label class="col-sm-12">{L_REGISTRATION_INFO}</label>
			</div>
			<div class="form-group">
				<label class="col-sm-12 text-center text-red">{L_ITEMS_REQUIRED}</label>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label" for="username">{L_USERNAME}: * </label>
				<div class="col-sm-9">
				<div class="input-group">
					<!-- IF CAN_EDIT_USERNAME --><input class="form-control" id="username" onBlur="ajax.exec({ action: 'user_register', mode: 'check_name', username: $('#username').val()}); return false;" type="text" name="username" value="{USERNAME}" /><!-- ELSE --><b>{USERNAME}</b><!-- ENDIF -->
					<span class="input-group-addon" id="check_name"><span class="text-red"> *</span></span>
				</div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label" for="email">{L_EMAIL}: * <!-- IF EDIT_PROFILE --><!-- ELSE IF $bb_cfg['reg_email_activation'] --><br /><h6>{L_EMAIL_EXPLAIN}</h6><!-- ENDIF --></label>
				<div class="col-sm-9">
				<div class="input-group">
					<input class="form-control" id="email" onBlur="ajax.exec({ action: 'user_register', mode: 'check_email', email: $('#email').val()}); return false;" type="text" name="user_email" value="{USER_EMAIL}" <!-- IF EDIT_PROFILE --><!-- IF $bb_cfg['emailer_disabled'] -->readonly="readonly" style="color: gray;"<!-- ENDIF --><!-- ENDIF --> />
					<span class="input-group-addon" id="check_email"><span class="text-red"> *</span></span>
				</div>
				</div>
			</div>
			<!-- IF EDIT_PROFILE and not ADM_EDIT -->
			<div class="form-group">
				<label class="col-sm-3 control-label">{L_CURRENT_PASSWORD}: * <br /><h6>{L_CONFIRM_PASSWORD_EXPLAIN}</h6></label>
				<div class="col-sm-9">
					<input class="form-control" type="password" placeholder="{L_CURRENT_PASSWORD}" name="cur_pass" value="">
				</div>
			</div>
			<!-- ENDIF -->
			<div class="form-group">
				<label class="col-sm-3 control-label"><!-- IF EDIT_PROFILE -->{L_NEW_PASSWORD}: * <br /><h6>{L_PASSWORD_IF_CHANGED}</h6><!-- ELSE -->{L_PASSWORD}: *<!-- ENDIF --></label>
				<div class="col-sm-9">
					<span id="autocomplete" title="{L_AUTOCOMPLETE}">&#9668;</span> &nbsp;<i class="med">{L_PASSWORD_LONG}</i>
					<input class="form-control" id="pass" type="<!-- IF SHOW_PASS -->text<!-- ELSE -->password<!-- ENDIF -->" placeholder="{L_NEW_PASSWORD}" name="new_pass" value="" />
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">{L_CONFIRM_PASSWORD}: * <!-- IF EDIT_PROFILE --><br /><h6>{L_PASSWORD_CONFIRM_IF_CHANGED}</h6><!-- ENDIF --></label>
				<div class="col-sm-9">
				<div class="input-group">
					<input class="form-control" id="pass_confirm" onBlur="ajax.exec({ action: 'user_register', mode: 'check_pass', pass: $('#pass').val(), pass_confirm: $('#pass_confirm').val() }); return false;" type="<!-- IF SHOW_PASS -->text<!-- ELSE -->password<!-- ENDIF -->" placeholder="{L_CONFIRM_PASSWORD}" name="cfm_pass" value="" />
					<span class="input-group-addon" id="check_pass"><span class="text-red"> *</span></span>
				</div>
				</div>
			</div>
			<!-- IF CAPTCHA_HTML -->
			<div class="form-group">
				<label class="col-sm-3 control-label">{L_CAPTCHA}: *</label>
				<div class="col-sm-9">
					{CAPTCHA_HTML}
				</div>
			</div>
			<!-- ENDIF -->
			<!-- IF EDIT_PROFILE -->
			<!-- IF not ADM_EDIT -->
			<div class="form-group">
				<label class="col-sm-3 control-label">{L_AUTOLOGIN}:</label>
				<div class="col-sm-9">
					<a href="{U_RESET_AUTOLOGIN}">{L_RESET_AUTOLOGIN}</a><p class="small text-muted">{L_RESET_AUTOLOGIN_EXPL}</p>
				</div>
			</div>
			<!-- ENDIF -->
			<!-- ENDIF -->
			<!-- IF SHOW_REG_AGREEMENT -->
			<div class="form-group">
				<div class="col-sm-12 text-center">
					<fieldset>
					<legend class="text-red small">{L_USER_AGREEMENT_HEAD}</legend>
						<?php include($V['HTML_AGREEMENT']); ?>
						<div class="checkbox">
							<label><input type="checkbox" value="" checked="checked" disabled="disabled" /> {L_USER_AGREEMENT_AGREE}</label>
						</div>
					</fieldset>
				</div>
			</div>
			<!-- ENDIF / SHOW_REG_AGREEMENT -->
			</div>
		</div>
		<div class="chart tab-pane" id="profile_info">
			<div class="form-horizontal">
			<!-- IF EDIT_PROFILE -->
			<div class="form-group">
				<label class="col-sm-12">{L_PROFILE_INFO}</label>
			</div>
			<!-- IF $bb_cfg['gender'] -->
			<div class="form-group">
				<label class="col-sm-3 control-label">{L_GENDER}:</label>
				<div class="col-sm-9">
					{USER_GENDER}
				</div>
			</div>
			<!-- ENDIF -->
			<!-- IF $bb_cfg['birthday_enabled'] -->
			<div class="form-group">
				<label class="col-sm-3 control-label">{L_BIRTHDAY}:</label>
				<div class="col-sm-9">
					<input class="form-control" type="date" name="user_birthday" value="{USER_BIRTHDAY}">
				</div>
			</div>
			<!-- ENDIF -->
			<div class="form-group">
				<label class="col-sm-3 control-label">ICQ:</label>
				<div class="col-sm-9">
					<input class="form-control" type="text" name="user_icq" value="{USER_ICQ}">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">{L_SKYPE}:</label>
				<div class="col-sm-9">
					<input class="form-control" type="text" name="user_skype" value="{USER_SKYPE}">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">{L_TWITTER}:</label>
				<div class="col-sm-9">
					<input class="form-control" type="text" name="user_twitter" value="{USER_TWITTER}">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">{L_WEBSITE}:</label>
				<div class="col-sm-9">
					<input class="form-control" type="text" name="user_website" value="{USER_WEBSITE}">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">{L_OCCUPATION}:</label>
				<div class="col-sm-9">
					<input class="form-control" type="text" name="user_occ" value="{USER_OCC}">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">{L_INTERESTS}:</label>
				<div class="col-sm-9">
					<input class="form-control" type="text" name="user_interests" value="{USER_INTERESTS}">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">{L_LOCATION}:</label>
				<div class="col-sm-9">
					<input class="form-control" type="text" name="user_from" value="{USER_FROM}">
				</div>
			</div>
			<!-- IF $bb_cfg['allow_change']['language'] -->
			<div class="form-group">
				<label class="col-sm-3 control-label">{L_BOARD_LANG}:</label>
				<div class="col-sm-9">
					{LANGUAGE_SELECT}
				</div>
			</div>
			<!-- ENDIF -->
			<!-- ENDIF -->
			</div>
		</div>
		<div class="chart tab-pane" id="preferences">
			<div class="form-horizontal">
			<!-- IF EDIT_PROFILE -->
			<div class="form-group">
				<label class="col-sm-12">{L_PREFERENCES}</label>
			</div>
			<!-- IF TEMPLATES_SELECT -->
			<div class="form-group">
				<label class="col-sm-3 control-label">{L_FORUM_STYLE}:</label>
				<div class="col-sm-9">
					{TEMPLATES_SELECT}
				</div>
			</div>
			<!-- ENDIF -->
			<!-- IF not SIG_DISALLOWED -->
			<div class="form-group">
				<label class="col-sm-3 control-label"></label>
				<div class="col-sm-9">
					<div id="view_message">
						<div class="signature"></div>
					</div>
					<script type="text/javascript">
					ajax.callback.posts = function(data){
						$('#view_message').show();
						$('.signature').html(data.message_html);
						initPostBBCode('.signature');
					};
					</script>
				</div>
			</div>
			<!-- ENDIF -->
			<div class="form-group">
				<label class="col-sm-3 control-label">{L_SIGNATURE}: <br /><h6>{SIGNATURE_EXPLAIN}</h6></label>
				<div class="col-sm-9">
					<!-- IF SIG_DISALLOWED -->
					{L_SIGNATURE_DISABLE}
					<!-- ELSE -->
					<p><textarea id="user_sig" name="user_sig" rows="5" cols="60" style="width: 96%;" class="form-control">{USER_SIG}</textarea></p>
					<button class="btn btn-default" type="button" onclick="ajax.exec({ action: 'posts', type: 'view_message', message: $('textarea#user_sig').val() });">{L_PREVIEW} <i class="fa fa-arrow-circle-right"></i></button>
					<!-- ENDIF -->
				</div>
			</div>
			<!-- IF IS_ADMIN -->
			<div class="form-group">
				<label class="col-sm-3 control-label">{L_PUBLIC_VIEW_EMAIL}:</label>
				<div class="col-sm-9">
					<div class="radio">
						<label><input type="radio" name="user_viewemail" value="1" <!-- IF USER_VIEWEMAIL -->checked="checked"<!-- ENDIF --> />{L_YES}</label>
						<label><input type="radio" name="user_viewemail" value="0" <!-- IF not USER_VIEWEMAIL -->checked="checked"<!-- ENDIF --> />{L_NO}</label>
					</div>
				</div>
			</div>
			<!-- ENDIF -->
			<div class="form-group">
				<label class="col-sm-3 control-label">{L_HIDE_USER}:</label>
				<div class="col-sm-9">
					<div class="radio">
						<label><input type="radio" name="user_viewonline" value="1" <!-- IF USER_VIEWONLINE -->checked="checked"<!-- ENDIF --> />{L_YES}</label>
						<label><input type="radio" name="user_viewonline" value="0" <!-- IF not USER_VIEWONLINE -->checked="checked"<!-- ENDIF --> />{L_NO}</label>
					</div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">{L_ALWAYS_NOTIFY}:<br /><h6>{L_ALWAYS_NOTIFY_EXPLAIN}</h6></label>
				<div class="col-sm-9">
					<div class="radio">
						<label><input type="radio" name="user_notify" value="1" <!-- IF USER_NOTIFY -->checked="checked"<!-- ENDIF --> />{L_YES}</label>
						<label><input type="radio" name="user_notify" value="0" <!-- IF not USER_NOTIFY -->checked="checked"<!-- ENDIF --> />{L_NO}</label>
					</div>
				</div>
			</div>
			<!-- IF $bb_cfg['pm_notify_enabled'] -->
			<div class="form-group">
				<label class="col-sm-3 control-label">{L_NOTIFY_ON_PRIVMSG}:</label>
				<div class="col-sm-9">
					<div class="radio">
						<label><input type="radio" name="user_notify_pm" value="1" <!-- IF USER_NOTIFY_PM -->checked="checked"<!-- ENDIF --> />{L_YES}</label>
						<label><input type="radio" name="user_notify_pm" value="0" <!-- IF not USER_NOTIFY_PM -->checked="checked"<!-- ENDIF --> />{L_NO}</label>
					</div>
				</div>
			</div>
			<!-- ENDIF -->
			<!-- IF SHOW_DATEFORMAT -->
			<div class="form-group">
				<label class="col-sm-3 control-label">{L_DATE_FORMAT}:<br /><h6>{L_DATE_FORMAT_EXPLAIN}</h6></label>
				<div class="col-sm-9">
					<input type="text" name="dateformat" value="{DATE_FORMAT}" class="form-control">
				</div>
			</div>
			<!-- ENDIF -->
			<div class="form-group">
				<label class="col-sm-3 control-label">{L_HIDE_PORN_FORUMS}:</label>
				<div class="col-sm-9">
					<div class="radio">
						<label><input type="radio" name="user_porn_forums" value="1" <!-- IF USER_PORN_FORUMS -->checked="checked"<!-- ENDIF --> />{L_YES}</label>
						<label><input type="radio" name="user_porn_forums" value="0" <!-- IF not USER_PORN_FORUMS -->checked="checked"<!-- ENDIF --> />{L_NO}</label>
					</div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">{L_ADD_RETRACKER}:</label>
				<div class="col-sm-9">
					<div class="radio">
						<label><input type="radio" name="user_retracker" value="1" <!-- IF USER_RETRACKER -->checked="checked"<!-- ENDIF --> />{L_YES}</label>
						<label><input type="radio" name="user_retracker" value="0" <!-- IF not USER_RETRACKER -->checked="checked"<!-- ENDIF --> />{L_NO}</label>
					</div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">{L_HIDE_DOWNLOADS}:</label>
				<div class="col-sm-9">
					<div class="radio">
						<label><input type="radio" name="user_dls" value="1" <!-- IF USER_DLS -->checked="checked"<!-- ENDIF --> />{L_YES}</label>
						<label><input type="radio" name="user_dls" value="0" <!-- IF not USER_DLS -->checked="checked"<!-- ENDIF --> />{L_NO}</label>
					</div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">{L_CALLSEED_EXPLAIN}:</label>
				<div class="col-sm-9">
					<div class="radio">
						<label><input type="radio" name="user_callseed" value="1" <!-- IF USER_CALLSEED -->checked="checked"<!-- ENDIF --> />{L_YES}</label>
						<label><input type="radio" name="user_callseed" value="0" <!-- IF not USER_CALLSEED -->checked="checked"<!-- ENDIF --> />{L_NO}</label>
					</div>
				</div>
			</div>
			<!-- ENDIF -->
			</div>
		</div>
		<div class="chart tab-pane" id="avatar">
			<div class="form-horizontal">
			<div class="form-group">
				<label class="col-sm-12">{L_AVATAR_PANEL}</label>
			</div>
			<!-- IF AVATAR_DISALLOWED -->
			<div class="form-group">
				<label class="col-sm-12">{AVATAR_DIS_EXPLAIN}</label>
			</div>
			<!-- ELSE -->
			<div class="form-group">
				<div class="col-sm-7 small">
					{AVATAR_EXPLAIN}
					<!-- IF $bb_cfg['avatars']['up_allowed'] -->
					</br>
					{L_UPLOAD_AVATAR_FILE}:
					<input type="hidden" name="MAX_FILE_SIZE" value="{$bb_cfg['avatars']['max_size']}" />
					<input type="file" name="avatar" />
					<!-- ENDIF -->
				</div>
				<div class="col-sm-5 text-center">
					<div class="checkbox">
						{AVATAR_IMG}
						</br>
						<label><input type="checkbox" name="delete_avatar" /> {L_DELETE_IMAGE}</label>
					</div>
				</div>
			</div>
			<!-- ENDIF / !AVATAR_DISALLOWED -->
			</div>
		</div>
	</div>
	<div class="nav-tabs footer">
		<div id="submit-buttons" class="text-center" style="padding: 10px;">
			<!-- IF EDIT_PROFILE --><input type="reset" value="{L_RESET}" name="reset" class="btn btn-default"><!-- ENDIF -->
			<input type="submit" name="submit" value="{L_SUBMIT}" class="btn btn-danger">
		</div>
	</div>
</div>
</div>

</form>