<div class="content-header">
    <h2><i class="fas fa-puzzle-piece"></i>  {{#if labelOverride}}{{labelOverride}}{{else}}{{ccLocalize "names.widgets"}}{{/if}}</h2>
    {{#if isGM}}
    <div class="header-actions">
            <i class="fas fa-wrench widget-tray-toggle" data-action="toggleWidgetTray"></i> 
    </div>
    {{/if}}
</div>
{{#if isGM}}
<div class="widget-tray {{#unless isWidgetTrayOpen}}collapsed{{/unless}}">
    <div class="tray-inner">
        <div class="tray-section">
            <div class="active-widgets-bar">
                {{#if activewidget.length}}
                    {{#each activewidget}}
                        {{#if @first}}<div class="widget-drop-slot" data-widget-tab="widgets" data-widget-insert-pos="0"></div>{{/if}}
                        <div class="widget-tag active" data-widget-id="{{this.id}}" data-widget-tab="widgets">
                         <span class="name">{{this.widgetName}} {{counter}}</span>
                             <i class="fas fa-circle-x action-icon" data-action="deactivateWidget" data-id="{{this.id}}" title="{{localize 'button.deactivate'}}"></i>
                        </div>
                        <div class="widget-drop-slot" data-widget-tab="widgets" data-widget-after-index="{{@index}}"></div>
                    {{/each}}
                {{/if}}
                {{#if inactivewidgets.length}}
                    {{#each inactivewidgets}}
                        <div class="tray-card inactive" >
                          <span class="name" data-action="activateWidget" data-id="{{this.id}}">{{widgetName}} {{counter}}</span>
                              <div class="tray-actions">
                                <i class="fas fa-exchange-alt action-icon" data-action="swapWidgetTab" data-id="{{this.id}}" title="Move to Info Tab"></i>
                                <i class="fas fa-trash action-icon delete" data-action="deleteWidget" data-id="{{this.id}}" data-type="{{this.widgetName}}"></i>
                              </div>
                        </div>
                    {{/each}}
                {{/if}}
            </div>
        </div>
    </div>
    {{!-- Section: Available Widgets --}}
    <div class="tray-section">
    <h3>{{ccLocalize "widgets.available"}}</h3>
        <div class="tray-grid">
            {{#each availableWidgets}}
                <div class="tray-card available">
                    <span class="name" data-action="addWidget" data-name="{{this.name}}">{{this.name}}</span>
                </div>
            {{/each}}
        </div>
    </div>
</div>
{{/if}}

    {{!-- Rendered Content --}}
    <article class="cc-widgets-render">
        {{{this.widgetsToRender}}}
    </article>
