{% extends '/wpadmin_pages/insights/base.twig' %}

{% block page_main %}

	<div class="row">
		<div class="col insights-sub-nav insights_section">
			<ul class="nav nav-tabs">

				<li class="nav-item">
					<a class="nav-link active" data-toggle="tab" role="tab" href="#tabUpdates">
						{{ strings.tab_updates }}
					</a>
				</li>

				{% if not flags.is_pro %}
					<li class="nav-item">
						<a class="nav-link" data-toggle="tab" role="tab" href="#tabFreeTrial">
							{{ strings.tab_freetrial }}
						</a>
					</li>
				{% endif %}

				<li class="nav-item">
					<a class="nav-link announcekit-widget"></a>
				</li>
			</ul>
		</div>
	</div>

	<div class="tab-content">

		<div class="tab-pane show active" id="tabUpdates" role="tabpanel" aria-labelledby="tabUpdates">
			<div class="row">
				<div class="col pt-3" id="TabUpdates">
					{{ content.tab_updates|raw }}
				</div>
			</div>
		</div>

		<div class="tab-pane" id="tabFreeTrial" role="tabpanel" aria-labelledby="tabFreeTrial">
			<div class="row">
				<div class="col pt-3" id="TabUpdates">
					{{ content.tab_freetrial|raw }}
				</div>
			</div>
		</div>
	</div>

	<div class="row">
		{% if flags.show_guided_tour %}
			<a style="display: none;" class="btn btn-default"
			   id="IntroVideo"
			   href="https://player.vimeo.com/video/326357543"
			   data-featherlight="iframe" data-featherlight-iframe-allowfullscreen="true"
			   data-featherlight-iframe-width="1200"
			   data-featherlight-iframe-height="675">&nbsp;</a>
		{% endif %}
	</div>
{% endblock %}

{% block inline_scripts %}

	<script type="text/javascript">
	  window.announcekit = (window.announcekit || {
		  queue: [], on: function ( n, x ) {
			  window.announcekit.queue.push( [ n, x ] );
		  }, push: function ( x ) {
			  window.announcekit.queue.push( x );
		  }
	  });
	  window.announcekit.push( {
		  "widget": "https://announcekit.app/widget/{{ vars.changelog_id }}",
		  "selector": ".announcekit-widget",
		  "version": 2
	  } )
	</script>

	<script>
		jQuery( document ).ready( function () {

			{% if flags.tours.insights_overview %}
			var bIsExited = false;
			introJs().setOptions( {
				tooltipClass: "shield_tour_tooltip",
				steps: [
					{
						intro: "We'd like to show you around! Click Next to continue, or Skip."
					},
					{
						element: '#NavItem-settings > a',
						intro: "Your jumping-off point to configure settings for every security feature.",
						position: 'bottom'
					},
					{
						element: '#NavItem-scans > a',
						intro: 'Run site scans on-demand and take action on your results.',
						position: 'bottom'
					},
					{
						element: '#NavItem-ips > a',
						intro: 'View and manage your IP Black and White lists.',
						position: 'bottom'
					},
					{
						element: '#NavItem-audit > a',
						intro: 'Review events that Shield has captured, monitored, or blocked.',
						position: 'bottom'
					},
					{
						element: '#NavItem-OptionSearch',
						intro: 'Search entire plugin to jump to a setting that you want quickly.',
						position: 'bottom'
					},
					{
						element: "#SectionStats",
						intro: "Overview stats for the past 7 days.",
						position: 'bottom'
					},
					{
						element: "#SectionNotices",
						intro: "Highlighted action items to improve site security.",
						position: 'top'
					},
					{
						element: "#SectionRecentEvents",
						intro: 'Shows you the most recent occurrence for certain significant events.',
						position: 'top'
					}
				],
			} )
					 .onexit( function () {
						 if ( !bIsExited ) {
							 iCWP_WPSF_MarkTourFinished.finishedTour( 'insights_overview' );
							 bIsExited = true;
						 }
					 } )
					 .start();
			{% endif %}
		} );
	</script>

	<script type="text/javascript">
		{% if flags.show_guided_tour %}
		window.onload = function () {
			jQuery( '#IntroVideo' ).click();
		};
		{% endif %}
	</script>
{% endblock %}