<div class="content-header">
  <h2><i class="fas fa-info-circle"></i> {{ccLocalize "names.information" }}</h2>
  {{#if isGM}}
  <div class="header-actions">
    <i class="fas fa-wrench widget-tray-toggle" data-action="toggleInfoWidgetTray"></i>
  </div>
  {{/if}}
</div>
{{#if isGM}}
<div class="widget-tray info {{#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="info" data-widget-insert-pos="0"></div>{{/if}}
        <div class="widget-tag active" data-widget-id="{{this.id}}" data-widget-tab="info">
          <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="info" 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 Widgets 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>
  <i class="fas {{#if widgetsPosition}}fa-arrow-up-to-line{{else}}fa-arrow-down-to-line{{/if}} move-widget-tag"
    data-action="toggleWidgetPosition" title="{{ccLocalize 'ui.moveWidgets'}}"></i>

</div>
{{/if}}

{{#if widgetsToRender}}
{{#unless widgetsPosition}}
<article class="cc-widgets-render">
  {{{this.widgetsToRender}}}
</article>
{{/unless}}
{{/if}}

{{{richTextDescription}}}

{{#if widgetsToRender}}
{{#if widgetsPosition}}
<article class="cc-widgets-render">
  {{{this.widgetsToRender}}}
</article>
{{/if}}
{{/if}}
