{% 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">
			<header class="iz-card__header">
				<h2 class="iz-card__title">{{ L_TITLE }}</h2>
			</header>

			<div class="iz-card__body">
				<p class="iz-prose">{{ L_PROFILE_INFO_NOTICE }}</p>

				{% 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_profile_profile_info_before %}

				<div class="iz-fieldgroup">

					{% for profile_fields in profile_fields %}
						<div class="iz-field">
							<label class="iz-field__label"
								{% if profile_fields.FIELD_ID %}for="{{ profile_fields.FIELD_ID }}"{% endif %}>
								{{ profile_fields.LANG_NAME }}{{ L_COLON }}{% if profile_fields.S_REQUIRED %} <span class="iz-required">*</span>{% endif %}
							</label>

							{% if profile_fields.LANG_EXPLAIN %}
								<div class="iz-field__help">{{ profile_fields.LANG_EXPLAIN }}</div>
							{% endif %}

							<div class="iz-field__control">
								{{ profile_fields.FIELD }}
							</div>

							{% if profile_fields.ERROR %}
								<div class="iz-field__error" role="alert">{{ profile_fields.ERROR }}</div>
							{% endif %}
						</div>
					{% endfor %}

					{% if S_JABBER_ENABLED %}
						<div class="iz-field">
							<label for="jabber" class="iz-field__label">{{ L_UCP_JABBER }}{{ L_COLON }}</label>
							<div class="iz-field__control">
								<input type="text" name="jabber" id="jabber" maxlength="255" value="{{ JABBER }}" class="iz-input" />
							</div>
						</div>
					{% endif %}

					{% if S_BIRTHDAYS_ENABLED %}
						<div class="iz-field">
							<div class="iz-field__label">{{ L_BIRTHDAY }}{{ L_COLON }}</div>
							<div class="iz-field__help">{{ L_BIRTHDAY_EXPLAIN }}</div>

							<div class="iz-field__control">
								<div class="iz-grid iz-grid--3" role="group" aria-label="{{ L_BIRTHDAY }}">
									<div class="iz-subfield">
										<label for="bday_day" class="iz-subfield__label">{{ L_DAY }}</label>
										<select name="bday_day" id="bday_day" class="iz-select">
											{{ S_BIRTHDAY_DAY_OPTIONS }}
										</select>
									</div>

									<div class="iz-subfield">
										<label for="bday_month" class="iz-subfield__label">{{ L_MONTH }}</label>
										<select name="bday_month" id="bday_month" class="iz-select">
											{{ S_BIRTHDAY_MONTH_OPTIONS }}
										</select>
									</div>

									<div class="iz-subfield">
										<label for="bday_year" class="iz-subfield__label">{{ L_YEAR }}</label>
										<select name="bday_year" id="bday_year" class="iz-select">
											{{ S_BIRTHDAY_YEAR_OPTIONS }}
										</select>
									</div>
								</div>
							</div>
						</div>
					{% endif %}

				</div>

				{% EVENT ucp_profile_profile_info_after %}

				<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">
						{{ L_SUBMIT }}
					</button>
					{{ S_FORM_TOKEN }}
				</div>

			</div>
		</section>

	</form>
</div>

{% include 'ucp_footer.html' %}
{% 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">
			<header class="iz-card__header">
				<h2 class="iz-card__title">{{ L_TITLE }}</h2>
			</header>

			<div class="iz-card__body">
				<p class="iz-prose">{{ L_PROFILE_INFO_NOTICE }}</p>

				{% 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_profile_profile_info_before %}

				<div class="iz-fieldgroup">

					{% for profile_fields in profile_fields %}
						<div class="iz-field">
							<label class="iz-field__label"
								{% if profile_fields.FIELD_ID %}for="{{ profile_fields.FIELD_ID }}"{% endif %}>
								{{ profile_fields.LANG_NAME }}{{ L_COLON }}{% if profile_fields.S_REQUIRED %} <span class="iz-required">*</span>{% endif %}
							</label>

							{% if profile_fields.LANG_EXPLAIN %}
								<div class="iz-field__help">{{ profile_fields.LANG_EXPLAIN }}</div>
							{% endif %}

							<div class="iz-field__control">
								{{ profile_fields.FIELD }}
							</div>

							{% if profile_fields.ERROR %}
								<div class="iz-field__error" role="alert">{{ profile_fields.ERROR }}</div>
							{% endif %}
						</div>
					{% endfor %}

					{% if S_JABBER_ENABLED %}
						<div class="iz-field">
							<label for="jabber" class="iz-field__label">{{ L_UCP_JABBER }}{{ L_COLON }}</label>
							<div class="iz-field__control">
								<input type="text" name="jabber" id="jabber" maxlength="255" value="{{ JABBER }}" class="iz-input" />
							</div>
						</div>
					{% endif %}

					{% if S_BIRTHDAYS_ENABLED %}
						<div class="iz-field">
							<div class="iz-field__label">{{ L_BIRTHDAY }}{{ L_COLON }}</div>
							<div class="iz-field__help">{{ L_BIRTHDAY_EXPLAIN }}</div>

							<div class="iz-field__control">
								<div class="iz-grid iz-grid--3" role="group" aria-label="{{ L_BIRTHDAY }}">
									<div class="iz-subfield">
										<label for="bday_day" class="iz-subfield__label">{{ L_DAY }}</label>
										<select name="bday_day" id="bday_day" class="iz-select">
											{{ S_BIRTHDAY_DAY_OPTIONS }}
										</select>
									</div>

									<div class="iz-subfield">
										<label for="bday_month" class="iz-subfield__label">{{ L_MONTH }}</label>
										<select name="bday_month" id="bday_month" class="iz-select">
											{{ S_BIRTHDAY_MONTH_OPTIONS }}
										</select>
									</div>

									<div class="iz-subfield">
										<label for="bday_year" class="iz-subfield__label">{{ L_YEAR }}</label>
										<select name="bday_year" id="bday_year" class="iz-select">
											{{ S_BIRTHDAY_YEAR_OPTIONS }}
										</select>
									</div>
								</div>
							</div>
						</div>
					{% endif %}

				</div>

				{% EVENT ucp_profile_profile_info_after %}

				<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">
						{{ L_SUBMIT }}
					</button>
					{{ S_FORM_TOKEN }}
				</div>

			</div>
		</section>

	</form>
</div>

{% include 'ucp_footer.html' %}