{# Main content layout with stacks and drawers - widget-based system #}

{# Macro to render a widget, optionally wrapping in a collapsible container #}
{% macro render_widget(widget) %}
{%- if widget.collapsible %}
<div class="collapsible-wrapper{% if 'stack-box' in widget.html %} stack-box{% endif %}" data-widget-id="{{ widget.widget_id }}">
  <div class="collapsible-header container-box">
    <span class="collapse-chevron">&#10095;</span>
    <span class="collapsible-title">{{ widget.title or widget.widget_id }}</span>
  </div>
  <div class="collapsible-content">
    {{ widget.html | safe }}
  </div>
  <button class="collapse-overlay-btn" aria-label="Collapse widget">
    <span class="collapse-chevron">&#10095;</span>
  </button>
</div>
{%- else %}
{{ widget.html | safe }}
{%- endif %}
{% endmacro %}

<div style="isolation: isolate; position: relative;">
  <div id="deck-container" style="position: fixed; z-index: -1; top: 0; left: 0; width: 100%; height: 100%;"></div>
  
  {# Left drawer #}
  {% if drawer_enabled.left %}
  <div class="drawer-container drawer-left">
    {%- for widget in widgets_by_location.get('drawer-left', []) %}
    {{ render_widget(widget) }}
    {%- endfor %}
  </div>
  <div class="drawer-handle left">
    <span class="icon">▶</span>
  </div>
  {% endif %}
  
  {# Right drawer #}
  {% if drawer_enabled.right %}
  <div class="drawer-container drawer-right">
    {%- for widget in widgets_by_location.get('drawer-right', []) %}
    {{ render_widget(widget) }}
    {%- endfor %}
  </div>
  <div class="drawer-handle right">
    <span class="icon">◀</span>
  </div>
  {% endif %}

  {# Bottom drawer #}
  {% if drawer_enabled.bottom %}
  <div class="drawer-container drawer-bottom">
    {%- for widget in widgets_by_location.get('drawer-bottom', []) %}
    {{ render_widget(widget) }}
    {%- endfor %}
  </div>
  <div class="drawer-handle bottom">
    <span class="icon">▲</span>
  </div>
  {% endif %}
  
  <div class="content-wrapper" style="position: relative; z-index: 1;">
    {# Top-left stack #}
    <div class="stack top-left">
      {# Legacy support: old-style title, search, topic tree #}
      {% if title and not use_widget_system %}
      <div id="title-container" class="container-box">
        <span
          id="main-title"
          style="font-family:{{ title_font_family }};font-size:{{ title_font_size }}pt;font-weight:{{ title_font_weight }};color:{{ title_font_color }}"
        >
          {{ title }}
        </span>
        <br />
        <span
          style="font-family:{{ title_font_family }};font-size:{{ sub_title_font_size }}pt;color:{{ sub_title_font_color }}"
        >
          {{ sub_title }}
        </span>
      </div>
      {% endif %}

      {% if search and not use_widget_system %}
      <div id="search-container" class="container-box interactive-element">
        <input autocomplete="off" type="search" id="text-search" placeholder="🔍" />
      </div>
      {% endif %}
      
      {% if enable_topic_tree and not use_widget_system %}
      <div id="topic-tree" class="container-box">
      </div>
      {% endif %}
      
      {# Widget-based rendering #}
      {%- for widget in widgets_by_location.get('top-left', []) %}
      {{ render_widget(widget) }}
      {%- endfor %}
    </div>
    
    {# Top-right stack #}
    <div class="stack top-right">
      {# Legacy support: legend #}
      {% if enable_colormap_selector and not use_widget_system %}
      <div id="legend-container" class="container-box stack-box" style="display:none;">
      </div>
      {% endif %}
      
      {# Widget-based rendering #}
      {%- for widget in widgets_by_location.get('top-right', []) %}
      {{ render_widget(widget) }}
      {%- endfor %}
    </div>
    
    {# Bottom-right stack #}
    <div class="stack bottom-right">
      {# Widget-based rendering (excluding logos which are rendered separately) #}
      {%- for widget in widgets_by_location.get('bottom-right', []) %}
      {%- if 'LogoWidget' not in widget.__class__.__name__ %}
      {{ render_widget(widget) }}
      {%- endif %}
      {%- endfor %}
    </div>
    
    {# Bottom-left stack #}
    <div class="stack bottom-left">
      {# Legacy support: colormap selector, histogram #}
      {%- if enable_colormap_selector and not use_widget_system %}
      <div id="colormap-selector-container" class="container-box stack-box interactive-element"></div>
      {%- endif -%}
      {%- if enable_histogram and not use_widget_system %}
      <div id="d3histogram-container" class="container-box stack-box interactive-element"></div>
      {%- endif -%}
      
      {# Widget-based rendering #}
      {%- for widget in widgets_by_location.get('bottom-left', []) %}
      {{ render_widget(widget) }}
      {%- endfor %}
    </div>
  </div>
  
  {# Legacy logo support #}
  {% if logo and not use_widget_system %}
  <div id="logo-container" class="container-box" style="position: fixed; z-index: 0; bottom: 0; right: 0;">
    <img src="{{ logo }}" style="width:{{ logo_width }}px" />
  </div>
  {% endif %}
  
  {# Widget-based logo rendering - outside grid to avoid transform issues #}
  {% if use_widget_system %}
  {%- for widget in widgets_by_location.get('bottom-right', []) %}
  {%- if 'LogoWidget' in widget.__class__.__name__ %}
  <div id="{{ widget.get_container_id() }}" class="container-box" style="position: fixed; z-index: 0; bottom: 0; right: 0;">
    <img src="{{ widget.logo }}" style="width:{{ widget.logo_width }}px" />
  </div>
  {%- endif %}
  {%- endfor %}
  {% endif %}
</div>

{# Custom HTML #}
{% if custom_html %} {{ custom_html }} {%- endif -%}
