{% load toolbar_tags %}
<div class="navbar navbar-dark bg-secondary toolbar">
  <div class="mr-auto">
    <select class="group_selector">
        {% for group in toolbar_groups %}
        <option value="{{ group.slug }}" {% if forloop.first %}selected="selected"{% endif %}>{{ group.name }}</option>
        {% endfor %}
    </select>

    <span class="button_group_container">
        {% for group in toolbar_groups %}
        <span data-group="{{ group.slug }}" class="button_group">
            {# buttons for this group #}
            {% for button in group.button_set.all %}
            	{% toolbar_button button %}
            {% endfor %}
        </span>
        {% endfor %}
    </span>
  </div>
</div>

{% keyboard toolbar_groups %}
