<style>
	#icwp_wpsf_yubi_otp {
		width: 350px
	}
</style>
<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 yubi_id in vars.yubi_ids %}
					<li>
						<code>{{ yubi_id }}</code>
						<a href="#"
						   class="shield_yubi_remove"
						   style="text-decoration: none;"
						   title="Remove"
						   data-yubikeyid="{{ yubi_id }}">&#10006;</a>
					</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"
			   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>