{{!-- frame-browser.hbs --}}
{{!-- Root element for the FrameBrowser ApplicationV2 window body --}}

<div class="tie-fb-layout">

  {{!-- ── Tab navigation ──────────────────────────────────────── --}}
  <nav class="tie-fb-tabs" role="tablist" aria-label="{{localize "TOKENIZER-2.FRAME_BROWSER.TabsAriaLabel"}}">
    {{#each sections}}
      <button
        type="button"
        class="tie-fb-tab {{#if this.active}}is-active{{/if}}"
        data-section="{{this.id}}"
        role="tab"
        aria-selected="{{this.active}}"
        aria-controls="tie-fb-panel-{{this.id}}"
      >
        {{this.label}}
      </button>
    {{/each}}
  </nav>

  {{!-- ── Tab panels ──────────────────────────────────────────── --}}
  <div class="tie-fb-panels">
    {{#each sections}}
      <div
        id="tie-fb-panel-{{this.id}}"
        class="tie-fb-panel {{#if this.active}}is-active{{/if}}"
        data-section-panel="{{this.id}}"
        role="tabpanel"
      >

        {{!-- Custom tab toolbar --}}
        {{#if this.isCustom}}
          <div class="tie-fb-panel__toolbar">
            <button type="button" class="tie-btn tie-btn--ghost tie-btn--sm" data-action="add-custom-frame">
              <i class="fa-solid fa-folder-open"></i> {{localize "TOKENIZER-2.FRAME_BROWSER.BrowseFiles"}}
            </button>
            {{#unless this.hideImportDirectory}}
              <button type="button" class="tie-btn tie-btn--ghost tie-btn--sm" data-action="import-directory">
                <i class="fa-solid fa-folder-tree"></i> {{localize "TOKENIZER-2.FRAME_BROWSER.ImportDirectory"}}
              </button>
            {{/unless}}
            {{#unless this.hasCustomContent}}
              <p class="tie-fb-empty">{{localize "TOKENIZER-2.FRAME_BROWSER.NoCustomFrames"}}</p>
            {{/unless}}
          </div>
        {{/if}}

        {{!-- Subsections (each may have an optional divider label) --}}
        {{#each this.subsections}}
          {{#if this.label}}
            <h4 class="tie-fb-subsection-header">
              {{this.label}}
              {{#if this.removable}}
                <button
                  type="button"
                  class="tie-fb-subsection-remove"
                  data-action="remove-custom-group"
                  data-group-index="{{this.groupIndex}}"
                  title="{{localize "TOKENIZER-2.FRAME_BROWSER.RemoveGroup"}}"
                >
                  <i class="fa-solid fa-xmark"></i>
                </button>
              {{/if}}
            </h4>
          {{/if}}

          <div class="tie-fb-grid">
            {{#each this.frames}}
              <div
                class="tie-fb-frame"
                data-action="select-frame"
                data-src="{{this.src}}"
                data-label="{{this.label}}"
                title="{{this.label}}"
                role="button"
                tabindex="0"
              >
                <button
                  type="button"
                  class="tie-fb-frame__favorite {{#if this.isFavorite}}is-active{{/if}}"
                  data-action="toggle-favorite"
                  data-src="{{this.src}}"
                  data-label="{{this.label}}"
                  aria-label="{{#if this.isFavorite}}{{localize "TOKENIZER-2.FRAME_BROWSER.FavoriteRemove"}}{{else}}{{localize "TOKENIZER-2.FRAME_BROWSER.FavoriteAdd"}}{{/if}}"
                  title="{{#if this.isFavorite}}{{localize "TOKENIZER-2.FRAME_BROWSER.FavoriteRemove"}}{{else}}{{localize "TOKENIZER-2.FRAME_BROWSER.FavoriteAdd"}}{{/if}}"
                >
                  <i class="{{#if this.isFavorite}}fa-solid{{else}}fa-regular{{/if}} fa-star"></i>
                </button>

                <div class="tie-fb-frame__img-wrap">
                  {{#if this.isVideo}}
                    <video src="{{this.src}}" muted loop autoplay playsinline preload="metadata"></video>
                  {{else}}
                    <img src="{{this.src}}" alt="{{this.label}}" loading="lazy" />
                  {{/if}}
                </div>
                <span class="tie-fb-frame__label">{{this.label}}</span>

                {{!-- Remove button for flat custom frames --}}
                {{#if ../isFlat}}
                  <button
                    type="button"
                    class="tie-fb-frame__remove"
                    data-action="remove-custom-frame"
                    data-src="{{this.src}}"
                    aria-label="{{localize "TOKENIZER-2.FRAME_BROWSER.RemoveFrame" label=this.label}}"
                    title="{{localize "TOKENIZER-2.FRAME_BROWSER.Remove"}}"
                  >
                    <i class="fa-solid fa-xmark"></i>
                  </button>
                {{/if}}
                {{!-- Remove button for group frames --}}
                {{#if ../removable}}
                  <button
                    type="button"
                    class="tie-fb-frame__remove"
                    data-action="remove-custom-frame"
                    data-src="{{this.src}}"
                    data-group-index="{{../groupIndex}}"
                    aria-label="{{localize "TOKENIZER-2.FRAME_BROWSER.RemoveFrame" label=this.label}}"
                    title="{{localize "TOKENIZER-2.FRAME_BROWSER.Remove"}}"
                  >
                    <i class="fa-solid fa-xmark"></i>
                  </button>
                {{/if}}
              </div>
            {{/each}}

            {{#unless this.frames.length}}
              {{#if ../../isFavoritesTab}}
                <p class="tie-fb-empty">{{localize "TOKENIZER-2.FRAME_BROWSER.NoFavorites"}}</p>
              {{/if}}
              {{#if ../../isRecentsTab}}
                <p class="tie-fb-empty">{{localize "TOKENIZER-2.FRAME_BROWSER.NoRecents"}}</p>
              {{/if}}
            {{/unless}}
          </div>
        {{/each}}

      </div>
    {{/each}}
  </div>

</div>