<style>
	.switch {
		display: inline-block;
		height: 34px;
		position: relative;
		width: 60px;
		margin: 0 20px;
	}
	.switch.disabled {
		opacity: 0.5;
	}
	.switch input {
		display: none;
	}
	.shield_slider {
		background-color: #ccc;
		bottom: 0;
		cursor: pointer;
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
		transition: .4s;
	}
	.shield_slider:before {
		background-color: #fff;
		bottom: 4px;
		content: "";
		height: 26px;
		left: 4px;
		position: absolute;
		transition: .4s;
		width: 26px;
	}
	input:checked + .shield_slider {
		background-color: #66bb6a;
	}
	input:checked + .shield_slider:before {
		transform: translateX(26px);
	}
	.shield_slider.round {
		border-radius: 34px;
	}
	.shield_slider.round:before {
		border-radius: 50%;
	}
</style>
<tr>
	<th>
		<label for="shield_enable_mfaemail" class="form-label"
			   {% if flags.is_enforced %}style="pointer-events: none;"{% endif %}
		>{{ strings.label_email_authentication }}</label>
	</th>
	<td>
		<label class="switch form-label {% if flags.is_enforced %}disabled{% endif %}"
			   for="shield_enable_mfaemail">

			<input type="checkbox" name="shield_enable_mfaemail" id="shield_enable_mfaemail" value="Y"
				   {% if flags.is_profile_active %}checked="checked"{% endif %}
					{% if flags.is_enforced %}
						style="opacity:0.5;pointer-events: none;"
						disabled="disabled"
					{% endif %}
			/>

			<span class="shield_slider round"></span>
		</label>

		{% if flags.show_explanatory_text %}
			<p class="description">{{ strings.description_email_authentication_checkbox }}</p>
			{% if flags.is_enforced %}
				<p class="description">{{ strings.is_enforced }}</p>
			{% endif %}
		{% endif %}
	</td>
</tr>