{% load design_components %}
<dds-sandbox-toolbar class="dds-sandbox-toolbar" data-surface="sandbox" role="toolbar" aria-label="{{ resolved_aria_label }}" {{ attrs }}>
  <l-cluster data-sandbox-controls>
    {% if has_variants %}
      <div data-sandbox-control="variant">
        {% dds__tooltip text="Select variant preset" placement="bottom" %}
          {% dds__popout label=active_variant_label menu_label="Select variant preset" %}
            {% slot "menu" %}
              {% for item in normalized_variants %}
                {% dds__popout_option label=item.label value=item.name href=item.href selected=item.is_selected %}
              {% endfor %}
            {% endslot %}
          {% enddds__popout %}
        {% enddds__tooltip %}
      </div>
    {% endif %}
    <div data-sandbox-control="background">
      {% dds__tooltip text="Background colour" placement="bottom" %}
        {% dds__popout label=active_background_label menu_label="Background colour" %}
          {% slot "menu" %}
            {% for item in normalized_backgrounds %}
              {% dds__popout_option label=item.label value=item.value selected=item.is_selected %}
            {% endfor %}
          {% endslot %}
        {% enddds__popout %}
      {% enddds__tooltip %}
    </div>
    <div data-sandbox-control="viewport">
      {% dds__tooltip text="Viewport width" placement="bottom" %}
        {% dds__popout label=active_viewport_label icon="monitor" menu_label="Viewport width" %}
          {% slot "menu" %}
            {% for item in normalized_viewports %}
              {% dds__popout_option label=item.label value=item.value selected=item.is_selected %}
            {% endfor %}
          {% endslot %}
        {% enddds__popout %}
      {% enddds__tooltip %}
    </div>
    <div data-sandbox-control="zoom">
      {% dds__tooltip text="Zoom level" placement="bottom" %}
        {% dds__popout label=active_zoom_label menu_label="Zoom level" %}
          {% slot "menu" %}
            {% for item in normalized_zoom_levels %}
              {% dds__popout_option label=item.label value=item.value selected=item.is_selected %}
            {% endfor %}
          {% endslot %}
        {% enddds__popout %}
      {% enddds__tooltip %}
    </div>
    <div data-sandbox-toggles class="l-cluster">
      {% dds__tooltip text="Outline" placement="bottom" %}
        {% dds__button label="Toggle box model outline" icon="box-model" icon_only=True variant="ghost" size="sm" pressed=outline_active action="toggle-outline" %}
      {% enddds__tooltip %}
      {% dds__tooltip text="Measure" placement="bottom" %}
        {% dds__button label="Toggle measurement overlay" icon="ruler" icon_only=True variant="ghost" size="sm" pressed=measure_active action="toggle-measure" %}
      {% enddds__tooltip %}
      {% dds__tooltip text="RtL direction" placement="bottom" %}
        {% dds__button label="Toggle right-to-left direction" icon="rtl" icon_only=True variant="ghost" size="sm" pressed=rtl_active action="toggle-rtl" %}
      {% enddds__tooltip %}
      {% if has_reset_url %}
        {% dds__tooltip text="Reset" placement="bottom" %}
          {% dds__button label="Reset parameters" icon="reset" icon_only=True variant="ghost" size="sm" href=reset_url action="reset-params" %}
        {% enddds__tooltip %}
      {% endif %}
      {% if has_canvas_url %}
        {% dds__tooltip text="Open in new tab" placement="bottom" align="end" %}
          {% dds__button label="Open canvas in new tab" icon="external-link" icon_only=True variant="ghost" size="sm" href=canvas_url target="_blank" %}
        {% enddds__tooltip %}
      {% endif %}
    </div>
  </l-cluster>
</dds-sandbox-toolbar>