<style type="text/css">
	#shield_ga_secret {
		letter-spacing: 5px;
		font-family: monospace;
		font-size: 24px;
		text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
		border: 1px solid rgba(0, 0, 0, 0.1);
		padding: 0 7px;
		background-color: whitesmoke;
	}
</style>

{% if flags.is_profile_active %}

	{% if (flags.is_my_user_profile or flags.i_am_valid_admin) %}
		<tr>
			<th><label for="shield_turn_off_ga">{{ strings.label_check_to_remove }}</label></th>
			<td>
				<input type="checkbox" name="shield_turn_off_ga" id="shield_turn_off_ga" value="Y" />
				<p class="description">{{ strings.desc_remove }}</p>
			</td>
		</tr>
	{% endif %}

{% else %}

	{% if flags.is_my_user_profile %}
		<tr>
			<th><label for="{{ vars.otp_field_name }}">{{ strings.title }}</label></th>
			<td>
				<div style="width: 350px; margin-bottom: 15px">
					<img src="{{ hrefs.src_chart_url }}" alt="{{ strings.description_chart_url }}"
						 title="{{ strings.description_chart_url }}"
						 style="display:block;margin:0 auto 10px" />
					<div style="margin: auto;width: fit-content;text-align: center;"
						 id="shield_ga_secret">{{ vars.ga_secret }}</div>
				</div>

				<input class="regular-text"
					   type="text"
					   id="{{ vars.otp_field_name }}"
					   name="{{ vars.otp_field_name }}"
					   placeholder="{{ strings.enter_auth_app_code }}"
					   value="" autocomplete="off" />
				<p class="description">
					{{ strings.description_chart_url }}
				</p>
				<p class="description">
					{{ strings.description_ga_secret }}
				</p>
			</td>
		</tr>
	{% endif %}

{% endif %}