<div class="iz-field">
	<label class="iz-label" for="avatar_gravatar_email">
		{{ L_GRAVATAR_AVATAR_EMAIL }}{{ L_COLON }}
	</label>
	<p class="iz-hint">{{ L_GRAVATAR_AVATAR_EMAIL_EXPLAIN }}</p>

	<input
		type="email"
		name="avatar_gravatar_email"
		id="avatar_gravatar_email"
		value="{{ AVATAR_GRAVATAR_EMAIL }}"
		class="iz-input"
		data-reset-on-edit="#avatar_gravatar_width, #avatar_gravatar_height"
		autocomplete="email"
	>
</div>

<div class="iz-field">
	<label class="iz-label">
		{{ L_GRAVATAR_AVATAR_SIZE }}{{ L_COLON }}
	</label>
	<p class="iz-hint">{{ L_GRAVATAR_AVATAR_SIZE_EXPLAIN }}</p>

	<div class="iz-grid iz-grid--2">
		<div class="iz-field">
			<label class="iz-label iz-visually-hidden" for="avatar_gravatar_width">{{ L_WIDTH_SIZE }}</label>
			<div class="iz-inputgroup">
				<span class="iz-inputgroup__addon">{{ L_WIDTH_SIZE }}</span>
				<input
					type="number"
					min="{{ AVATAR_MIN_WIDTH }}"
					max="{{ AVATAR_MAX_WIDTH }}"
					name="avatar_gravatar_width"
					id="avatar_gravatar_width"
					value="{{ AVATAR_GRAVATAR_WIDTH }}"
					class="iz-input"
					placeholder="{{ L_WIDTH_PLACEHOLDER }}"
					inputmode="numeric"
				>
				<span class="iz-inputgroup__addon">{{ L_PIXEL_SIZE }}</span>
			</div>
		</div>

		<div class="iz-field">
			<label class="iz-label iz-visually-hidden" for="avatar_gravatar_height">{{ L_HEIGHT_SIZE }}</label>
			<div class="iz-inputgroup">
				<span class="iz-inputgroup__addon">{{ L_HEIGHT_SIZE }}</span>
				<input
					type="number"
					min="{{ AVATAR_MIN_HEIGHT }}"
					max="{{ AVATAR_MAX_HEIGHT }}"
					name="avatar_gravatar_height"
					id="avatar_gravatar_height"
					value="{{ AVATAR_GRAVATAR_HEIGHT }}"
					class="iz-input"
					placeholder="{{ L_HEIGTH_PLACEHOLDER }}"
					inputmode="numeric"
				>
				<span class="iz-inputgroup__addon">{{ L_PIXEL_SIZE }}</span>
			</div>
		</div>
	</div>
</div>
