{% props image: Slot, points: Vec<(f64, f64, String, String)>, selected: i64 = 0, label: String = "Marked points" %}
{#- image: an <img> or <svg> of the subject; points: (x %, y %, title, description); selected: the chosen point's number, 0 for none. #}
<figure class="ui-hotspot-figure" data-ui="image-hotspot">
<div class="ui-hotspot-canvas">{{ image }}
{%- for (i, (x, y, title, _)) in points.iter().enumerate() %}
<button class="ui-hotspot" type="button" style="left:{{ x }}%;top:{{ y }}%" aria-pressed="{% if (i + 1) as i64 == selected %}true{% else %}false{% end %}" aria-label="{{ i + 1 }}: {{ title }}">{{ i + 1 }}</button>
{%- end %}
</div>
<figcaption><ol class="ui-hotspot-legend" aria-label="{{ label }}">
{%- for (i, (_, _, title, description)) in points.iter().enumerate() %}
<li{% if (i + 1) as i64 == selected %} data-selected{% end %}><span class="ui-hotspot">{{ i + 1 }}</span><div><strong>{{ title }}</strong><span>{{ description }}</span></div></li>
{%- end %}
</ol></figcaption>
</figure>