{% props label: String, count: i64, per_view: i64 = 1, orientation: String = "", inner_block: Slot %}
{# count: how many slides the inner block holds; the dots page through them per_view at a time #}
{%- let pages = if per_view > 0 { (count + per_view - 1) / per_view } else { count } %}
<section class="ui-carousel"{% if per_view > 1 %} data-per-view="{{ per_view }}"{% end %}{% if !orientation.is_empty() %} data-orientation="{{ orientation }}"{% end %} aria-roledescription="carousel" aria-label="{{ label }}" data-ui="carousel">
<div class="ui-carousel-track" tabindex="0" data-ui-part="track">{{ inner_block }}</div>
<button class="ui-btn ui-carousel-prev" data-variant="outline" type="button" aria-label="Previous slides" data-ui-part="prev" disabled><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg></button>
<button class="ui-btn ui-carousel-next" data-variant="outline" type="button" aria-label="Next slides" data-ui-part="next"{% if pages <= 1 %} disabled{% end %}><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></button>
{%- if pages > 1 %}
<div class="ui-carousel-dots">
{%- for page in 0..pages %}
{%- let first = page * per_view + 1 %}
{%- let last = (first + per_view - 1).min(count) %}
<button class="ui-carousel-dot" type="button" aria-label="{% if first == last %}Slide {{ first }}{% else %}Slides {{ first }} to {{ last }}{% end %}"{% if page == 0 %} aria-current="true"{% end %}></button>
{%- end %}
</div>
{%- end %}
</section>