{% macro picker(name, current_id, options, none_label='— none —') %}
<div class="area-picker" data-initial-id="{{ current_id or '' }}" data-none-label="{{ none_label }}">
  <input type="hidden" name="{{ name }}">
  <button type="button" class="area-picker-trigger">
    <span class="area-picker-label">{{ none_label }}</span>
    <span class="area-picker-arrow">▾</span>
  </button>
  <div class="area-picker-popover" hidden>
    <input type="search" class="area-picker-search" placeholder="Search..." autocomplete="off">
    <ul class="area-picker-list">
      <li data-value="">{{ none_label }}</li>
      {% for opt_id, opt_label in options %}
      <li data-value="{{ opt_id }}">{{ opt_label }}</li>
      {% endfor %}
    </ul>
  </div>
</div>
{% endmacro %}

{% macro area_drilldown_picker(name, current_id, tree_data, allow_none=false, none_label='— None —', placeholder='— Select area —', required=false) %}
<div class="area-drilldown-picker"
     data-initial-id="{{ current_id or '' }}"
     data-allow-none="{{ '1' if allow_none else '0' }}"
     data-none-label="{{ none_label }}"
     data-placeholder="{{ placeholder }}"
     data-tree='{{ tree_data | tojson }}'>
  <input type="hidden" name="{{ name }}" value="{{ current_id or '' }}"{% if required %} required{% endif %}>
  <button type="button" class="area-drilldown-trigger">
    <span class="area-drilldown-label">{{ placeholder }}</span>
    <span class="area-drilldown-arrow">▾</span>
  </button>
  <div class="area-drilldown-popover" hidden>
    <input type="search" class="area-drilldown-search" placeholder="Search areas..." autocomplete="off">
    <div class="area-drilldown-crumbs"></div>
    <ul class="area-drilldown-list"></ul>
  </div>
</div>
{% endmacro %}