{% with picker_id=column_show_hide_id|default:'column-show-hide-ui' %}
  <div id="{{ picker_id }}-parent" class="column-picker">
    <button class="column-picker-toggle collapsed" type="button"
            data-bs-toggle="collapse" data-bs-target="#{{ picker_id }}-accordion"
            aria-controls="{{ picker_id }}-accordion" aria-expanded="false">
      <span class="column-picker-heading">
        <i class="fas fa-columns" aria-hidden="true"></i>
        <span>
          <span class="column-picker-title">Show or hide columns</span>
          <span class="column-picker-summary">Choose the details shown in this table</span>
        </span>
      </span>
      <i class="fas fa-chevron-down column-picker-chevron" aria-hidden="true"></i>
    </button>
    <div id="{{ picker_id }}-accordion" class="collapse"
         data-bs-parent="#{{ picker_id }}-parent">
      <div class="column-picker-body">
        <p class="column-picker-help">Your choices are saved for this table on this device.</p>
        <div id="{{ picker_id }}" class="column-picker-options"
             role="group" aria-label="Visible table columns">
          {% comment %}Filled by table-columns.js{% endcomment %}
        </div>
      </div>
    </div>
  </div>
{% endwith %}