{# Code for toggle and margin is compatible with bootstrap4 and bootstrap5 #}
{% if view.column_settings %}
<div class="dropdown">
  <button class="btn btn-outline-secondary dropdown-toggle mr-1" type="button" id="dropdownColumnButton"
          data-toggle="dropdown" data-bs-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">
    Columns
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownColumnButton" hx-target="#table_data">
    {% if default %}
      <a class="dropdown-item py-0" href="#" hx-get="" id="id_col_reset">Reset columns</a>
      <div class="dropdown-divider"></div>
    {% endif %}
    {% for column in table.column_states %}
      <div class="form-check ml-2 ms-2">
        <input type="checkbox" class="form-check-input" name="_col_{{ column.0 }}" id="id_col_{{ column.0 }}"
               hx-get="" {% if column.2 %} checked {% endif %}>
        <label class="form-check-label" for="id_col_{{ column.0 }}">
          {{ column.1 }}
        </label>
      </div>
    {% endfor %}
  </div>
</div>
{% endif %}