{namespace v=FluidTYPO3\Vhs\ViewHelpers}
{namespace n=GeorgRinger\News\ViewHelpers}

{v:variable.typoscript(path: 'plugin.ncn_template.settings') -> v:variable.set(name: 'settings')}
{f:cObject(typoscriptObjectPath: 'plugin.tx_ncnfaq_faqs.settings.sitetitle') -> v:variable.set(name: 'sitetitle')}

<v:page.header.title title="{faq.question} - {sitetitle}" />
<v:page.header.meta property="og:title" content="{faq.question} - {sitetitle}" />
<v:page.header.meta name="description" content="{faq.answer -> f:format.stripTags() -> f:format.crop(maxCharacters: 155)}" />
<f:variable name="relatedQuestionsJS"><f:for each="{faq.related}" as="related" iteration="i">
	{
		"@type": "Question",
		"name": "<f:format.raw>{related.question}</f:format.raw>",
		"acceptedAnswer": {
		  "@type": "Answer",
		  "text": "<f:format.raw>{faq.answer -> f:format.raw()}</f:format.raw>"
		}
	}<f:if condition="!{i.isLast}">,</f:if>
</f:for></f:variable>
<n:headerData>
	<script type="application/ld+json">
		{
		  "@context": "https://schema.org",
		  "@type": "FAQPage",
		  "mainEntity": [{
			"@type": "Question",
			"name": "<f:format.raw>{faq.question}</f:format.raw>",
			"acceptedAnswer": {
			  "@type": "Answer",
			  "text": "<f:format.raw>{faq.answer -> f:format.raw()}</f:format.raw>"
			}
		  }, {relatedQuestionsJS}]
		}
	</script>
</n:headerData>

<section class="first-header bg-dark text-light">
	<div class="container">
		<div class="row">
			<div class="py-5 col-lg-6 ">
				<p class="h2 text-left" style="display: block;"><small>{faq.categories.0.name}</small></p>
				<hr class="landing-separator border-primary mr-auto my-2">
				<h1 style="text-transform: none;" class="text-left">{faq.question}</h1>
			</div>

		</div>
	</div>
</section>
<section class="white container py-5">
	<div class="row">
		<div class="col-lg-6">
			<f:format.html>{faq.answer}</f:format.html>
			<f:if condition="{faq.images}">
				<div class="mt-5">
					<a href="{f:uri.image(src:faq.images.uid, treatIdAsReference:1, width:1280px)}" class="lightbox">
						<f:image src="{faq.images.originalResource.publicUrl}" class="img-fluid img-thumbnail" width="820"/><br /><br />
					</a>
				</div>
				
			</f:if>
		</div>
		<div class="col-lg-4 ml-auto faq-sidebar">
			<div class="faq-sidebar-inner bg-white p-4">
				<h4 class="text-left mb-lg-5"><i class="fal fa-list mr-2"></i> {f:translate(key: 'relatedTopics')}:</h4>
				<div class="block-1 small-gutters">
					<f:for each="{faq.related}" as="relatedItem" iteration="relatedIterator">
						<div class="d-block">
							<f:link.action action="show" class="question-wrap" controller="Faq" class="faq-card card btn-light bg-light d-block"  arguments="{faq : relatedItem}">
								
								<div class="card-body">
									<b class="h5 d-block mb-0">{relatedItem.question}</b>
									
									
								</div>
				
							</f:link.action>
						</div>
					</f:for>
				</div>
				<p class="text-center mt-5"><f:link.page pageUid="10245" class="btn btn-outline-secondary"><i class="fal  fa-chevron-left mr-2 "></i> {f:translate(key: 'backToList')}</f:link.page></p>
			</div>
			
		</div>
	</div>
</section>

<style>
	@media (min-width: 992px) {
		.faq-sidebar {
			margin-top: -160px;
		}
	}
	.faq-card {
		border-color: #f1f1f1;
		border-left: 3px solid #f1f1f1;
	}
	.faq-card:visited {
		border-left-color: var(--grey);
	}
</style>