{% include 'ucp_header.html' %}

<div class="tab-pane active">
	<form id="ucp" method="post" action="{{ S_UCP_ACTION }}"{{ S_FORM_ENCTYPE }} class="iz-form">

		<section class="iz-card iz-card--ucp iz-card--prefs">
			<header class="iz-card__header">
				<h2 class="iz-card__title">{{ L_TITLE }}</h2>
			</header>

			<div class="iz-card__body">

				{% if ERROR %}
					<div class="iz-alert iz-alert--info" role="status">
						<strong>{{ L_INFO_BOX }}</strong>&nbsp;{{ ERROR }}
					</div>
					<div class="iz-space iz-space--sm"></div>
				{% endif %}

				{% EVENT ucp_prefs_personal_prepend %}

				<div class="iz-fieldgroup">

					<div class="iz-field">
						<div class="iz-field__label">{{ L_SHOW_EMAIL }}{{ L_COLON }}</div>
						<div class="iz-field__control">
							<div class="iz-choicegroup">
								<div class="iz-choice iz-choice--radio">
									<input type="radio" name="viewemail" id="viewemail1" value="1"{% if S_VIEW_EMAIL %} checked="checked"{% endif %} />
									<label for="viewemail1">{{ L_YES }}</label>
								</div>
								<div class="iz-choice iz-choice--radio">
									<input type="radio" name="viewemail" id="viewemail0" value="0"{% if not S_VIEW_EMAIL %} checked="checked"{% endif %} />
									<label for="viewemail0">{{ L_NO }}</label>
								</div>
							</div>
						</div>
					</div>

					<div class="iz-field">
						<div class="iz-field__label">{{ L_ADMIN_EMAIL }}{{ L_COLON }}</div>
						<div class="iz-field__control">
							<div class="iz-choicegroup">
								<div class="iz-choice iz-choice--radio">
									<input type="radio" name="massemail" id="massemail1" value="1"{% if S_MASS_EMAIL %} checked="checked"{% endif %} />
									<label for="massemail1">{{ L_YES }}</label>
								</div>
								<div class="iz-choice iz-choice--radio">
									<input type="radio" name="massemail" id="massemail0" value="0"{% if not S_MASS_EMAIL %} checked="checked"{% endif %} />
									<label for="massemail0">{{ L_NO }}</label>
								</div>
							</div>
						</div>
					</div>

					<div class="iz-field">
						<div class="iz-field__label">{{ L_ALLOW_PM }}{{ L_COLON }}</div>
						<div class="iz-field__help">{{ L_ALLOW_PM_EXPLAIN }}</div>
						<div class="iz-field__control">
							<div class="iz-choicegroup">
								<div class="iz-choice iz-choice--radio">
									<input type="radio" name="allowpm" id="allowpm1" value="1"{% if S_ALLOW_PM %} checked="checked"{% endif %} />
									<label for="allowpm1">{{ L_YES }}</label>
								</div>
								<div class="iz-choice iz-choice--radio">
									<input type="radio" name="allowpm" id="allowpm0" value="0"{% if not S_ALLOW_PM %} checked="checked"{% endif %} />
									<label for="allowpm0">{{ L_NO }}</label>
								</div>
							</div>
						</div>
					</div>

					{% if S_CAN_HIDE_ONLINE %}
						<div class="iz-field">
							<div class="iz-field__label">{{ L_HIDE_ONLINE }}{{ L_COLON }}</div>
							<div class="iz-field__help">{{ L_HIDE_ONLINE_EXPLAIN }}</div>
							<div class="iz-field__control">
								<div class="iz-choicegroup">
									<div class="iz-choice iz-choice--radio">
										<input type="radio" name="hideonline" id="hideonline1" value="1"{% if S_HIDE_ONLINE %} checked="checked"{% endif %} />
										<label for="hideonline1">{{ L_YES }}</label>
									</div>
									<div class="iz-choice iz-choice--radio">
										<input type="radio" name="hideonline" id="hideonline0" value="0"{% if not S_HIDE_ONLINE %} checked="checked"{% endif %} />
										<label for="hideonline0">{{ L_NO }}</label>
									</div>
								</div>
							</div>
						</div>
					{% endif %}

					{% if S_SELECT_NOTIFY %}
						<div class="iz-field">
							<div class="iz-field__label">{{ L_NOTIFY_METHOD }}{{ L_COLON }}</div>
							<div class="iz-field__control">
								<div class="iz-choicegroup">
									<div class="iz-choice iz-choice--radio">
										<input type="radio" name="notifymethod" id="notifymethod0" value="0"{% if S_NOTIFY_EMAIL %} checked="checked"{% endif %} />
										<label for="notifymethod0">{{ L_NOTIFY_METHOD_EMAIL }}</label>
									</div>
									<div class="iz-choice iz-choice--radio">
										<input type="radio" name="notifymethod" id="notifymethod1" value="1"{% if S_NOTIFY_IM %} checked="checked"{% endif %} />
										<label for="notifymethod1">{{ L_NOTIFY_METHOD_IM }}</label>
									</div>
									<div class="iz-choice iz-choice--radio">
										<input type="radio" name="notifymethod" id="notifymethod2" value="2"{% if S_NOTIFY_BOTH %} checked="checked"{% endif %} />
										<label for="notifymethod2">{{ L_NOTIFY_METHOD_BOTH }}</label>
									</div>
								</div>
							</div>
						</div>
					{% endif %}

					{% if S_MORE_LANGUAGES %}
						<div class="iz-field">
							<label class="iz-field__label" for="lang">{{ L_BOARD_LANGUAGE }}{{ L_COLON }}</label>
							<div class="iz-field__control">
								<select name="lang" id="lang" class="iz-select">
									{{ S_LANG_OPTIONS }}
								</select>
							</div>
						</div>
					{% endif %}

					{% if S_STYLE_OPTIONS and S_MORE_STYLES %}
						<div class="iz-field">
							<label class="iz-field__label" for="user_style">{{ L_BOARD_STYLE }}{{ L_COLON }}</label>
							<div class="iz-field__control">
								<select name="user_style" id="user_style" class="iz-select">
									{{ S_STYLE_OPTIONS }}
								</select>
							</div>
						</div>
					{% endif %}

					<!-- from timezone_option.html -->
					<div class="iz-field">
						<label class="iz-field__label" for="timezone">{{ L_BOARD_TIMEZONE }}{{ L_COLON }}</label>
						<div class="iz-field__control">
							<select name="tz" id="timezone" class="iz-select">
								<option value="">{{ L_SELECT_TIMEZONE }}</option>
								{% for timezone_select in timezone_select %}
									<optgroup label="{{ timezone_select.LABEL }}" data-tz-value="{{ timezone_select.VALUE }}">
										{% for timezone_options in timezone_options %}
											<option
												title="{{ timezone_select.timezone_options.TITLE }}"
												value="{{ timezone_select.timezone_options.VALUE }}"
												{% if timezone_select.timezone_options.SELECTED %}selected="selected"{% endif %}
											>
												{{ timezone_select.timezone_options.LABEL }}
											</option>
										{% endfor %}
									</optgroup>
								{% endfor %}
							</select>
						</div>
					</div>
					<!-- end timezone_option.html -->

					<div class="iz-field">
						<label class="iz-field__label" for="dateoptions">{{ L_BOARD_DATE_FORMAT }}{{ L_COLON }}</label>
						<div class="iz-field__help">{{ L_BOARD_DATE_FORMAT_EXPLAIN }}</div>

						<div class="iz-field__control">
							<select name="dateoptions" id="dateoptions" class="iz-select"
								onchange="
									if (this.value=='custom'){phpbb.toggleDisplay('custom_date',1);}else{phpbb.toggleDisplay('custom_date',-1);}
									if (this.value == 'custom') { document.getElementById('dateformat').value = default_dateformat; }
									else { document.getElementById('dateformat').value = this.value; }
								">
								{{ S_DATEFORMAT_OPTIONS }}
							</select>
						</div>

						<div class="iz-space iz-space--xs"></div>

						<div id="custom_date" class="iz-field__control" style="display:none;">
							<input type="text" name="dateformat" id="dateformat" value="{{ DATE_FORMAT }}" maxlength="64" class="iz-input" />
						</div>
					</div>

				</div>

				{% EVENT ucp_prefs_personal_append %}

				<div class="iz-space iz-space--md"></div>

				<div class="iz-actions">
					{{ S_HIDDEN_FIELDS }}
					<button type="submit" name="submit" value="{{ L_SUBMIT }}" class="iz-btn iz-btn--primary" autocomplete="off">
						{{ L_SUBMIT }}
					</button>
					{{ S_FORM_TOKEN }}
				</div>

			</div>
		</section>

	</form>
</div>

<script>
	(function () {
		// original ucp_prefs_personal.html logic, without head.ready/jQuery
		var date_format = '{{ A_DATE_FORMAT }}';
		var default_dateformat = '{{ A_DEFAULT_DATEFORMAT }}';

		function customDates() {
			var e = document.getElementById('dateoptions');
			if (!e) return;

			e.selectedIndex = e.length - 1;

			for (var i = 0; i < e.length; i++) {
				if (e.options[i].value == date_format) {
					e.selectedIndex = i;
					break;
				}
			}

			if (e.selectedIndex == e.length - 1) {
				phpbb.toggleDisplay('custom_date', 1);
			} else {
				phpbb.toggleDisplay('custom_date', -1);
			}
		}

		if (document.readyState == 'loading') {
			document.addEventListener('DOMContentLoaded', customDates);
		} else {
			customDates();
		}
	})();
</script>

{% include 'ucp_footer.html' %}