{% extends '/wpadmin/plugin_pages/base_inner_page.twig' %}

{% block inner_page_body %}
	<style>
		#ButtonBuyNow {
			margin: 20px;
		}
		.card {
			margin-bottom: 20px;
		}
		.license-summary .card-body {
			padding: 0;
		}
	</style>

	<div class="row">
		<div class="col-lg-5 license-summary">

			{% if not flags.is_premium %}
				<div class="row">
					<div class="col">
						<p>{{ strings.pro_available_blurb }}</p>
						<ol>
							<li>{{ strings.license_step_purchase_prefix }}
								<a href="https://clk.shldscrty.com/buyshieldpro" target="_blank">{{ strings.license_step_purchase_link }}</a>.
							</li>
							<li>{{ strings.license_step_register }}</li>
							<li>{{ strings.license_step_activate }}</li>
						</ol>

						<p class="text-center">
							<a href="https://clk.shldscrty.com/buyshieldpro" target="_blank" id="ButtonBuyNow"
							   class="btn btn-large btn-outline-success">
								{{ strings.cta_upgrade }}</a>
						</p>
					</div>
				</div>
			{% endif %}

			<h6 class="mb-2">{{ strings.title_license_summary }}</h6>
			<table class="table table-hover table-sm mb-0">
				<tbody>
					{% for license_key, license_val in vars.license_table %}
						{% if license_val is not empty %}
							<tr>
								<th scope="row">{{ attribute(strings, license_key) }}:</th>
								<td class="">{{ license_val|raw }}</td>
							</tr>
						{% endif %}
					{% endfor %}
				</tbody>
			</table>

			<div class="row mt-4">
				<div class="col">
					<h6 class="mb-2">{{ strings.title_license_activation }}</h6>
					<ol>
						<li>
							<a target="_blank" href="{{ hrefs.keyless_cp }}">{{ strings.activate_site_in }}</a>
						</li>
						<li>{{ strings.url_to_activate }}:
							<code class="fw-bold">{{ vars.activation_url }}</code></li>
						<li>{{ strings.license_check_limit }}.
							<br />({{ strings.more_frequent }})
						</li>
					</ol>

					<p class="text-center">
						<a href="#"
						   id="LicenseLookup"
						   class="btn btn-success m-2 license-action"
						   data-action="lookup"
						   {% if not flags.button_enabled_check %}disabled="disabled"{% endif %} >
							{{ strings.check_license }}
						</a>
					</p>

				</div>
			</div>

			<div class="row">
				<div class="col text-start">
					<p class="">
						{% if flags.is_pro %}
							<a href="#"
							   class="btn py-0 px-2 btn-outline-warning text-dark license-action"
							   data-action="clear"
							   {% if not flags.button_enabled_check %}disabled="disabled"{% endif %} >
								&#10008; {{ strings.clear_license }}
							</a>
						{% else %}
							<a href="https://clk.shldscrty.com/buyshieldpro" target="_blank" class="card-link"
							   class="">{{ strings.go_pro }}</a>
						{% endif %}
						<a href="#"
						   title="{{ strings.incase_debug }}"
						   data-action="debug"
						   class="btn btn-link btn-sm p-0 license-action float-end">{{ strings.debug }}</a>
					</p>
				</div>

			</div>

		</div>

		<div class="col-lg-7">
		  <div class="card gopro-card">

			  <div class="card-body">

				  <div class="d-grid mb-3">
					  <a href="https://clk.shldscrty.com/gp"
						 target="_blank"
						 class="btn {{ flags.is_pro ? 'btn-outline-success' : 'btn-success' }}">
						  {{ strings.cta_view_features }}</a>
				  </div>

				  <div class="accordion" id="AccordionProFeatures">
					  {% for feature_key,feature in strings.pro_features %}
						  <div class="accordion-item">
							  <h2 class="accordion-header" id="featureHeading{{ feature_key }}">
								  <button class="accordion-button {{ feature_key == 0 ? '' : 'collapsed' }}"
										  type="button"
										  data-bs-toggle="collapse"
										  data-bs-target="#collapse{{ feature_key }}"
										  aria-expanded="false" aria-controls="collapse{{ feature_key }}">
									  <span class="svg-container me-2 text-success">{{ imgs.svgs.thumbs_up|raw }}</span>
									  {{ feature.title|raw }}
								  </button>
							  </h2>

							  <div id="collapse{{ feature_key }}"
								   class="accordion-collapse collapse {{ feature_key == 0 ? 'show' : '' }}"
								   data-bs-parent="#AccordionProFeatures"
								   aria-labelledby="featureHeading{{ feature_key }}">
								  <div class="accordion-body">
									  {% for line in feature.lines %}
										  {{ line|raw }}
									  {% endfor %}
									  {% if feature.href|default('') is not empty %}
										  <br /><a href="{{ feature.href }}" target="_blank"
												   class="btn btn-outline-dark btn-sm mt-2">{{ strings.more_info_label }}</a>
									  {% endif %}
								  </div>
							  </div>

						  </div>
					  {% endfor %}
				  </div>
			  </div>
			</div>
		</div>
	</div>
	<hr />
{% endblock %}
