<component class="Claromentis\Core\Widget\JSLocalize" name="localization">

<button type="button" class="js-infocapture-summary-trigger btn btn-secondary ml-2">
	<img src="/assets/icons/ai.svg" width="18"/>
	<loc name="helpdesk:ai:summary:summarize">[Summarise]</loc>
</button>

<section id="ai-infocapture-summary" class="ai-infocapture-summary bg-white mb-3 d-none">
	<div class="border-bottom d-flex justify-content-between align-items-center pt-2 pl-3 pr-2 pb-2">
		<div class="d-flex align-items-center">
			<img class="mr-2" src="/assets/icons/ai.svg" width="18"/>
			<h2 class="h6 mb-0 font-weight-normal">
				<loc name="helpdesk:ai:summary:title">[AI Summary]</loc>
			</h2>
		</div>
	</div>

	<div class="js-ai-skeleton ai-skeleton p-2">
		{{ include('infocapture/infocapture_ai_summary_skeleton.html.twig') }}
	</div>

	<div class="js-ai-content pb-0 px-3 pt-3">
	</div>

	<div class="d-flex align-items-center px-2 pb-2 pt-0 d-none">
		<ion-icon class="text-muted" name="information-circle"></ion-icon>
		<p class="text-muted mb-0">
			<loc name="helpdesk:ai:summary:footer">[Summary may contain errors or inconsistencies]</loc>
		</p>
	</div>
</section>


<script type="text/javascript">

require(['domReady', 'ai_infocapture_summary'], function (domReady, ai) {
		domReady(function(){
			ai.initialize({{ config|json_encode|raw }});
		});
	});
</script>
