<div class="iz-field">
	<label class="iz-label" for="avatar_remote_url">
		{{ L_LINK_REMOTE_AVATAR }}{{ L_COLON }}
	</label>
	<p class="iz-hint">{{ L_LINK_REMOTE_AVATAR_EXPLAIN }}</p>

	<input
		type="url"
		name="avatar_remote_url"
		id="avatar_remote_url"
		value="{{ AVATAR_REMOTE_URL }}"
		class="iz-input"
		placeholder="{{ U_INDEX }}"
		data-reset-on-edit="#avatar_remote_width, #avatar_remote_height"
		inputmode="url"
	>
</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_remote_width">
				{{ L_WIDTH_SIZE }}
			</label>
			<div class="iz-inputgroup">
				<span class="iz-inputgroup__addon">{{ L_WIDTH_SIZE }}</span>
				<input
					type="number"
					name="avatar_remote_width"
					id="avatar_remote_width"
					value="{{ AVATAR_REMOTE_WIDTH }}"
					class="iz-input"
					placeholder="{{ L_WIDTH_PLACEHOLDER }}"
					min="{{ AVATAR_MIN_WIDTH }}"
					max="{{ AVATAR_MAX_WIDTH }}"
					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_remote_height">
				{{ L_HEIGHT_SIZE }}
			</label>
			<div class="iz-inputgroup">
				<span class="iz-inputgroup__addon">{{ L_HEIGHT_SIZE }}</span>
				<input
					type="number"
					name="avatar_remote_height"
					id="avatar_remote_height"
					value="{{ AVATAR_REMOTE_HEIGHT }}"
					class="iz-input"
					placeholder="{{ L_HEIGTH_PLACEHOLDER }}"
					min="{{ AVATAR_MIN_HEIGHT }}"
					max="{{ AVATAR_MAX_HEIGHT }}"
					inputmode="numeric"
				>
				<span class="iz-inputgroup__addon">{{ L_PIXEL_SIZE }}</span>
			</div>
		</div>
	</div>
</div>
