{% macro checkgroup(name, options, selected) %}
<div class="chips">
  {% for value, label in options.items() %}
  <label class="chip">
    <input type="checkbox" name="{{ name }}" value="{{ value }}" {% if value in selected %}checked{% endif %}>
    <span>{{ label }}</span>
  </label>
  {% endfor %}
</div>
{% endmacro %}

{% macro error_list(errors) %}
{% if errors %}
<div class="alert error" role="alert">
  <strong>Please fix the following:</strong>
  <ul>{% for e in errors %}<li>{{ e }}</li>{% endfor %}</ul>
</div>
{% endif %}
{% endmacro %}

{% macro area_select(name, selected) %}
<select name="{{ name }}" id="{{ name }}" required>
  <option value="">Choose an area…</option>
  {% for county, areas in AREAS_BY_COUNTY.items() %}
  <optgroup label="{{ county }}">
    {% for a in areas %}<option value="{{ a }}" {% if a == selected %}selected{% endif %}>{{ a }}</option>{% endfor %}
  </optgroup>
  {% endfor %}
</select>
{% endmacro %}

{% macro badges(n) %}
<ul class="badges">
  {% if n.id_verified %}<li class="badge ok">ID verified</li>{% endif %}
  {% if n.police_clearance %}<li class="badge ok">Police clearance</li>{% endif %}
  {% if n.references_checked %}<li class="badge ok">References checked</li>{% endif %}
  {% if not (n.id_verified or n.police_clearance or n.references_checked) %}<li class="badge">Vetting in progress</li>{% endif %}
</ul>
{% endmacro %}

{% macro bar_chart(title, description, items) %}
{% set maximum = items|map(attribute='value')|max %}
<section class="card chart-card" aria-label="{{ title }}">
  <div class="card-header">
    <div>
      <h2>{{ title }}</h2>
      <p>{{ description }}</p>
    </div>
  </div>
  <ul class="bar-chart">
    {% for item in items %}
    <li class="bar-chart-row">
      <span class="bar-chart-label">{{ item.label }}</span>
      <progress max="{{ maximum if maximum else 1 }}" value="{{ item.value }}"
                aria-label="{{ item.label }}: {{ item.value }}"></progress>
      <strong>{{ item.value }}</strong>
    </li>
    {% endfor %}
  </ul>
</section>
{% endmacro %}