{% props label: String, value: i64 = -1, max: i64 = 100, id: String = "", hide_label: bool = false %}
{#- A negative `value` is indeterminate. The label and percentage are printed beside the bar unless `hide_label` (then the label is its aria-label). -#}
{%- let id = if id.is_empty() { format!("progress-{}", label.to_lowercase().replace(|c: char| !c.is_alphanumeric(), "-")) } else { id } %}
{%- if hide_label %}
<progress class="ui-progress"{% if value >= 0 %} value="{{ value }}"{% end %} max="{{ max }}" aria-label="{{ label }}"></progress>
{%- else %}
<div class="ui-field">
<div style="display:flex;justify-content:space-between"><span class="ui-label" id="{{ id }}">{{ label }}</span>{% if value >= 0 %}<span class="ui-muted">{{ value * 100 / max.max(1) }}%</span>{% end %}</div>
<progress class="ui-progress"{% if value >= 0 %} value="{{ value }}"{% end %} max="{{ max }}" aria-labelledby="{{ id }}"></progress>
</div>
{%- end %}