{% macro icon(name) %}<svg class="icon" aria-hidden="true" focusable="false"><use href="#i-{{ name }}"/></svg>{% endmacro %}

{% macro badges(counts) %}
<ul class="badges" aria-label="Counts">
  <li class="badge badge-have">{{ counts.have|number }} have</li>
  <li class="badge badge-inbox">{{ counts.inbox|number }} in inbox</li>
  <li class="badge badge-missing">{{ counts.missing|number }} missing</li>
  <li class="badge badge-unmatched">{{ counts.unmatched|number }} unmatched</li>
</ul>
{% endmacro %}

{% macro meter(platform) %}
{% if platform.wanted %}
<div class="meter">
  <progress max="{{ platform.wanted }}" value="{{ platform.counts.have }}" aria-label="{{ platform.name }}: games in the library">{{ platform.percent }}%</progress>
  <p class="meter-text"><strong>{{ platform.percent }}%</strong> <span class="muted">{{ platform.counts.have|number }} of {{ platform.wanted|number }} games</span></p>
</div>
{% else %}
<p class="muted">No games are wanted for this platform.</p>
{% endif %}
{% endmacro %}

{% macro scan_button() %}
<form method="post" action="/scan">
  <button class="button button-primary" type="submit"{% if job %} disabled{% endif %}>{{ icon("scan") }}Scan</button>
</form>
{% endmacro %}