<div class="tab-pane active">
	<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">

			{% if not S_AVATARS_ENABLED %}
				<p class="iz-prose">{{ L_AVATAR_FEATURES_DISABLED }}</p>
			{% endif %}

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

			<!-- Current avatar -->
			<div class="iz-field">
				<label class="iz-label">{{ L_CURRENT_IMAGE }}{{ L_COLON }}</label>

				<div class="iz-avatar-preview">
					{% if AVATAR %}
						{{ AVATAR }}
					{% else %}
						<img src="{{ T_THEME_PATH }}/images/no_avatar.gif" alt="" />
					{% endif %}
				</div>

				{% if AVATAR %}
					<div class="iz-choice iz-choice--check">
						<input type="checkbox" name="avatar_delete" id="avatar_delete">
						<label for="avatar_delete">{{ L_DELETE_AVATAR }}</label>
					</div>
				{% endif %}

				<p class="iz-hint">
					<strong>{{ L_NOTE }}</strong>&nbsp;{{ L_AVATAR_EXPLAIN }}
				</p>
			</div>

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

			<section class="iz-card iz-card--nested">
				<header class="iz-card__header">
					<h3 class="iz-card__title">{{ L_UCP_AVATAR_SELECT_OPTIONS }}</h3>
				</header>

				<div class="iz-card__body">

					{% if S_SINGLE_AVATAR_TYPE %}
						{% EVENT ucp_avatar_options_single_avatar_type %}
					{% else %}

						<div class="iz-field">
							<label class="iz-label" for="avatar_driver">
								{{ L_AVATAR_TYPE }}{{ L_COLON }}
							</label>

							<select
								class="iz-select"
								name="avatar_driver"
								id="avatar_driver"
								data-togglable-settings="true"
							>
								{% for avatar_drivers in avatar_drivers %}
									<option
										value="{{ avatar_drivers.DRIVER }}"
										{% if avatar_drivers.SELECTED %} selected="selected"{% endif %}
										data-toggle-setting="#avatar_option_{{ avatar_drivers.DRIVER }}"
									>
										{{ avatar_drivers.L_TITLE }}
									</option>
								{% endfor %}
							</select>
						</div>

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

						<div id="avatar_options">
							{% for avatar_drivers in avatar_drivers %}
								<div id="avatar_option_{{ avatar_drivers.DRIVER }}">
									<noscript>
										<h4 class="iz-h4">{{ avatar_drivers.L_TITLE }}</h4>
									</noscript>

									<p class="iz-prose">{{ avatar_drivers.L_EXPLAIN }}</p>

									{{ avatar_drivers.OUTPUT }}
								</div>
							{% endfor %}
						</div>

					{% endif %}

					{% if not S_GROUP_MANAGE %}
						<div class="iz-space iz-space--md"></div>

						<div class="iz-actions">
							<button
								type="submit"
								class="iz-btn iz-btn--primary"
								name="submit"
								value="{{ L_SUBMIT }}"
							>
								{{ L_SUBMIT }}
							</button>
						</div>
					{% endif %}

				</div>
			</section>

		</div>
	</section>
</div>
