{% props id: String, title: String, badge: String = "Suggested", inner_block: Slot, source: Slot, actions: Slot = Slot::default() %}
{#- source: what the suggestion is based on, with links (required). #}
<section class="ui-ai-suggestion" aria-labelledby="{{ id }}-title">
<div class="ui-ai-head"><span class="ui-ai-badge"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/></svg>{{ badge }}</span><span class="ui-ai-title" id="{{ id }}-title">{{ title }}</span></div>
<div class="ui-ai-body">{{ inner_block }}</div>
<div class="ui-ai-source"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>Based on {{ source }}</div>
<div class="ui-ai-actions">{{ actions }}</div>
</section>