<div class="sb-customizer-preview" :data-preview-device="customizerScreens.previewScreen">
	<?php
	$feed_id = !empty($_GET['feed_id']) ? (int)$_GET['feed_id'] : 0;
	?>
	<div class="sb-preview-ctn sb-tr-2">
		<div class="sb-preview-top-chooser sbi-fb-fs">
			<strong :class="getModerationShoppableMode == true ? 'sbi-moderate-heading' :''"
					v-html="getModerationShoppableMode == false ? genericText.preview : ( svgIcons['eyePreview'] + '' + (customizerScreens.activeSection === 'settings_shoppable_feed' ? genericText.shoppableModePreview : genericText.moderationModePreview) )"></strong>
			<div class="sb-preview-chooser" role="group" aria-label="Preview device" v-if="getModerationShoppableMode == false">
				<button class="sb-preview-chooser-btn" v-for="device in previewScreens" v-bind:class="'sb-' + device"
						v-html="svgIcons[device]" @click.prevent.default="switchCustomizerPreviewDevice(device)"
						:aria-label="device"
						:aria-pressed="customizerScreens.previewScreen == device ? 'true' : 'false'"
						:data-active="customizerScreens.previewScreen == device"></button>
			</div>
			<div class="sb-moderationmoder-filter"
				 role="radiogroup"
				 :aria-label="genericText.moderationMode"
				 v-if="getModerationShoppableMode == true && customizerScreens.activeSection == 'settings_filters_moderation'">
				<div class="sb-moderationmoder-filter-btn"
					 role="radio"
					 :tabindex="moderationShoppableShowSelected == 0 ? 0 : -1"
					 :aria-checked="moderationShoppableShowSelected == 0 ? 'true' : 'false'"
					 :aria-label="genericText.showAll"
					 :data-active="moderationShoppableShowSelected == 0 ? 'true' : 'false'"
					 @click.prevent.default="moderationModeShowSelected(0)"
					 @keydown.enter.prevent.default="moderationModeShowSelected(0)"
					 @keydown.space.prevent.default="moderationModeShowSelected(0)">{{genericText.showAll}}
				</div>
				<div class="sb-moderationmoder-filter-btn"
					 role="radio"
					 :tabindex="moderationShoppableShowSelected == 1 ? 0 : -1"
					 :aria-checked="moderationShoppableShowSelected == 1 ? 'true' : 'false'"
					 :aria-label="genericText.showSelected"
					 :data-active="moderationShoppableShowSelected == 1 ? 'true' : 'false'"
					 @click.prevent.default="moderationModeShowSelected(1)"
					 @keydown.enter.prevent.default="moderationModeShowSelected(1)"
					 @keydown.space.prevent.default="moderationModeShowSelected(1)">{{genericText.showSelected}}
				</div>
			</div>
		</div>

		<?php
		// A11Y: in normal preview mode this container is a decorative duplicate of the feed,
		// so it stays aria-hidden to keep screen readers from announcing the feed twice. In
		// moderation / shoppable mode it becomes a genuine interactive surface (moderation
		// pills, shoppable Add/Update buttons), so aria-hidden must come OFF — aria-hidden
		// over operable content is a WCAG 4.1.2 failure. Vue 2.6 drops an attribute bound to
		// null, so the ternary emits no attribute at all in moderation/shoppable mode.
		//
		// `inert` is deliberately NOT used here: it is inherited and cannot be undone on a
		// descendant, and it removes the whole subtree from hit testing — which is what broke
		// every mouse interaction in the preview (SMASH-1914). Tab order inside the preview is
		// handled instead by customizer-gated tabindex="-1" on the decorative focusables.
		?>
		<div
			class="sbi-preview-ctn sbi-fb-fs"
			:aria-hidden="getModerationShoppableMode ? null : 'true'"
			:class="(customizerFeedData.settings.feedtheme ? 'sbi-theme sbi-' + customizerFeedData.settings.feedtheme : 'sbi-theme sbi-default_theme')"
			:data-boxshadow="valueIsEnabled(customizerFeedData.settings.boxshadow) && customizerFeedData.settings.poststyle === 'boxed'"
			:data-post-style="customizerFeedData.settings.poststyle"
		>
			<div>
				<component :is="{template}"></component>
			</div>
			<?php
			include_once SBI_BUILDER_DIR . 'templates/preview/light-box.php';
			?>
		</div>

		<div class="sbi-moderation-pagination sbi-fb-fs" v-if="getModerationShoppableMode">
			<div class="sbi-moderation-pagination-info">
				{{(moderationShoppableModeOffset * 20) + 1}} - {{(moderationShoppableModeOffset + 1) * 20}} of
				{{(moderationShoppableModeOffsetLast + 1) * 20}}+ posts
			</div>
			<div class="sbi-moderation-pagination-btns">
				<button type="button" class="sb-btn sb-btn-grey"
					 :disabled="getModerationShoppableModeOffset && ! getModerationShoppableisLoading ? false : true"
					 aria-label="<?php esc_attr_e('First page', 'instagram-feed'); ?>"
					 @click.prevent.default="getModerationShoppableModeOffset ? moderationModePagination('first') : false">
					&#8249;&#8249;
				</button>
				<button type="button" class="sb-btn sb-btn-grey"
					 :disabled="getModerationShoppableModeOffset && ! getModerationShoppableisLoading ? false : true"
					 aria-label="<?php esc_attr_e('Previous page', 'instagram-feed'); ?>"
					 @click.prevent.default="getModerationShoppableModeOffset ? moderationModePagination('previous') : false">
					&#8249;
				</button>
				<span class="sbi-moderation-pagination-page">{{moderationShoppableModeOffset + 1}}</span>
				<button type="button" class="sb-btn sb-btn-grey"
					 :disabled="shouldPaginateNext && ! getModerationShoppableisLoading ? false : true"
					 aria-label="<?php esc_attr_e('Next page', 'instagram-feed'); ?>"
					 @click.prevent.default="shouldPaginateNext ? moderationModePagination('next') : false">&#8250;
				</button>
				<button type="button" class="sb-btn sb-btn-grey"
					 :disabled="shouldPaginateNext && ! getModerationShoppableisLoading ? false : true"
					 aria-label="<?php esc_attr_e('Last page', 'instagram-feed'); ?>"
					 @click.prevent.default="shouldPaginateNext ? moderationModePagination('last') : false">&#8250;&#8250;
				</button>
			</div>
		</div>

	</div>
	<sbi-dummy-lightbox-component :dummy-light-box-screen="dummyLightBoxScreen"
								  :customizer-feed-data="customizerFeedData"></sbi-dummy-lightbox-component>

</div>


