<div class="col-md-12">
<style type="text/css">
.prof-tbl * { -moz-box-sizing: border-box; box-sizing: border-box; }
input[name="username"], input[name="user_email"],
input[name="cur_pass"], input[name="new_pass"],
input[name="cfm_pass"], input[name="user_birthday"],
input[name="user_icq"], input[name="user_skype"],

input[name="user_icq"], input[name="user_skype"],
input[name="user_icq"], input[name="user_skype"],  {
	width: 255px;
}
.prof-tbl td { padding: 4px 6px; }
.prof-title { text-align: right; }
.prof-tbl h6 { margin: 4px 0 4px 4px; color: #444444; line-height: 100%; display: inline-block; }
.form-control-static {
    background-color: rgba(171, 243, 219, 0.21);
    margin-bottom: 10px;
    border-bottom: 1px solid rgb(213, 227, 223);
    border-top: 1px solid rgb(213, 227, 223);
}
</style>
<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);
};
</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 data-toggle="tooltip" title="Copy to clipboard" style="cursor: pointer;" onclick="$(this).CopyToClipboard();" value="" autocomplete="off" type="text"/>
			<span class="regenerate" title="{L_REGENERATE}" onclick="autocomplete(true);"></span>
		</div>
	</div>
</div>

<div class="panel">
	<div class="panel-heading">
		<h3 class="panel-title">{PAGE_TITLE}</h3>
	</div>
	<form class="panel-body form-horizontal form-padding pad-no tokenized" id="prof-form" method="post" action="profile.php<!-- IF IS_ADMIN && PR_USER_ID -->?u={PR_USER_ID}<!-- ENDIF -->" 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 -->

		<p class="form-control-static tCenter bg-primary">{L_ITEMS_REQUIRED}</p>

		<div class="form-group">
			<label class="col-md-4 control-label">{L_USERNAME}: *</label>
			<div class="col-md-8">
				<!-- 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" size="35" maxlength="25" value="{USERNAME}" /><!-- ELSE --><b>{USERNAME}</b><!-- ENDIF --><span id="check_name"></span>
			</div>
		</div>

		<div class="form-group">
			<label class="col-md-4 control-label">{L_EMAIL}: *</label>
			<div class="col-md-8">
				<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" size="35" maxlength="40" value="{USER_EMAIL}" <!-- IF EDIT_PROFILE and not ADM_EDIT and not IS_ADMIN --><!-- IF $bb_cfg['emailer_disabled'] or $bb_cfg['email_change_disabled'] -->readonly="readonly" style="color: gray;"<!-- ENDIF --><!-- ENDIF --> />
				<small class="help-block"><!-- IF EDIT_PROFILE --><!-- ELSE IF $bb_cfg['reg_email_activation'] -->{L_EMAIL_EXPLAIN}<!-- ENDIF --></small>
				<span id="check_email"></span>
			</div>
		</div>
		<!-- IF EDIT_PROFILE and not ADM_EDIT -->
		<div class="form-group">
			<label class="col-md-4 control-label">{L_CURRENT_PASSWORD}: *</label>
			<div class="col-md-8">
				<input class="form-control" type="password" name="cur_pass" size="35" maxlength="32" value="" />
				<small class="help-block">{L_CONFIRM_PASSWORD_EXPLAIN}</small>
			</div>
		</div>
		<!-- ENDIF -->
		<div class="form-group">
			<label class="col-md-4 control-label"><!-- IF EDIT_PROFILE -->{L_NEW_PASSWORD}: *<!-- ELSE -->{L_PASSWORD}: *<!-- ENDIF --></label>
			<div class="col-md-8">
				<input class="form-control" id="pass" type="<!-- IF SHOW_PASS -->text<!-- ELSE -->password<!-- ENDIF -->" name="new_pass" size="35" maxlength="32" value="" />&nbsp;
				<span id="autocomplete" title="{L_AUTOCOMPLETE}">&#9668;</span> &nbsp;<i class="med">{PASSWORD_LONG}</i>
				<small class="help-block"><!-- IF EDIT_PROFILE -->{L_PASSWORD_IF_CHANGED}<!-- ELSE --><!-- ENDIF --></small>
			</div>
		</div>
		<div class="form-group">
			<label class="col-md-4 control-label">{L_CONFIRM_PASSWORD}: *</label>
			<div class="col-md-8">
				<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 -->" name="cfm_pass" size="35" maxlength="32" value="" />
				<small class="help-block"><!-- IF EDIT_PROFILE -->{L_PASSWORD_CONFIRM_IF_CHANGED}<!-- ENDIF --></small>
				<span id="check_pass"></span>
			</div>
		</div>
		<!-- IF CAPTCHA_HTML -->
		<div class="form-group">
			<label class="col-md-4 control-label">{L_CAPTCHA}: *</label>
			<div class="col-md-8">{CAPTCHA_HTML}</div>
		</div>
		<!-- ENDIF -->
		<!-- IF EDIT_PROFILE -->
		<!-- IF not ADM_EDIT -->
		<div class="form-group">
			<label class="col-md-4 control-label">{L_AUTOLOGIN}:</label>
			<div class="col-md-8"><a href="{U_RESET_AUTOLOGIN}">{L_RESET_AUTOLOGIN}</a><small class="help-block">{L_RESET_AUTOLOGIN_EXPL}</small></div>
		</div>
		<!-- ENDIF -->
		<p class="form-control-static tCenter bg-primary">{L_PROFILE_INFO}</p>
		<!-- IF $bb_cfg['gender'] -->
		<div class="form-group">
			<label class="col-md-4 control-label">{L_GENDER}:</label>
			<div class="col-md-8">{USER_GENDER}</div>
		</div>
		<!-- ENDIF -->
		<!-- IF $bb_cfg['birthday_enabled'] -->
		<div class="form-group">
			<label class="col-md-4 control-label">{L_BIRTHDAY}:</label>
			<div class="col-md-8"><input class="form-control" type="date" name="user_birthday" value="{USER_BIRTHDAY}" /></div>
		</div>
		<!-- ENDIF -->
		<div class="form-group">
			<label class="col-md-4 control-label">{L_ICQ}:</label>
			<div class="col-md-8"><input class="form-control" type="text" name="user_icq" size="30" maxlength="15" value="{USER_ICQ}" /></div>
		</div>
		<div class="form-group">
			<label class="col-md-4 control-label">{L_SKYPE}:</label>
			<div class="col-md-8"><input class="form-control" type="text" name="user_skype" size="30" maxlength="32" value="{USER_SKYPE}" /></div>
		</div>
		<div class="form-group">
			<label class="col-md-4 control-label">{L_TWITTER}:</label>
			<div class="col-md-8"><input class="form-control" type="text" name="user_twitter" size="30" maxlength="15" value="{USER_TWITTER}" /></div>
		</div>
		<div class="form-group">
			<label class="col-md-4 control-label">{L_WEBSITE}:</label>
			<div class="col-md-8"><input class="form-control" type="text" name="user_website" size="50" maxlength="100" value="{USER_WEBSITE}" /></div>
		</div>
		<div class="form-group">
			<label class="col-md-4 control-label">{L_OCCUPATION}:</label>
			<div class="col-md-8"><input class="form-control" type="text" name="user_occ" size="50" maxlength="100" value="{USER_OCC}" /></div>
		</div>
		<div class="form-group">
			<label class="col-md-4 control-label">{L_INTERESTS}:</label>
			<div class="col-md-8"><input class="form-control" type="text" name="user_interests" size="50" maxlength="150" value="{USER_INTERESTS}" /></div>
		</div>
		<div class="form-group">
			<label class="col-md-4 control-label">{L_LOCATION}:</label>
			<div class="col-md-8">
				<div><input class="form-control" type="text" name="user_from" size="50" maxlength="100" value="{USER_FROM}" /></div>
			</div>
		</div>
		<!-- ENDIF -->
		<!-- IF $bb_cfg['allow_change']['language'] -->
		<div class="form-group">
			<label class="col-md-4 control-label">{L_BOARD_LANG}:</label>
			<div class="col-md-8">{LANGUAGE_SELECT}</div>
		</div>
		<!-- ENDIF -->
		<!-- IF EDIT_PROFILE -->
		<p class="form-control-static tCenter bg-primary">{L_PREFERENCES}</p>
		<!-- IF TEMPLATES_SELECT -->
		<div class="form-group">
			<label class="col-md-4 control-label">{L_FORUM_STYLE}:</label>
			<div class="col-md-8">
				<div style="margin: 3px 0;">
					{TEMPLATES_SELECT}
				</div>
			</div>
		</div>
		<!-- ENDIF -->
		<!-- IF not SIG_DISALLOWED -->
		<p id="view_message" class="form-control-static tCenter signature" style="display: none;"></p>

		<script type="text/javascript">
		ajax.callback.posts = function(data){
			$('#view_message').show();
			$('.signature').html(data.message_html);
			initPostBBCode('.signature');
		};
		</script>
		<!-- ENDIF -->
		<div class="form-group">
			<label class="col-md-4 control-label">{L_SIGNATURE}:</label>
			<div class="col-md-8">
				<!-- IF SIG_DISALLOWED -->
				{L_SIGNATURE_DISABLE}
				<!-- ELSE -->
				<textarea class="form-control" id="user_sig" name="user_sig" rows="5" cols="60">{USER_SIG}</textarea>
				<input class="btn btn-success" type="button" value="{L_PREVIEW}" onclick="ajax.exec({ action: 'posts', type: 'view_message', message: $('textarea#user_sig').val() });">
				<small class="help-block">{SIGNATURE_EXPLAIN}</small>
				<!-- ENDIF -->
			</div>
		</div>

        <!-- IF IS_ADMIN || $bb_cfg['show_email_visibility_settings'] -->
		<div class="form-group">
			<label class="col-md-4 control-label">{L_PUBLIC_VIEW_EMAIL}:</label>
			<div class="col-md-8">
				<label class="custom-control custom-radio radio-inline">
					<input class="custom-control-input" type="radio" name="user_viewemail" value="1" <!-- IF USER_VIEWEMAIL -->checked="checked"<!-- ENDIF --> />
					<span class="custom-control-indicator"></span>
					{L_YES}
				</label>
				<label class="custom-control custom-radio radio-inline">
					<input class="custom-control-input" type="radio" name="user_viewemail" value="0" <!-- IF not USER_VIEWEMAIL -->checked="checked"<!-- ENDIF --> />
					<span class="custom-control-indicator"></span>
					{L_NO}
				</label>
			</div>
		</div>
		<!-- ENDIF -->
		<div class="form-group">
			<label class="col-md-4 control-label">{L_HIDE_USER}:</label>
			<div class="col-md-8">
				<label class="custom-control custom-radio radio-inline">
					<input class="custom-control-input" type="radio" name="user_viewonline" value="1" <!-- IF USER_VIEWONLINE -->checked="checked"<!-- ENDIF --> />
					<span class="custom-control-indicator"></span>
					{L_YES}
				</label>
				<label class="custom-control custom-radio radio-inline">
					<input class="custom-control-input" type="radio" name="user_viewonline" value="0" <!-- IF not USER_VIEWONLINE -->checked="checked"<!-- ENDIF --> />
					<span class="custom-control-indicator"></span>
					{L_NO}
				</label>
			</div>
		</div>
		<div class="form-group">
			<label class="col-md-4 control-label">{L_ALWAYS_NOTIFY}:</label>
			<div class="col-md-8">
				<label class="custom-control custom-radio radio-inline">
					<input class="custom-control-input" type="radio" name="user_notify" value="1" <!-- IF USER_NOTIFY -->checked="checked"<!-- ENDIF --> />
					<span class="custom-control-indicator"></span>
					{L_YES}
				</label>
				<label class="custom-control custom-radio radio-inline">
					<input class="custom-control-input" type="radio" name="user_notify" value="0" <!-- IF not USER_NOTIFY -->checked="checked"<!-- ENDIF --> />
					<span class="custom-control-indicator"></span>
					{L_NO}
				</label>
				<small class="help-block">{L_ALWAYS_NOTIFY_EXPLAIN}</small>
			</div>
		</div>
		<!-- IF $bb_cfg['pm_notify_enabled'] -->
		<div class="form-group">
			<label class="col-md-4 control-label">{L_NOTIFY_ON_PRIVMSG}:</label>
			<div class="col-md-8">
				<label class="custom-control custom-radio radio-inline">
					<input class="custom-control-input" type="radio" name="user_notify_pm" value="1" <!-- IF USER_NOTIFY_PM -->checked="checked"<!-- ENDIF --> />
					<span class="custom-control-indicator"></span>
					{L_YES}
				</label>
				<label class="custom-control custom-radio radio-inline">
					<input class="custom-control-input" type="radio" name="user_notify_pm" value="0" <!-- IF not USER_NOTIFY_PM -->checked="checked"<!-- ENDIF --> />
					<span class="custom-control-indicator"></span>
					{L_NO}
				</label>
			</div>
		</div>
		<!-- ENDIF -->
		<!-- IF SHOW_DATEFORMAT -->
		<div class="form-group">
			<label class="col-md-4 control-label">{L_DATE_FORMAT}:</label>
			<div class="col-md-8">
				<input class="form-control" type="text" name="dateformat" value="{DATE_FORMAT}" maxlength="14" />
				<small class="help-block">{L_DATE_FORMAT_EXPLAIN}</small>
			</div>
		</div>
		<!-- ENDIF -->
		<p class="form-control-static tCenter bg-primary">{L_UCP_DOWNLOADS}</p>
		<div class="form-group">
			<label class="col-md-4 control-label">{L_HIDE_PORN_FORUMS}:</label>
			<div class="col-md-8">
				<label class="custom-control custom-radio radio-inline">
					<input class="custom-control-input" type="radio" name="user_porn_forums" value="1" <!-- IF USER_PORN_FORUMS -->checked="checked"<!-- ENDIF --> />
					<span class="custom-control-indicator"></span>
					{L_YES}
				</label>
				<label class="custom-control custom-radio radio-inline">
					<input class="custom-control-input" type="radio" name="user_porn_forums" value="0" <!-- IF not USER_PORN_FORUMS -->checked="checked"<!-- ENDIF --> />
					<span class="custom-control-indicator"></span>
					{L_NO}
				</label>
			</div>
		</div>
		<div class="form-group">
			<label class="col-md-4 control-label">{L_ADD_RETRACKER}:</label>
			<div class="col-md-8">
				<label class="custom-control custom-radio radio-inline">
					<input class="custom-control-input" type="radio" name="user_retracker" value="1" <!-- IF USER_RETRACKER -->checked="checked"<!-- ENDIF --> />
					<span class="custom-control-indicator"></span>
					{L_YES}
				</label>
				<label class="custom-control custom-radio radio-inline">
					<input class="custom-control-input" type="radio" name="user_retracker" value="0" <!-- IF not USER_RETRACKER -->checked="checked"<!-- ENDIF --> />
					<span class="custom-control-indicator"></span>
					{L_NO}
				</label>
			</div>
		</div>
		<div class="form-group">
			<label class="col-md-4 control-label">{L_HIDE_DOWNLOADS}:</label>
			<div class="col-md-8">
				<label class="custom-control custom-radio radio-inline">
					<input class="custom-control-input" type="radio" name="user_dls" value="1" <!-- IF USER_DLS -->checked="checked"<!-- ENDIF --> />
					<span class="custom-control-indicator"></span>
					{L_YES}
				</label>
				<label class="custom-control custom-radio radio-inline">
					<input class="custom-control-input" type="radio" name="user_dls" value="0" <!-- IF not USER_DLS -->checked="checked"<!-- ENDIF --> />
					<span class="custom-control-indicator"></span>
					{L_NO}
				</label>
			</div>
		</div>
		<div class="form-group">
			<label class="col-md-4 control-label">{L_CALLSEED_EXPLAIN}:</label>
			<div class="col-md-8">
				<label class="custom-control custom-radio radio-inline">
					<input class="custom-control-input" type="radio" name="user_callseed" value="1" <!-- IF USER_CALLSEED -->checked="checked"<!-- ENDIF --> />
					<span class="custom-control-indicator"></span>
					{L_YES}
				</label>
				<label class="custom-control custom-radio radio-inline">
					<input class="custom-control-input" type="radio" name="user_callseed" value="0" <!-- IF not USER_CALLSEED -->checked="checked"<!-- ENDIF --> />
					<span class="custom-control-indicator"></span>
					{L_NO}
				</label>
			</div>
		</div>
		<p class="form-control-static tCenter bg-primary">{L_AVATAR_PANEL}</p>
		<!-- IF AVATAR_DISALLOWED -->
		<p class="form-control-static tCenter bg-primary">{AVATAR_DIS_EXPLAIN}</p>
		<!-- ELSE -->
		<div class="form-group">
			<div class="col-md-12">
				{AVATAR_EXPLAIN}
			</div>
		</div>
		<div class="form-group">
			<div class="col-md-6">
				<!-- IF $bb_cfg['avatars']['up_allowed'] -->
				<div class="spacer_4"></div>
				{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-md-6">
				<p class="mrg_6">{AVATAR_IMG}</p>
				<p><label><input type="checkbox" name="delete_avatar" /> {L_DELETE_IMAGE}</label></p>
			</div>
		</div>
		<!-- ENDIF / !AVATAR_DISALLOWED -->
		<!-- ENDIF / EDIT_PROFILE -->

		<!-- IF SHOW_REG_AGREEMENT -->
		<div class="form-group">
			<div class="col-md-12">
			<div id="infobox-wrap" class="bCenter">
				<fieldset class="pad_6">
				<legend class="med bold mrg_2 warnColor1">{L_USER_AGREEMENT_HEAD}</legend>
					<div class="bCenter">
						<?php include($V['HTML_AGREEMENT']); ?>
					</div>
					<p class="med bold mrg_4 tCenter"><label><input type="checkbox" value="" onclick="toggle_disabled('agreement', this.checked)" /> {L_USER_AGREEMENT_AGREE}</label></p>
				</fieldset>
			</div><!--/infobox-wrap-->
			</div>
		</div>
		<!-- ENDIF / SHOW_REG_AGREEMENT -->

		<div class="form-group">
			<div class="col-md-12 tCenter">
			<div id="submit-buttons">
				<!-- 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-success" <!-- IF SHOW_REG_AGREEMENT -->id="agreement" disabled="disabled"<!-- ENDIF --> />
			</div>
			</div>
		</div>

	</form>
</div>
</div>
