{% load i18n %}
<div class="d-flex flex-wrap gap-2 align-items-center mb-2 ipt-toolbar">
  <button type="button" class="btn btn-primary" data-ipt-action="expand-all">
    <i class="mdi mdi-arrow-expand-vertical"></i> {% trans "Expand all" %}
  </button>
  <button type="button" class="btn btn-outline-primary" data-ipt-action="collapse-all">
    <i class="mdi mdi-arrow-collapse-vertical"></i> {% trans "Collapse all" %}
  </button>
  {% if not filtered %}
    <div class="form-check form-switch ms-2 mb-0">
      <input class="form-check-input" type="checkbox" id="ipt-free" data-ipt-action="toggle-free"{% if free %} checked{% endif %}>
      <label class="form-check-label" for="ipt-free">{% trans "Free space" %}</label>
    </div>
  {% endif %}
  {% if request.user.is_authenticated %}{# anonymous users (LOGIN_REQUIRED=False) cannot store column preferences #}
  <div class="dropdown ms-auto">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside">
      <i class="mdi mdi-table-cog"></i> {% trans "Columns" %}
    </button>
    <form method="post" action="{% url 'plugins:netbox_ipam_treeview:columns' %}" class="dropdown-menu dropdown-menu-end p-3 ipt-columns">
      {% csrf_token %}
      <input type="hidden" name="next" value="{{ request.get_full_path }}">
      {% for key, label in all_columns.items %}{% if label %}
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="columns" value="{{ key }}" id="ipt-col-{{ key }}"{% if key in columns %} checked{% endif %}>
          <label class="form-check-label" for="ipt-col-{{ key }}">{{ label }}</label>
        </div>
      {% endif %}{% endfor %}
      <input type="hidden" name="columns" value="actions">
      <button type="submit" class="btn btn-sm btn-primary mt-2">{% trans "Apply" %}</button>
    </form>
  </div>
  {% endif %}
</div>