{% extends '/components/merlin/steps/base.twig' %}

{% block slide_body_video_section_blurb %}
	<p>Shield uses a default security profile when first activated, which applies basic security
	   measures so that your site is protected from some common attacks.</p>
	<p>We recommend you apply as many security restrictions as your site allows. Production sites that already
	   have integrations with 3rd party services in-place, this may cause some issues and we recommend
	   you test these integrations and review the Activity Logs for any issues.</p>
	<p>Please review the 3 pre-made security profiles below, or customise the settings manually.</p>
{% endblock %}

{% block slide_body_video_section %}
	{% import '/common/macros.twig' as icwp_macros %}

	<form class="form-horizontal merlin-form ajax-form">
		{{ icwp_macros.formInput_Hidden( 'step_slug', vars.step_slug ) }}
		{{ icwp_macros.formInput_Hidden( 'security_profile', '', 'SelectedSecurityProfile' ) }}

		<div class="profile-cards-row" id="ProfileCards">
			{% for level_key, level in vars.profile_levels %}
				<div class="profile-card {% if level_key == 'current' %}profile-card-current{% endif %}" data-level="{{ level_key }}">
					<div class="profile-card-accent level-{{ level_key }}"></div>
					<div class="profile-card-header">
						<h5>{{ level.title }}</h5>
						<small>{{ level.subtitle }}</small>
					</div>
					<div class="profile-card-body">
						<div class="feature-list">
							{% for section_key, section in vars.profile_structure %}
								<div class="section-header">{{ section.title }}</div>
								{% for item_key, item in section.opts %}
									{% set item_value = level.structure[section_key]['opts'][item_key].value|default(null) %}
									<div class="feature-item">
										{% if item_value is same as(true) or item_value is same as('Y') %}
											<i class="bi bi-check-circle-fill fi-on"></i>
										{% elseif item_value is same as(false) or item_value is same as('N') %}
											<i class="bi bi-x-circle fi-off"></i>
										{% elseif item_value is not none %}
											<i class="bi bi-sliders fi-val"></i>
										{% else %}
											<i class="bi bi-dash fi-off"></i>
										{% endif %}
										<span class="fi-label {% if not item.is_available %}text-secondary text-opacity-50{% endif %}">
											{{ item.title }}
										</span>
										{% if item_value is not same as(true) and item_value is not same as(false)
										   and item_value is not same as('Y') and item_value is not same as('N')
										   and item_value is not none %}
											<span class="fi-value">{{ item_value }}</span>
										{% endif %}
									</div>
								{% endfor %}
							{% endfor %}
						</div>
						{% if level_key != 'current' %}
						<div class="selected-badge">
							<i class="bi bi-check-circle-fill"></i> Selected
						</div>
						{% endif %}
					</div>
				</div>
			{% endfor %}
		</div>

		<div class="merlin-form-footer">
			<button type="submit" class="btn btn-primary">Apply Selected Profile</button>
		</div>
	</form>
{% endblock %}