<button type="button" class="js-infocapture-summary-trigger btn btn-secondary ml-2">
	<img src="/assets/icons/ai.svg" width="18"/>
	{{ lmsg('helpdesk.ai.summary.summarize') }}
</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="20"/>
			<h2 class="h6 mb-0 font-weight-normal">
				{{ lmsg('helpdesk.ai.summary.title') }}
			</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-2 px-3 pt-3" data-empty="{{ lmsg('helpdesk.ai.summary.empty') }}">
	</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 ml-2">
			{{ lmsg('helpdesk.ai.summary.footer') }}
		</p>
	</div>
</section>


<script type="text/javascript">

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