{% comment %}
A button, and the list it opens hanging under it.

One include wherever a list is too long to read: a filter, a set of ticks, and a footer that
says how much you have narrowed to. What a row looks like is the caller's business, passed in
as `row_template` and rendered once per entry in `rows`.

`group` names the set for the script and matches the legend groups, so a tick and a legend band
narrow the same drawing without either knowing about the other. `key` names the data attribute
that carries identity on the things being narrowed, because a site marker, a circuit line and a
cable each already had a name for their own id before this control existed.
{% endcomment %}
<div class="lens-finder" data-lens-finder="{{ group }}" data-lens-finder-key="{{ key }}"
     data-lens-finder-noun="{{ noun }}">
  <button type="button" class="btn btn-sm btn-outline-secondary lens-finder__toggle"
          data-lens-finder-toggle aria-expanded="false" aria-haspopup="true">
    <i class="mdi mdi-{{ icon }}" aria-hidden="true"></i>
    {{ label }} <span class="badge text-bg-secondary" data-lens-finder-count>{{ rows|length }}</span>
    <i class="mdi mdi-chevron-down lens-finder__caret" aria-hidden="true"></i>
  </button>

  <div class="lens-finder__panel" data-lens-finder-panel hidden>
    <label class="lens-finder__search">
      <i class="mdi mdi-magnify" aria-hidden="true"></i>
      <input type="search" data-lens-finder-search autocomplete="off" spellcheck="false"
             placeholder="Filter {{ noun }}s" aria-label="Filter {{ noun }}s">
    </label>

    <div class="lens-finder__list" data-lens-finder-list>
      {% for row in rows %}
        {% include row_template %}
      {% empty %}
        <p class="text-muted small m-2">{{ empty_text|default:'Nothing to list.' }}</p>
      {% endfor %}
      <p class="text-muted small m-2" data-lens-finder-empty hidden>Nothing matches.</p>
    </div>

    <div class="lens-finder__foot">
      <span data-lens-finder-summary>{{ rows|length }} {{ noun }}{{ rows|length|pluralize }}</span>
      <button type="button" class="btn btn-link btn-sm p-0" data-lens-finder-clear hidden>Clear</button>
    </div>
  </div>
</div>