{{ hook('HOOK_ACCOUNT_CREATE_BEFORE_FORM') }}
<form action="{{ getLink('account/create') }}" method="post" id="createaccount">
	{{ csrf() }}

	{% set title = 'Create ' ~ config.lua.serverName ~ ' Account' %}
	{% set background = config('darkborder') %}
	{% set tableClass = 'Table5' %}
	{% set content %}
		<table style="width:100%;" >
			{{ hook('HOOK_ACCOUNT_CREATE_BEFORE_BOXES') }}
			<tr>
				<td>
					<div class="TableShadowContainerRightTop"> <div class="TableShadowRightTop" style="background-image:url({{ template_path }}/images/global/content/table-shadow-rt.gif);"></div></div>
					<div class="TableContentAndRightShadow" style="background-image:url({{ template_path }}/images/global/content/table-shadow-rm.gif);">
						<div class="TableContentContainer">
							<table class="TableContent" width="100%" style="border:1px solid #faf0d7;">
								<tbody>

								{{ hook('HOOK_ACCOUNT_CREATE_BEFORE_ACCOUNT') }}

								{% if not config.account_login_by_email %}
								<tr>
									<td class="LabelV" style="width: 150px">
										<span{% if errors.account is defined %} class="red"{% endif %}>Account {% if constant('USE_ACCOUNT_NAME') %}Name{% else %}Number{% endif %}:</span>
										{% if not constant('USE_ACCOUNT_NAME') %}
										<div id="SuggestAccountNumber">[<a href="#">suggest number</a>]</div>
										{% endif %}
									</td>
									<td>
										<input type="text" name="account" id="account_input" size="30" maxlength="{% if constant('USE_ACCOUNT_NAME') %}30{% else %}10{% endif %}" value="{{ account }}" autofocus/>
										<img id="account_indicator" src="images/global/general/{% if not save or errors.account is defined %}n{% endif %}ok.gif" style="display: none;" />
									</td>
								</tr>
								{% endif %}
								<tr><td></td><td><span id="account_error" class="FormFieldError">{% if errors.account is defined %}{{ errors.account }}{% endif %}</span></td></tr>
								{{ hook('HOOK_ACCOUNT_CREATE_AFTER_ACCOUNT') }}
								<tr>
									<td class="LabelV" style="width: 150px">
										<span{% if errors.email is defined %} class="red"{% endif %}>Email Address:</span>
									</td>
									<td>
										<input type="text" name="email" id="email" size="30" maxlength="50" value="{{ email }}" />
										<img id="email_indicator" src="images/global/general/{% if not save or errors.email is defined %}n{% endif %}ok.gif" style="display: none;" />
									</td>
								</tr>
								<tr>
									<td></td><td><span id="email_error" class="FormFieldError">{% if errors.email is defined %}{{ errors.email }}{% endif %}</span></td>
								</tr>

								{% if setting('core.mail_enabled') and setting('core.account_mail_verify') %}
									<tr><td></td><td><span><strong>Please use a real address!<br/>We will send a link to validate your Email.</strong></span></td></tr>
								{% endif %}

								{{ hook('HOOK_ACCOUNT_CREATE_AFTER_EMAIL') }}

								{% if setting('core.account_country') %}
									<tr>
										<td class="LabelV" style="width: 150px">
											<span{% if errors.country[0] is defined %} class="red"{% endif %}>Country:</span>
										</td>
										<td>
											<select name="country" id="account_country">
												{% for code, country_ in countries %}
													<option value="{{ code }}"{% if(country is defined and country == code) or (country is null and country_recognized == code) %}selected{% endif %}>{{ country_ }}</option>
												{% endfor %}
											</select>
											<img src="" id="account_country_img"/>
										</td>
									</tr>
									{% if errors.country is defined %}
										<tr><td></td><td><span class="FormFieldError">{{ errors.country }}</span></td></tr>
									{% endif %}
								{% endif %}

								{{ hook('HOOK_ACCOUNT_CREATE_AFTER_COUNTRY') }}

								<tr>
									<td class="LabelV" style="width: 150px">
										<span{% if errors.password is defined %} class="red"{% endif %}>Password:</span>
									</td>
									<td>
										<input type="password" name="password" id="password" value="" size="30" maxlength="29" />
										<img id="password_indicator" src="images/global/general/{% if not save or errors.password is defined %}n{% endif %}ok.gif" style="display: none;" />
									</td>
								</tr>
								<tr><td></td><td><span id="password_error" class="FormFieldError">{% if errors.password is defined %}{{ errors.password }}{% endif %}</span></td></tr>

								{{ hook('HOOK_ACCOUNT_CREATE_AFTER_PASSWORD') }}

								<tr>
									<td class="LabelV" style="width: 150px">
										<span{% if errors.password is defined %} class="red"{% endif %}>Repeat password:</span>
									</td>
									<td>
										<input type="password" name="password_confirm" id="password_confirm" value="" size="30" maxlength="29" />
										<img id="password_confirm_indicator" src="images/global/general/{% if not save or errors.password is defined %}n{% endif %}ok.gif" style="display: none;" />
									</td>
								</tr>
								<tr><td></td><td><span id="password_confirm_error" class="FormFieldError">{% if errors.password is defined %}{{ errors.password }}{% endif %}</span></td></tr>

								{{ hook('HOOK_ACCOUNT_CREATE_AFTER_PASSWORDS') }}
								</tbody>
							</table>
						</div>
					</div>
					<div class="TableShadowContainer">
						<div class="TableBottomShadow" style="background-image:url({{ template_path }}/images/global/content/table-shadow-bm.gif);"> <div class="TableBottomLeftShadow" style="background-image:url({{ template_path }}/images/global/content/table-shadow-bl.gif);"></div> <div class="TableBottomRightShadow" style="background-image:url({{ template_path }}/images/global/content/table-shadow-br.gif);"></div> </div></div>
				</td>
			</tr>

			{{ hook('HOOK_ACCOUNT_CREATE_BETWEEN_BOXES_1') }}

			{% if setting('core.account_create_character_create') %}
			<tr>
				<td>
					<div class="TableShadowContainerRightTop">
						<div class="TableShadowRightTop" style="background-image:url({{ template_path }}/images/global/content/table-shadow-rt.gif);"></div>
					</div>
					<div class="TableContentAndRightShadow" style="background-image:url({{ template_path }}/images/global/content/table-shadow-rm.gif);">
						<div class="TableContentContainer">
							<table class="TableContent" width="100%" style="border:1px solid #faf0d7;">
								<tbody>

								{{ hook('HOOK_ACCOUNT_CREATE_BEFORE_CHARACTER_NAME') }}

								<tr>
									<td class="LabelV" style="width: 150px">
										<span{% if errors.name is defined %} class="red"{% endif %}>Character Name:</span>
									</td>
									<td>
										<input id="character_name" name="name" size="{{ setting('core.create_character_name_max_length') }}" maxlength="{{ setting('core.create_character_name_max_length') }}" value="{{ name }}"/>
										<img id="character_indicator" src="images/global/general/{% if not save or errors.name is defined %}n{% endif %}ok.gif" style="display: none;" />
										<br>
									</td>
								</tr>
								<tr>
									<td></td>
									<td>
										<span id="character_error" class="FormFieldError">{% if errors.name is defined %}{{ errors.name }}{% endif %}</span>
									</td>
								</tr>

								{{ hook('HOOK_ACCOUNT_CREATE_AFTER_CHARACTER_NAME') }}

								<tr>
									<td class="LabelV" style="width: 150px">
										<span{% if errors.sex is defined %} class="red"{% endif %}>Sex:</span>
									</td>
									<td>
										<table width="100%">
											<tbody>
											<tr>
												<td>
													{% set i = 0 %}
													{% for id, gender in config.genders|reverse(true) %}
														{% set i = i + 1 %}
														<span style="margin-right:15px;" class="OptionContainer">
															<input type="radio" name="sex" id="sex{{ i }}" value="{{ id }}"{% if sex is not null and sex == id %} checked="checked"{% endif %}>
															<label for="sex{{ i }}">{{ gender|lower }}</label>
														</span>
													{% endfor %}
												</td>
												<td>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td></td>
									<td>
										<span id="sex_error" class="FormFieldError">{% if errors.sex is defined %}{{ errors.sex }}{% endif %}</span>
									</td>
								</tr>

								{{ hook('HOOK_ACCOUNT_CREATE_AFTER_SEX') }}

								{% if config.character_samples|length > 1 %}
								<tr>
									<td class="LabelV" style="width: 150px">
										<span{% if errors.vocation is defined %} class="red"{% endif %}>Vocation:</span>
									</td>
									<td>
										<table width="100%" >
											<tbody>
											<tr>
												<td>
												{% for key, sample_char in config.character_samples %}
													<span style="margin-right:15px;" class="OptionContainer">
														<input type="radio" name="vocation" id="vocation{{ key }}" value="{{ key }}"
																{% if vocation is not null and vocation == key %} checked="checked"{% endif %}>
														<label for="vocation{{ key }}">{{ config['vocations'][key] }}</label>
													</span>
												{% endfor %}
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td></td>
									<td>
										<span id="vocation_error" class="FormFieldError">{% if errors.vocation is defined %}{{ errors.vocation }}{% endif %}</span>
									</td>
								</tr>
								{% endif %}

								{{ hook('HOOK_ACCOUNT_CREATE_AFTER_VOCATION') }}

								{% if config.character_towns|length > 1 %}
								<tr>
									<td class="LabelV" style="width: 150px">
										<span{% if errors.town is defined %} class="red"{% endif %}>Select your town:</span>
									</td>
									<td>
										<table width="100%" >
											<tbody>
											<tr>
												<td>
													{% for town_id in config.character_towns %}
														<span style="margin-right:15px;" class="OptionContainer">
															<input type="radio" name="town" id="town{{ town_id }}" value="{{ town_id }}"
																	{% if town is not null and town == town_id %} checked="checked"{% endif %}>
															<label for="town{{ town_id }}">{{ config.towns[town_id] }}</label>
														</span>
													{% endfor %}
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								{% endif %}

								{{ hook('HOOK_ACCOUNT_CREATE_AFTER_TOWNS') }}

								</tbody>
							</table>
						</div>
					</div>
					<div class="TableShadowContainer">
						<div class="TableBottomShadow" style="background-image:url({{ template_path }}/images/global/content/table-shadow-bm.gif);">
							<div class="TableBottomLeftShadow" style="background-image:url({{ template_path }}/images/global/content/table-shadow-bl.gif);"></div>
							<div class="TableBottomRightShadow" style="background-image:url({{ template_path }}/images/global/content/table-shadow-br.gif);"></div>
						</div>
					</div>
				</td>
			</tr>
			{% endif %}

			{{ hook('HOOK_ACCOUNT_CREATE_BETWEEN_BOXES_2') }}

			<tr>
				<td>
					<div class="TableShadowContainerRightTop">
						<div class="TableShadowRightTop" style="background-image:url({{ template_path }}/images/global/content/table-shadow-rt.gif);"></div>
					</div>
					<div class="TableContentAndRightShadow" style="background-image:url({{ template_path }}/images/global/content/table-shadow-rm.gif);">
						<div class="TableContentContainer">
							<table class="TableContent" width="100%" style="border:1px solid #faf0d7;">
								<tbody>
								<tr>
									<td colspan="2" ><b>Please select the following check box:</b></td>
								</tr>
								<tr>
									<td colspan="2" >
										<span><input type="checkbox" id="accept_rules" name="accept_rules" value="true"{% if accept_rules %}checked{% endif %}/> <label for="accept_rules">I agree to the <a href="?subtopic=rules" target="_blank">{{ config.lua.serverName }} Rules</a>.</label></span>
									</td>
								</tr>
								{% if errors.accept_rules is defined %}
									<tr>
										<td colspan="2">
											<span class="FormFieldError">{{ errors.accept_rules }}</span>
										</td>
									</tr>
								{% endif %}
								</tbody>
							</table>
						</div>
					</div>
					<div class="TableShadowContainer">
						<div class="TableBottomShadow" style="background-image:url({{ template_path }}/images/global/content/table-shadow-bm.gif);"> <div class="TableBottomLeftShadow" style="background-image:url({{ template_path }}/images/global/content/table-shadow-bl.gif);"></div> <div class="TableBottomRightShadow" style="background-image:url({{ template_path }}/images/global/content/table-shadow-br.gif);"></div>
						</div>
					</div>
				</td>
			</tr>

			{{ hook('HOOK_ACCOUNT_CREATE_AFTER_BOXES') }}

		</table>
	{% endset %}
	{% include 'tables.headline.html.twig' %}

	<br/>
	{{ hook('HOOK_ACCOUNT_CREATE_BEFORE_SUBMIT_BUTTON') }}
	<table width="100%">
		<tr align="center">
			<td>
				<table border="0" cellspacing="0" cellpadding="0" >
					<tr>
						<td style="border:0px;" >
							<input type="hidden" name="save" value="1" >
							{{ include('buttons.submit.html.twig') }}
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</form>
{{ hook('HOOK_ACCOUNT_CREATE_AFTER_FORM') }}
<script type="text/javascript" src="{{ constant('BASE_URL') }}tools/check_name.js"></script>
<style>
	#SuggestAccountNumber {
		font-size: 7pt;
	}
</style>
