{% set builder_id = builder_id|default('display-builder-' ~ random()) %}
{% set attributes = attributes.setAttribute('id', builder_id).addClass('display-builder') %}

<section{{ attributes }}>
  {% set first_drawer_content %}
    {# @todo create a component for drawer resizable? #}
    <div class="shoelace-resize-handle"></div>
    <span class="shoelace-drawer__content">
      {% for island in view_sidebar %}
        <span class="shoelace-drawer__content_island">
          {{ island }}
        </span>
      {% endfor %}
    </span>
  {% endset %}

  {{ include('display_builder:drawer', {
    id: 'db-first-drawer',
    content: first_drawer_content,
    contained: true,
    footer_close: false,
    attributes: {
      class: 'db-background',
    },
  }, with_context: false) }}

  {% set second_drawer_content %}
    <div class="shoelace-resize-handle"></div>
    <span class="shoelace-drawer__content">
      {{ contextual_islands }}
    </span>
  {% endset %}

  {{ include('display_builder:drawer', {
    id: 'db-second-drawer',
    label: 'Settings'|t,
    variant: 'end',
    content: second_drawer_content,
    contained: true,
    footer_close: false,
    attributes: {
      class: 'db-background',
    },
  }, with_context: false) }}

  {% set start %}
    <sl-button-group label="{{ 'Sidebar buttons'|t }}">
      {{ view_sidebar_buttons }}
    </sl-button-group>
    {{ start_buttons }}
  {% endset %}

  {{ include('display_builder:toolbar', {
      sticky: true,
      start: start,
      middle: view_main_tabs,
      end: end_buttons,
    }, with_context: false) }}

  <div class="display-builder__main">
    <span id="message-{{ builder_id }}"></span>
    {{ view_main }}
  </div>

  {% if menu_islands %}
    <div class="display-builder__menu">
      {{ menu_islands }}
    </div>
  {% endif %}

  <div id="preview-{{ builder_id }}" class="db-background db-preview" role="tooltip"></div>

</section>
