{% load i18n %}
<div class="nsm-ag-chrome-bar">
  <div class="nsm-ag-chrome-bar-row d-flex align-items-start gap-2">
    {% if rules_show_add_rule %}
    <div class="nsm-ag-toolbar-actions nsm-ag-toolbar-actions-start d-flex flex-nowrap align-items-center gap-2 flex-shrink-0">
      <a id="nsm-ag-add-rule"
         href="{{ nsm_rule_add_url|default:'' }}"
         class="btn btn-sm btn-primary text-nowrap{% if not nsm_rule_add_url %} disabled{% endif %}"
         {% if not nsm_rule_add_url %}aria-disabled="true" tabindex="-1"{% endif %}>
        <span class="mdi mdi-plus-thick" aria-hidden="true"></span> {% trans "Add Rule" %}
      </a>
    </div>
    {% endif %}
    <div class="nsm-ag-toolbar-actions nsm-ag-toolbar-actions-end d-flex flex-nowrap align-items-center gap-2 flex-shrink-0 ms-auto">
      <div class="form-check form-switch nsm-rules-col-mode-switch flex-shrink-0 mb-0"
           title="{% trans 'Group object types into one column per field' %}">
        <input type="checkbox"
               class="form-check-input"
               id="nsm-rules-col-mode-toggle"
               role="switch"
               {% if rules_column_mode == 'collapsed' %}checked{% endif %}
               aria-checked="{% if rules_column_mode == 'collapsed' %}true{% else %}false{% endif %}"
               aria-label="{% trans 'Group object types into one column per field' %}">
        <label class="form-check-label text-nowrap" for="nsm-rules-col-mode-toggle">
          {% trans "Grouped columns" %}
        </label>
      </div>
      <div id="nsm-rules-cell-mode-selector"
           class="btn-group btn-group-sm nsm-rules-cell-mode-selector flex-shrink-0"
           role="group"
           aria-label="{% trans 'Object cell display' %}">
        <button type="button"
                class="btn btn-outline-secondary nsm-rules-cell-mode-btn{% if rules_cell_mode == 'inline' %} active{% endif %}"
                data-cell-mode="inline"
                aria-pressed="{% if rules_cell_mode == 'inline' %}true{% else %}false{% endif %}"
                title="{% trans 'Comma-separated text' %}">
          <span class="mdi mdi-format-text-wrapping-wrap" aria-hidden="true"></span>
          <span class="nsm-rules-cell-mode-btn-label">{% trans "Comma" %}</span>
        </button>
        <button type="button"
                class="btn btn-outline-secondary nsm-rules-cell-mode-btn{% if rules_cell_mode == 'stack' or not rules_cell_mode %} active{% endif %}"
                data-cell-mode="stack"
                aria-pressed="{% if rules_cell_mode == 'stack' or not rules_cell_mode %}true{% else %}false{% endif %}"
                title="{% trans 'One object per line' %}">
          <span class="mdi mdi-format-line-spacing" aria-hidden="true"></span>
          <span class="nsm-rules-cell-mode-btn-label">{% trans "Lines" %}</span>
        </button>
        <button type="button"
                class="btn btn-outline-secondary nsm-rules-cell-mode-btn{% if rules_cell_mode == 'pill_more' %} active{% endif %}"
                data-cell-mode="pill_more"
                aria-pressed="{% if rules_cell_mode == 'pill_more' %}true{% else %}false{% endif %}"
                title="{% trans 'First object visible, rest as +N pill (click to expand cell)' %}">
          <span class="nsm-rules-cell-mode-pill-more-short" aria-hidden="true">
            <span class="nsm-rule-pill nsm-rule-pill--counter nsm-rules-cell-mode-counter-demo">+N</span>
          </span>
          <span class="nsm-rules-cell-mode-pill-more-long" aria-hidden="true">
            <span class="nsm-rule-pill nsm-rule-pill--counter nsm-rules-cell-mode-counter-demo">+N</span>
            <span class="nsm-rules-cell-mode-pill-more-long-label">{% trans "More" %}</span>
          </span>
        </button>
      </div>
      <button type="button"
              id="nsm-ag-csv-export"
              class="btn btn-sm btn-outline-secondary text-nowrap"
              title="{% trans 'Export visible data as CSV' %}">
        <span class="mdi mdi-download" aria-hidden="true"></span>
        {% trans "Export CSV" %}
      </button>
    </div>
  </div>
</div>