<tr>
	<th>
		<label for="{{ vars.otp_field_name }}" class="form-label">{{ strings.title }}</label>
	</th>
	<td>
		{% if flags.is_profile_active %}
			{% if flags.show_explanatory_text %}
				<p>{{ strings.registered_yubi_ids }}</p>
			{% endif %}

			<ul style=" list-style: circle inside; ">
				{% for reg in vars.yubikeys %}
					<li style="margin: 10px 0 0;">
						<code>{{ reg.label }} ({{ reg.id }})</code>
						<a href="#"
						   class="shield_remove_yubi"
						   style="text-decoration: none;"
						   title="Remove"
						   data-yubikeyid="{{ reg.id }}">&#10006;</a>
						<ul style="list-style: none; margin-left: 20px; margin-top: 0;">
							<li style="margin: 0;">{{ reg.used_at }}</li>
							<li>{{ reg.reg_at }}</li>
						</ul>
					</li>
				{% endfor %}
			</ul>
		{% else %}
			{% if flags.show_explanatory_text %}
				<p>{{ strings.no_active_yubi_ids }}</p>
			{% endif %}
		{% endif %}

		{% if flags.show_explanatory_text %}
			<p style="margin-bottom: 5px">{{ strings.enter_otp }}</p>
		{% endif %}
		<input class="regular-text shield_yubi_otp"
			   type="text"
			   id="{{ vars.otp_field_name }}"
			   name="{{ vars.otp_field_name }}"
			   placeholder="{{ strings.placeholder_enter_otp }}"
			   value="" autocomplete="off" />
		{% if flags.show_explanatory_text %}
			{% if flags.is_profile_active %}
				<p class="description">{{ strings.to_remove_device }}</p>
			{% endif %}
			<p class="description">{{ strings.multiple_for_pro }}</p>
		{% endif %}
	</td>
</tr>