{% load i18n admin_workbook %}{% comment %}
	A checklist: give it ``checklist`` (a ``Setup``) and
	``title``. Each step has a title, a note, a link and whether it is done.
	Open at a desk; folded to its progress bar on a phone.
{% endcomment %}
<details class="wb-sheet wb-checklist" open data-wb-fold-narrow>
	<summary>
		<h2 class="wb-checklist-title">{{ title }}</h2>
		<span class="wb-checklist-toggle" aria-hidden="true">{% icon "chevron-down" %}</span>
		<span class="wb-checklist-score">{% if checklist.complete %}{% icon "circle-check" %} {% trans "All done" %}{% else %}{% blocktrans with done=checklist.done total=checklist.total %}{{ done }} of {{ total }} done{% endblocktrans %}{% endif %}</span>
		{% if checklist.next_step and not checklist.complete %}<span class="wb-checklist-next">{% blocktrans with step=checklist.next_step.label %}Next: {{ step }}{% endblocktrans %}</span>{% endif %}
		<span class="wb-progress" role="progressbar" aria-label="{{ title }}" aria-valuemin="0" aria-valuemax="{{ checklist.total }}" aria-valuenow="{{ checklist.done }}"><span style="--done: {{ checklist.percent }}%"></span></span>
	</summary>
	<ol class="wb-steps">
		{% for step in checklist.steps %}
			<li class="wb-step{% if step.done %} is-done{% elif step.next %} is-next{% endif %}">
				<span class="wb-step-mark" aria-hidden="true">{% if step.done %}{% icon "check" %}{% else %}{{ forloop.counter }}{% endif %}</span>
				<span class="wb-step-body">
					<span class="wb-step-title"><a href="{{ step.url }}">{{ step.label }}</a>{% if step.optional %}<span class="wb-step-optional">{% trans "optional" %}</span>{% endif %}</span>
					<span class="wb-step-note"><span class="wb-sr">{% if step.done %}{% trans "Done:" %}{% else %}{% trans "To do:" %}{% endif %} </span>{{ step.detail|default:"" }}</span>
				</span>
			</li>
		{% endfor %}
	</ol>
</details>