<div class="gm-sidebar-container">
  <!-- Tab Navigation -->
  <div class="tab-navigation">
    <button type="button"
            class="tab-btn {{#if (eq currentTab 'npcs')}}active{{/if}}"
            data-action="switchTab"
            data-tab="npcs">
      <i class="fas fa-masks-theater" aria-hidden="true"></i>
      <span>{{localize "STORYFRAME.UI.Tabs.NPCs"}}</span>
    </button>
    <button type="button"
            class="tab-btn {{#if (eq currentTab 'pcs')}}active{{/if}}"
            data-action="switchTab"
            data-tab="pcs">
      <i class="fas fa-users" aria-hidden="true"></i>
      <span>{{localize "STORYFRAME.UI.Tabs.PCs"}}</span>
      {{#if pendingRolls.length}}
      <span class="tab-badge" data-count="{{pendingRolls.length}}">{{pendingRolls.length}}</span>
      {{/if}}
    </button>
    <button type="button"
            class="tab-btn {{#if (eq currentTab 'challenges')}}active{{/if}}"
            data-action="switchTab"
            data-tab="challenges">
      <i class="fas fa-tasks" aria-hidden="true"></i>
      <span>{{localize "STORYFRAME.UI.Labels.Challenges"}}</span>
      {{#if hasActiveChallenge}}
      <span class="tab-badge active-badge">{{activeChallenges.length}}</span>
      {{/if}}
    </button>
  </div>

  <!-- Tab Content -->
  <div class="tab-content">
    <!-- NPCs Tab -->
    <section class="npcs-tab {{#unless (eq currentTab 'npcs')}}hidden{{/unless}}" data-tab-content="npcs" aria-labelledby="npcs-heading">
      <div class="tab-scroll-content">
        <div class="tab-header-actions">
          <button type="button" data-action="addSpeakerFromImage" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.AddNPC"}}" aria-label="{{localize "STORYFRAME.UI.AriaLabels.AddNPCFromImage"}}">
            <i class="fas fa-plus" aria-hidden="true"></i>
          </button>
          <button type="button" data-action="gatherScene" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.GatherSceneTokens"}}" aria-label="{{localize "STORYFRAME.UI.AriaLabels.GatherSceneTokens"}}">
            <i class="fas fa-users-viewfinder" aria-hidden="true"></i>
          </button>
          <button type="button" data-action="clearSpeaker" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.ClearActiveNPC"}}" aria-label="{{localize "STORYFRAME.UI.AriaLabels.DeselectActiveNPC"}}">
            <i class="fas fa-user-slash" aria-hidden="true"></i>
          </button>
          <button type="button" data-action="clearAllSpeakers" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.ClearAllNPCs"}}" aria-label="{{localize "STORYFRAME.UI.AriaLabels.RemoveAllNPCs"}}">
            <i class="fas fa-trash" aria-hidden="true"></i>
          </button>
          <button type="button" class="btn-broadcast {{#if playerViewersOpen}}active{{/if}}" data-action="openPlayerWindows" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.OpenCloseViewerOnPlayers"}}" aria-label="{{localize "STORYFRAME.UI.AriaLabels.OpenViewerOnPlayers"}}">
            <i class="fas fa-tv" aria-hidden="true"></i>
          </button>
          <button type="button" class="btn-broadcast" data-action="launchSceneMode" data-tooltip="{{localize "STORYFRAME.CinematicScene.LaunchScene"}}" aria-label="{{localize "STORYFRAME.CinematicScene.LaunchScene"}}">
            <i class="fas fa-film" aria-hidden="true"></i>
          </button>
          {{#if hasSpeakers}}
          <button type="button" data-action="saveCurrentSpeakers" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.SaveSpeakersAsScene"}}" aria-label="{{localize "STORYFRAME.UI.AriaLabels.SaveSpeakersAsScene"}}">
            <i class="fas fa-save" aria-hidden="true"></i>
          </button>
          {{/if}}
          {{#if hasSpeakerScenes}}
          <button type="button" data-action="manageScenes" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.ManageSpeakerScenes"}}" aria-label="{{localize "STORYFRAME.UI.AriaLabels.ManageSpeakerScenes"}}">
            <i class="fas fa-folder" aria-hidden="true"></i>
          </button>
          {{/if}}
          <button type="button" data-action="toggleGridLock" class="grid-lock-toggle {{#if gridLocked}}active{{/if}}" data-tooltip="{{#if gridLocked}}{{localize "STORYFRAME.UI.Tooltips.UnlockGrid"}}{{else}}{{localize "STORYFRAME.UI.Tooltips.LockGrid"}}{{/if}}" aria-label="Toggle grid lock">
            <i class="fas {{#if gridLocked}}fa-lock{{else}}fa-lock-open{{/if}}" aria-hidden="true"></i>
          </button>
          <div class="grid-size-slider-wrapper">
            <input type="range" class="grid-size-slider"
                   min="60" max="250" step="5"
                   value="{{gridSliderSize}}"
                   data-tooltip="Card size: {{gridSliderSize}}px"
                   aria-label="Grid card size">
          </div>
        </div>

        <div class="speaker-gallery {{#if gridLocked}}grid-locked{{/if}} controls-{{speakerControlsMode}}" {{#if gridLockedSize}}style="grid-template-columns: repeat(auto-fill, {{gridLockedSize}}px);"{{/if}} role="list" aria-label="{{localize "STORYFRAME.UI.AriaLabels.NPCSpeakers"}}">
        {{#if hasSpeakers}}
          {{#each speakers}}
            <div class="speaker-thumbnail {{#if (eq ../activeSpeaker this.id)}}active{{/if}} {{#if this.actorDeleted}}deleted{{/if}} {{#if this.isHidden}}speaker-hidden{{/if}}"
                 data-action="setSpeaker"
                 data-speaker-id="{{this.id}}"
                 data-tooltip="{{this.name}}{{#if this.actorDeleted}} ({{localize "STORYFRAME.UI.Labels.ActorDeleted"}}){{/if}}"
                 role="listitem"
                 tabindex="0"
                 aria-selected="{{#if (eq ../activeSpeaker this.id)}}true{{else}}false{{/if}}">
              <img src="{{this.img}}" alt="{{this.name}}" loading="lazy">
              {{#if this.isNameHidden}}
                <i class="fas fa-eye-slash speaker-hidden-badge" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.NameHiddenFromPlayers"}}" aria-label="{{localize "STORYFRAME.UI.Tooltips.NameHiddenFromPlayers"}}"></i>
              {{/if}}
              {{#if this.isHidden}}
                <i class="fas fa-user-slash speaker-invisible-badge" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.HiddenFromPlayers"}}" aria-label="{{localize "STORYFRAME.UI.Tooltips.HiddenFromPlayers"}}"></i>
              {{/if}}
              <div class="speaker-name">{{this.name}}</div>
              <div class="speaker-image-nav" data-image-path="{{this.currentImagePath}}">
                {{#if this.hasAltImages}}
                <button type="button" class="img-prev" data-action="cycleSpeakerImagePrev" data-speaker-id="{{this.id}}" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.PrevImage"}}">
                  <i class="fas fa-chevron-left" aria-hidden="true"></i>
                </button>
                {{/if}}
                <button type="button" class="add-alt-image" data-action="addSpeakerAltImage" data-speaker-id="{{this.id}}" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.AddAltImage"}}">
                  <i class="fas fa-plus" aria-hidden="true"></i>
                </button>
                {{#if this.canRemoveCurrentImage}}
                <button type="button" class="remove-alt-image" data-action="removeSpeakerAltImage" data-speaker-id="{{this.id}}" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.RemoveAltImage"}}">
                  <i class="fas fa-trash" aria-hidden="true"></i>
                </button>
                {{/if}}
                {{#if this.hasAltImages}}
                <button type="button" class="img-next" data-action="cycleSpeakerImageNext" data-speaker-id="{{this.id}}" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.NextImage"}}">
                  <i class="fas fa-chevron-right" aria-hidden="true"></i>
                </button>
                {{/if}}
              </div>
              <div class="speaker-controls">
                <button type="button" class="toggle-hidden" data-action="toggleSpeakerHidden" data-speaker-id="{{this.id}}" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.ToggleSpeakerHidden"}}">
                  <i class="fas {{#if this.isHidden}}fa-user-plus{{else}}fa-user-slash{{/if}}" aria-hidden="true"></i>
                </button>
                <button type="button" class="toggle-visibility" data-action="toggleSpeakerVisibility" data-speaker-id="{{this.id}}" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.ToggleNameVisibility"}}">
                  <i class="fas {{#if this.isNameHidden}}fa-eye{{else}}fa-eye-slash{{/if}}" aria-hidden="true"></i>
                </button>
                <button type="button" class="edit-speaker" data-action="editSpeaker" data-speaker-id="{{this.id}}" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.EditName" name=this.name}}">
                  <i class="fas fa-pen" aria-hidden="true"></i>
                </button>
                <button type="button" class="remove-speaker" data-action="removeSpeaker" data-speaker-id="{{this.id}}" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.RemoveName" name=this.name}}">
                  <i class="fas fa-times" aria-hidden="true"></i>
                </button>
              </div>
            </div>
          {{/each}}
        {{else}}
          <div class="empty-state compact" role="status">
            <i class="fas fa-user-plus" aria-hidden="true"></i>
            <span>{{localize "STORYFRAME.UI.Labels.DragActorsHere"}}</span>
          </div>
        {{/if}}
        </div>

        {{#if hasJournalImages}}
        <div class="journal-images-inline">
          <div class="section-divider">
            <span>{{localize "STORYFRAME.UI.Labels.JournalImages"}}</span>
          </div>
          <div class="journal-images-gallery">
          {{#each journalImages}}
            <div class="journal-image-item"
                 data-action="setImageAsSpeaker"
                 data-image-id="{{this.id}}"
                 data-image-src="{{this.src}}"
                 data-tooltip="{{localize "STORYFRAME.UI.Tooltips.ClickToAddAsNPC" name=this.alt}}">
              <div class="journal-image-item-thumb">
                <img src="{{this.src}}" alt="{{this.alt}}" loading="lazy">
              </div>
              <span class="journal-image-label">{{this.alt}}</span>
            </div>
          {{/each}}
          </div>
        </div>
        {{/if}}

        {{#if hasJournalActors}}
        <div class="journal-actors-inline">
          <div class="section-divider">
            <span>{{localize "STORYFRAME.UI.Labels.JournalActors"}}</span>
          </div>
          <div class="journal-actors-gallery">
          {{#each journalActors}}
            <div class="journal-actor-item"
                 data-action="setActorAsSpeaker"
                 data-actor-id="{{this.id}}"
                 data-tooltip="{{localize "STORYFRAME.UI.Tooltips.ClickToAddAsNPC" name=this.name}}">
              <div class="journal-actor-item-thumb">
                <img src="{{this.img}}" alt="{{this.name}}" loading="lazy">
              </div>
              <span class="journal-actor-label">{{this.name}}</span>
            </div>
          {{/each}}
          </div>
        </div>
        {{/if}}
      </div>
    </section>

    <!-- PCs Tab -->
    <section class="pcs-tab {{#unless (eq currentTab 'pcs')}}hidden{{/unless}}" data-tab-content="pcs" aria-labelledby="pcs-heading">
      <div class="tab-header-actions">
        {{#if pendingRolls.length}}
        <button type="button" class="pending-rolls-btn" data-action="showPendingRolls" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.PendingRollsCount" count=pendingRolls.length}}" aria-label="{{localize "STORYFRAME.UI.AriaLabels.ViewPendingRolls"}}">
          <i class="fas fa-hourglass-half" aria-hidden="true"></i>
        </button>
        {{/if}}
        <button type="button" class="btn-player-broadcast {{#if playerSidebarsOpen}}active{{/if}}" data-action="openPlayerSidebars" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.OpenCloseSidebarsOnPlayers"}}" aria-label="{{localize "STORYFRAME.UI.AriaLabels.OpenSidebarsOnPlayers"}}">
          <i class="fas fa-window-restore" aria-hidden="true"></i>
        </button>
        <button type="button" data-action="requestRollsFromSelection" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.RequestRollsFromSelection"}}" aria-label="{{localize "STORYFRAME.UI.AriaLabels.RequestRollsFromSelection"}}">
          <i class="fas fa-wand-magic-sparkles" aria-hidden="true"></i>
        </button>
      </div>

      <div class="dc-controls-bar" role="toolbar" aria-label="{{localize "STORYFRAME.UI.AriaLabels.DCControls"}}">
        <div class="dc-controls-row">
          <div class="preset-selector">
            <div class="dc-input-group">
              <label class="dc-label" for="dc-input">{{localize "STORYFRAME.ChallengeBuilder.DC"}}</label>
              <input type="number"
                     id="dc-input"
                     class="dc-input"
                     value="{{currentDC}}"
                     min="1"
                     placeholder="--"
                     aria-label="{{localize "STORYFRAME.UI.AriaLabels.DifficultyClass"}}">
              <button type="button"
                      class="preset-btn"
                      data-action="togglePresetDropdown"
                      data-tooltip="{{localize "STORYFRAME.UI.Tooltips.DCPresets"}}">
                <i class="fas fa-bookmark"></i>
              </button>
            </div>
            <button type="button"
                    class="secret-roll-btn {{#if secretRollEnabled}}active{{/if}}"
                    data-action="toggleSecretRoll"
                    data-tooltip="{{localize "STORYFRAME.UI.Tooltips.GMOnlyRoll"}}"
                    aria-label="{{localize "STORYFRAME.UI.AriaLabels.ToggleSecretRoll"}}"
                    aria-pressed="{{#if secretRollEnabled}}true{{else}}false{{/if}}">
              <i class="fas fa-eye-slash" aria-hidden="true"></i>
            </button>
          </div>

          <button type="button"
                  class="send-batch-btn"
                  data-action="sendBatch"
                  data-tooltip="{{localize "STORYFRAME.UI.Tooltips.SendBatchedSkillChecks"}}"
                  aria-label="{{localize "STORYFRAME.UI.AriaLabels.SendBatch"}}"
                  style="display: none;">
            <i class="fas fa-paper-plane" aria-hidden="true"></i>
            <span class="batch-count">0</span>
          </button>
        </div>
      </div>

      <div class="tab-scroll-content">
        {{#if hasJournalChecks}}
        <div class="journal-checks-inline">
          <div class="section-divider">
            <span>{{localize "STORYFRAME.UI.Labels.JournalSkills"}}</span>
          </div>
          <div class="journal-checks-grid">
          {{#each journalSkillGroups}}
            <div class="journal-check-wrapper">
              <button type="button"
                      class="journal-skill-btn"
                      data-action="showCheckDCsPopup"
                      data-skill="{{this.skillName}}"
                      data-check-type="skill"
                      data-tooltip="{{localize "STORYFRAME.UI.Tooltips.SkillChecks" skill=this.skillName}}"
                      aria-label="{{localize "STORYFRAME.UI.AriaLabels.SkillChecks" skill=this.skillName}}">
                {{this.skillName}}
              </button>
            </div>
          {{/each}}
          </div>
        </div>
        {{/if}}

        {{#if hasJournalLore}}
        <div class="journal-lore-inline">
          <div class="section-divider">
            <span>{{localize "STORYFRAME.UI.Labels.JournalLore"}}</span>
          </div>
          <div class="journal-checks-grid">
          {{#each journalLoreGroups}}
            <div class="journal-check-wrapper">
              <button type="button"
                      class="journal-skill-btn"
                      data-action="showCheckDCsPopup"
                      data-skill="{{this.skillName}}"
                      data-check-type="skill"
                      data-tooltip="{{localize "STORYFRAME.UI.Tooltips.SkillChecks" skill=this.skillName}}"
                      aria-label="{{localize "STORYFRAME.UI.AriaLabels.SkillChecks" skill=this.skillName}}">
                {{this.displayName}}
              </button>
            </div>
          {{/each}}
          </div>
        </div>
        {{/if}}

        {{#if hasJournalSaves}}
        <div class="journal-saves-inline">
          <div class="section-divider">
            <span>{{localize "STORYFRAME.UI.Labels.JournalSaves"}}</span>
          </div>
          <div class="journal-saves-grid">
          {{#each journalSaveGroups}}
            <div class="journal-save-wrapper">
              <button type="button"
                      class="journal-save-btn"
                      data-action="showCheckDCsPopup"
                      data-skill="{{this.skillName}}"
                      data-check-type="save"
                      data-tooltip="{{localize "STORYFRAME.UI.Tooltips.SavingThrows" save=this.skillName}}"
                      aria-label="{{localize "STORYFRAME.UI.AriaLabels.SavingThrows" save=this.skillName}}">
                {{this.skillName}}
              </button>
            </div>
          {{/each}}
          </div>
        </div>
        {{/if}}

        {{#if hasLoreSkills}}
        <div class="lore-skills-section">
          <div class="lore-header">
            <span>{{localize "STORYFRAME.ChallengeBuilder.LoreSkills"}}</span>
          </div>
          <div class="lore-skills-grid">
            {{#each loreSkills}}
              <div class="lore-skill-wrapper">
                <button type="button"
                        class="skill-btn lore"
                        data-action="requestSkill"
                        data-skill="{{this.slug}}"
                        data-tooltip="{{this.name}}"
                        aria-label="{{localize "STORYFRAME.UI.AriaLabels.RequestSkillCheck" skill=this.name}}">
                  {{this.name}}
                </button>
              </div>
            {{/each}}
          </div>
        </div>
        {{/if}}

        <div class="skill-categories" role="group" aria-label="{{localize "STORYFRAME.UI.AriaLabels.SkillButtonsByCategory"}}">
          {{#each orderedCategories}}
          <div class="skill-category" data-category-key="{{this.key}}">
            <span class="category-label">{{this.label}}</span>
            <div class="category-skills">
              {{#each this.skills}}
              <div class="skill-btn-wrapper">
                <button type="button"
                        class="skill-btn"
                        data-action="requestSkill"
                        data-skill="{{this.slug}}"
                        data-tooltip="{{this.name}}"
                        aria-label="{{localize "STORYFRAME.UI.AriaLabels.RequestSkillCheck" skill=this.name}}">
                  <i class="fas {{this.icon}}" aria-hidden="true"></i>
                </button>
                <span class="skill-label">{{this.name}}</span>
              </div>
              {{/each}}
            </div>
          </div>
          {{/each}}

          {{#if saves.length}}
          <div class="skill-category saves-category">
            <span class="category-label">{{localize "STORYFRAME.UI.Categories.SavingThrows"}}</span>
            <div class="category-skills">
              {{#each saves}}
              <div class="skill-btn-wrapper save-btn-wrapper">
                <button type="button"
                        class="skill-btn save-btn"
                        data-action="requestSave"
                        data-save="{{this.slug}}"
                        data-tooltip="{{this.name}}"
                        aria-label="{{localize "STORYFRAME.UI.AriaLabels.RequestSave" save=this.name}}">
                  <i class="fas {{this.icon}}" aria-hidden="true"></i>
                </button>
                <span class="skill-label">{{this.name}}</span>
              </div>
              {{/each}}
            </div>
          </div>
          {{/if}}
        </div>
      </div>
    </section>

    <!-- Challenges Tab -->
    <section class="challenges-tab {{#unless (eq currentTab 'challenges')}}hidden{{/unless}}" data-tab-content="challenges" aria-labelledby="challenges-heading">
      <div class="tab-header-actions">
        {{#if hasActiveChallenge}}
        <button type="button" class="active-challenges-btn" data-action="showActiveChallenges" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.ActiveChallengesCount" count=activeChallenges.length}}" aria-label="{{localize "STORYFRAME.UI.AriaLabels.ViewActiveChallenges"}}">
          <i class="fas fa-flag-checkered" aria-hidden="true"></i>
        </button>
        {{/if}}
        <button type="button" data-action="presentChallenge" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.PresentChallenge"}}" aria-label="{{localize "STORYFRAME.UI.AriaLabels.PresentChallenge"}}">
          <i class="fas fa-tasks" aria-hidden="true"></i>
        </button>
        <button type="button" data-action="createChallengeFromSelection" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.CreateFromSelection"}}" aria-label="{{localize "STORYFRAME.UI.AriaLabels.CreateFromSelection"}}">
          <i class="fas fa-wand-magic-sparkles" aria-hidden="true"></i>
        </button>
      </div>
      <div class="tab-scroll-content">
        {{#if hasSavedChallenges}}
          {{#each savedChallenges}}
          <div class="lib-challenge-card {{#if this.collapsed}}collapsed{{/if}}" data-challenge-id="{{this.id}}">
            <div class="lib-card-header"
                 data-action="toggleLibraryChallengeCollapse"
                 role="button"
                 tabindex="0"
                 aria-expanded="{{#unless this.collapsed}}true{{else}}false{{/unless}}">
              <i class="fas fa-chevron-{{#if this.collapsed}}right{{else}}down{{/if}} collapse-icon" aria-hidden="true"></i>
              <div class="lib-card-title-section">
                <i class="fas fa-flag-checkered lib-card-icon"></i>
                <span class="lib-card-title">{{this.name}}</span>
              </div>
              <div class="lib-card-actions">
                <button type="button" class="lib-edit-btn" data-action="editChallenge" data-challenge-id="{{this.id}}" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.EditChallenge"}}">
                  <i class="fas fa-edit"></i>
                </button>
                <button type="button" class="lib-delete-btn" data-action="deleteChallenge" data-challenge-id="{{this.id}}" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.DeleteChallenge"}}">
                  <i class="fas fa-trash"></i>
                </button>
              </div>
            </div>

            {{#unless this.collapsed}}
            <div class="lib-card-body">
              {{#each this.options}}
              <div class="lib-option-preview">
                <div class="opt-desc">{{#if this.name}}{{this.name}}{{else}}{{localize "STORYFRAME.ChallengeBuilder.OptionLabel" num=this.index}}{{/if}}</div>
                <div class="opt-skills">
                  {{#each this.skillOptions}}
                  <span class="skill-dc-pill" data-check-type="{{this.checkType}}">
                    {{this.displayText}}{{#if this.dc}} <strong>{{formatDC this.dc}}</strong>{{/if}}
                    {{#if this.isSecret}}<i class="fas fa-eye-slash secret-marker"></i>{{/if}}
                    {{#if this.minProficiencyLabel}}<span class="prof-badge" data-prof="{{this.minProficiency}}">{{this.minProficiencyLabel}}</span>{{/if}}
                  </span>
                  {{/each}}
                </div>
              </div>
              {{/each}}
            </div>

            <button type="button"
                    class="lib-present-btn"
                    data-action="presentSavedChallenge"
                    data-challenge-id="{{this.id}}">
              <i class="fas fa-paper-plane"></i> {{localize "STORYFRAME.UI.Labels.PresentToAllPlayers"}}
            </button>
            {{/unless}}
          </div>
          {{/each}}
        {{else}}
          <div class="lib-empty-state">
            <i class="fas fa-folder-open"></i>
            <p>{{localize "STORYFRAME.UI.Labels.NoSavedChallenges"}}</p>
            <p class="hint">{{localize "STORYFRAME.UI.Labels.CreateChallengeHint"}}</p>
          </div>
        {{/if}}
      </div>
    </section>
  </div>
</div>
