{% load i18n django_grid_view %}
<div
  class="cm-multiselect cm-period-multiselect"
  data-cm-multiselect
  data-filter-id="{{ spec.id }}"
  data-filter-param="{{ spec.param }}"
  data-filter-scope="{{ spec.scope }}"
  {% if spec.exclusive_all %}data-exclusive-all="1"{% endif %}
  {% if spec.select_all_option %}data-select-all-option="1" data-select-all-value="{{ spec.select_all_value }}"{% endif %}
  data-all-label="{{ spec.all_label|default:spec.placeholder|default:spec.label }}"
  data-placeholder="{{ spec.placeholder|default:spec.label }}"
>
  <button type="button" class="cm-multiselect-trigger" aria-haspopup="listbox">
    <span class="cm-multiselect-trigger__label"></span>
  </button>
  <div class="cm-multiselect-panel" role="listbox">
    {% if spec.exclusive_all %}
    <label class="cm-multiselect-option">
      <input type="checkbox" value="all" data-label="{{ spec.all_label|default:all_text }}" data-period-all="1"
        {% if period_all_selected %}checked{% endif %}>
      {{ spec.all_label|default:all_text }}
    </label>
    {% endif %}
    {% if spec.select_all_option %}
    <label class="cm-multiselect-option">
      <input type="checkbox" value="{{ spec.select_all_value }}"
        data-label="{{ spec.select_all_label|default:all_text }}" data-select-all="1"
        {% if selected_values|dict_get:spec.param|comma_contains:spec.select_all_value %}checked{% endif %}>
      {{ spec.select_all_label|default:all_text }}
    </label>
    {% endif %}
    {% for opt in spec.options %}
    <label class="cm-multiselect-option">
      <input type="checkbox" value="{{ opt.value }}" data-label="{{ opt.label }}"
        {% if opt.exclusive_solo %}data-exclusive-solo="1"{% endif %}
        {% if selected_values|dict_get:spec.param|comma_contains:opt.value %}checked{% endif %}
        {% if spec.param == "period" and opt.value in selected_periods %}checked{% endif %}>
      {{ opt.label }}
    </label>
    {% endfor %}
    <div class="cm-multiselect-apply-wrap">
      <button type="button" class="cm-multiselect-apply" data-cm-multiselect-apply>{% translate "filter_bar.apply" %}</button>
    </div>
  </div>
</div>