{% load i18n %}
<div class="nsm-ag-chrome-bar">
  <div class="nsm-ag-chrome-bar-row d-flex align-items-start gap-2">
    <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 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>
      {% if rules_show_add_rule %}
      <a id="nsm-ag-add-rule"
         href="{% if perms.netbox_nsm.add_rule %}{{ nsm_rule_add_url|default:'' }}{% else %}#{% endif %}"
         class="btn btn-sm btn-primary text-nowrap{% if not perms.netbox_nsm.add_rule %} disabled{% endif %}"
         {% if not perms.netbox_nsm.add_rule %}aria-disabled="true" tabindex="-1"{% endif %}>
        <span class="mdi mdi-plus-thick" aria-hidden="true"></span> {% trans "Add Rule" %}
      </a>
      {% endif %}
      <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>