<!-- D.6: 資料夾管理區塊 -->
<div class="ds-subsection">
    <h3>Folder Management Card (Complete)</h3>
    <p class="ds-desc">Gallery 頁面的核心元件，包含資料夾管理、手動輸入、輸出資訊和 Hero 按鈕</p>

    <!-- 完整卡片展示 -->
    <div class="ds-card-demo" style="max-width: 700px; margin: 0 auto;">
        <div class="avlist-card">
            <!-- Header: 標題 + 圖標按鈕 -->
            <div class="avlist-card-header">
                <div class="title">
                    <i class="bi bi-folder"></i> <span>掃描資料夾</span>
                </div>
                <div class="actions">
                    <button class="btn-icon" title="選擇資料夾" type="button">
                        <i class="bi bi-folder-plus"></i>
                    </button>
                    <button class="btn-icon active" title="手動輸入" type="button">
                        <i class="bi bi-keyboard"></i>
                    </button>
                </div>
            </div>

            <div class="avlist-card-body">
                <!-- 手動輸入列（展開狀態）-->
                <div class="manual-input" style="display: flex; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-light); gap: 0.5rem;">
                    <input type="text" class="input input-bordered input-sm" placeholder="輸入資料夾路徑..." value="D:\Videos\JAV" style="flex: 1;">
                    <button class="btn btn-primary btn-sm" type="button">
                        <i class="bi bi-plus"></i>
                    </button>
                </div>

                <!-- 資料夾列表（3 項範例）-->
                <div class="folder-list">
                    <div class="folder-item">
                        <i class="bi bi-folder folder-icon"></i>
                        <span class="folder-path">D:\Videos\JAV</span>
                        <button class="btn btn-ghost btn-xs btn-remove" type="button">
                            <i class="bi bi-x"></i>
                        </button>
                    </div>
                    <div class="folder-item">
                        <i class="bi bi-folder folder-icon"></i>
                        <span class="folder-path">/Users/username/Movies/Adult</span>
                        <button class="btn btn-ghost btn-xs btn-remove" type="button">
                            <i class="bi bi-x"></i>
                        </button>
                    </div>
                    <div class="folder-item">
                        <i class="bi bi-folder folder-icon"></i>
                        <span class="folder-path">\\NAS\Media\AV Collection</span>
                        <button class="btn btn-ghost btn-xs btn-remove" type="button">
                            <i class="bi bi-x"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 輸出資訊列 -->
            <div class="output-info">
                <div class="path">
                    <i class="bi bi-file-earmark-code"></i>
                    輸出: <code>output/avlist_output.html</code>
                </div>
                <a href="javascript:void(0)" class="settings-link">
                    <i class="bi bi-gear"></i> 設定
                </a>
            </div>

            <!-- Action 區（產生按鈕 + 完成按鈕）-->
            <div class="action-section">
                <button class="btn-hero btn-hero-primary" type="button">
                    <i class="bi bi-play-fill"></i> 產生網頁
                </button>
                <!-- 完成按鈕（展開狀態）-->
                <div class="done-actions" style="display: flex;">
                    <button class="btn-hero btn-hero-secondary" title="複製路徑" type="button">
                        <i class="bi bi-clipboard"></i> 複製路徑
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 空狀態展示 -->
    <h4 class="ds-variant-label">Empty State</h4>
    <div class="ds-card-demo" style="max-width: 700px; margin: 0 auto;">
        <div class="avlist-card">
            <div class="avlist-card-header">
                <div class="title">
                    <i class="bi bi-folder"></i> <span>掃描資料夾</span>
                </div>
                <div class="actions">
                    <button class="btn-icon" title="選擇資料夾" type="button">
                        <i class="bi bi-folder-plus"></i>
                    </button>
                    <button class="btn-icon" title="手動輸入" type="button">
                        <i class="bi bi-keyboard"></i>
                    </button>
                </div>
            </div>
            <div class="avlist-card-body">
                <div class="folder-list">
                    <div class="folder-empty">
                        <i class="bi bi-folder-plus"></i>
                        <p>尚未加入任何資料夾</p>
                        <p>點擊上方按鈕或拖曳資料夾至此</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 代碼展示 -->
    <pre class="ds-code"><code>&lt;div class="avlist-card"&gt;
  &lt;div class="avlist-card-header"&gt;
    &lt;div class="title"&gt;
      &lt;i class="bi bi-folder"&gt;&lt;/i&gt; &lt;span&gt;掃描資料夾&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="actions"&gt;
      &lt;button class="btn-icon"&gt;...&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="avlist-card-body"&gt;
    &lt;!-- 手動輸入列 --&gt;
    &lt;div class="manual-input"&gt;...&lt;/div&gt;

    &lt;!-- 資料夾列表 --&gt;
    &lt;div class="folder-list"&gt;
      &lt;div class="folder-item"&gt;...&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;!-- 輸出資訊 --&gt;
  &lt;div class="output-info"&gt;...&lt;/div&gt;

  &lt;!-- Hero 按鈕 --&gt;
  &lt;div class="action-section"&gt;
    &lt;button class="btn-hero btn-hero-primary"&gt;產生網頁&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>

<!-- D.7: Stats Card + NFO 更新 -->
<div class="ds-subsection">
    <h3>Stats Card + NFO Update</h3>
    <p class="ds-desc">Gallery 產生完成後的統計資訊與 NFO 補全提示區塊</p>

    <!-- 完整展示 -->
    <div class="ds-card-demo" style="max-width: 700px; margin: 0 auto;">
        <div class="stats-card">
            <!-- 統計列 -->
            <div class="stats-row">
                <div class="stat-item">
                    <i class="bi bi-collection-play"></i>
                    <span>快取影片: <span class="stat-value">1,234</span> 部</span>
                </div>
                <div class="stat-item">
                    <span>上次執行: 2026-01-15 10:30 (新增 23 部)</span>
                </div>
            </div>

            <!-- NFO 更新列 -->
            <div class="nfo-update-row">
                <span class="nfo-badge">
                    <i class="bi bi-exclamation-circle"></i>
                    需補全: <strong>15</strong> 部
                </span>
                <button class="btn-nfo-update" type="button">
                    <i class="bi bi-magic"></i> 補全 NFO
                </button>
            </div>

            <!-- Jellyfin 圖片補齊列 -->
            <div class="nfo-update-row">
                <span class="nfo-badge">
                    <i class="bi bi-image"></i>
                    需補齊圖片: <strong>8</strong> 部
                </span>
                <button class="btn-nfo-update" type="button">
                    <i class="bi bi-images"></i> 補齊圖片
                </button>
            </div>
        </div>
    </div>

    <!-- 按鈕三態展示 -->
    <h4 class="ds-variant-label">Button States</h4>
    <div class="ds-card-demo" style="display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;">
        <!-- Default 狀態 -->
        <div style="text-align: center;">
            <button class="btn-nfo-update" type="button">
                <i class="bi bi-magic"></i> 補全 NFO
            </button>
            <p style="margin-top: 0.5rem; font-size: 0.75rem; color: var(--text-secondary);">Default</p>
        </div>

        <!-- Loading 狀態 -->
        <div style="text-align: center;">
            <button class="btn-nfo-update" disabled type="button">
                <span class="loading loading-spinner loading-sm"></span> 補全中...
            </button>
            <p style="margin-top: 0.5rem; font-size: 0.75rem; color: var(--text-secondary);">Loading</p>
        </div>

        <!-- Completed 狀態 -->
        <div style="text-align: center;">
            <button class="btn-nfo-update completed" disabled type="button">
                <i class="bi bi-check-lg"></i> 已完成
            </button>
            <p style="margin-top: 0.5rem; font-size: 0.75rem; color: var(--text-secondary);">Completed</p>
        </div>
    </div>

    <!-- Jellyfin Image 按鈕三態 -->
    <h4 class="ds-variant-label" style="width: 100%; margin-top: 1rem;">Jellyfin Image Button States</h4>
    <div style="display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;">
        <div style="text-align: center;">
            <button class="btn-nfo-update" type="button">
                <i class="bi bi-images"></i> 補齊圖片
            </button>
            <p style="margin-top: 0.5rem; font-size: 0.75rem; color: var(--text-secondary);">Default</p>
        </div>
        <div style="text-align: center;">
            <button class="btn-nfo-update" disabled type="button">
                <span class="loading loading-spinner loading-sm"></span> 補齊中...
            </button>
            <p style="margin-top: 0.5rem; font-size: 0.75rem; color: var(--text-secondary);">Loading</p>
        </div>
        <div style="text-align: center;">
            <button class="btn-nfo-update completed" disabled type="button">
                <i class="bi bi-check-lg"></i> 已完成
            </button>
            <p style="margin-top: 0.5rem; font-size: 0.75rem; color: var(--text-secondary);">Completed</p>
        </div>
    </div>

    <!-- 代碼展示 -->
    <pre class="ds-code"><code>&lt;div class="stats-card"&gt;
  &lt;div class="stats-row"&gt;
    &lt;div class="stat-item"&gt;
      &lt;i class="bi bi-collection-play"&gt;&lt;/i&gt;
      &lt;span&gt;快取影片: &lt;span class="stat-value"&gt;1,234&lt;/span&gt; 部&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="stat-item"&gt;
      &lt;span&gt;上次執行: 2026-01-15 10:30&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="nfo-update-row"&gt;
    &lt;span class="nfo-badge"&gt;
      &lt;i class="bi bi-exclamation-circle"&gt;&lt;/i&gt;
      需補全: &lt;strong&gt;15&lt;/strong&gt; 部
    &lt;/span&gt;
    &lt;button class="btn-nfo-update"&gt;
      &lt;i class="bi bi-magic"&gt;&lt;/i&gt; 補全 NFO
    &lt;/button&gt;
  &lt;/div&gt;

  &lt;!-- Jellyfin Image Row --&gt;
  &lt;div class="nfo-update-row"&gt;
    &lt;span class="nfo-badge"&gt;
      &lt;i class="bi bi-image"&gt;&lt;/i&gt;
      需補齊圖片: &lt;strong&gt;8&lt;/strong&gt; 部
    &lt;/span&gt;
    &lt;button class="btn-nfo-update"&gt;
      &lt;i class="bi bi-images"&gt;&lt;/i&gt; 補齊圖片
    &lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>

<!-- D.8: 女優別名管理卡片 -->
<div class="ds-subsection">
    <h3>Actress Alias Management Card</h3>
    <p class="ds-desc">女優名稱對照管理，用於統一不同別名/英文名/舊名</p>

    <!-- 完整展開展示 -->
    <div class="ds-card-demo" style="max-width: 700px; margin: 0 auto;" x-data="{ open: true }">
        <div class="actress-alias-card">
            <!-- Header: 可點擊收合 -->
            <div class="actress-alias-header" @click="open = !open" style="cursor: pointer;">
                <div class="title">
                    <i class="bi bi-person-circle"></i> <span>女優名稱管理</span>
                </div>
                <button class="btn-icon btn-collapse" title="展開/收起" type="button">
                    <i class="bi" :class="open ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                </button>
            </div>

            <div class="actress-alias-body" x-show="open" x-transition>
                <!-- Add New Alias Form -->
                <div class="alias-form">
                    <div class="alias-form-row">
                        <div class="alias-input-group">
                            <label>舊名稱</label>
                            <input type="text" class="input input-bordered input-sm" placeholder="例：高橋しょう子" value="高橋しょう子">
                            <span class="alias-count">23 部</span>
                        </div>
                        <span class="alias-arrow"><i class="bi bi-arrow-right"></i></span>
                        <div class="alias-input-group">
                            <label>新名稱</label>
                            <input type="text" class="input input-bordered input-sm" placeholder="例：高橋聖子" value="高橋聖子">
                            <span class="alias-count">0 部</span>
                        </div>
                        <button class="btn-alias-add" type="button">
                            <i class="bi bi-plus-lg"></i>
                        </button>
                    </div>
                    <div class="alias-preview">
                        <i class="bi bi-info-circle"></i> 將有 23 部影片的 "高橋しょう子" 改為 "高橋聖子"
                    </div>
                </div>

                <!-- Alias List -->
                <div class="alias-list">
                    <div class="alias-item">
                        <span class="alias-old">miru</span>
                        <span class="alias-arrow"><i class="bi bi-arrow-right"></i></span>
                        <span class="alias-new">坂道みる</span>
                        <span class="alias-applied">(已套用 15)</span>
                        <button class="btn-alias-delete" title="刪除" type="button">
                            <i class="bi bi-x-lg"></i>
                        </button>
                    </div>
                    <div class="alias-item">
                        <span class="alias-old">aika</span>
                        <span class="alias-arrow"><i class="bi bi-arrow-right"></i></span>
                        <span class="alias-new">AIKA</span>
                        <span class="alias-applied">(已套用 8)</span>
                        <button class="btn-alias-delete" title="刪除" type="button">
                            <i class="bi bi-x-lg"></i>
                        </button>
                    </div>
                    <div class="alias-item">
                        <span class="alias-old">高橋しょう子</span>
                        <span class="alias-arrow"><i class="bi bi-arrow-right"></i></span>
                        <span class="alias-new">高橋聖子</span>
                        <span class="alias-applied">(已套用 23)</span>
                        <button class="btn-alias-delete" title="刪除" type="button">
                            <i class="bi bi-x-lg"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 收合狀態展示 -->
    <h4 class="ds-variant-label">Collapsed State</h4>
    <div class="ds-card-demo" style="max-width: 700px; margin: 0 auto;" x-data="{ open: false }">
        <div class="actress-alias-card">
            <div class="actress-alias-header" @click="open = !open" style="cursor: pointer;">
                <div class="title">
                    <i class="bi bi-person-circle"></i> <span>女優名稱管理</span>
                </div>
                <button class="btn-icon btn-collapse" title="展開/收起" type="button">
                    <i class="bi" :class="open ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                </button>
            </div>
            <div class="actress-alias-body" x-show="open" x-transition></div>
        </div>
    </div>

    <!-- 空狀態展示 -->
    <h4 class="ds-variant-label">Empty State</h4>
    <div class="ds-card-demo" style="max-width: 700px; margin: 0 auto;" x-data="{ open: true }">
        <div class="actress-alias-card">
            <div class="actress-alias-header" @click="open = !open" style="cursor: pointer;">
                <div class="title">
                    <i class="bi bi-person-circle"></i> <span>女優名稱管理</span>
                </div>
                <button class="btn-icon btn-collapse" title="展開/收起" type="button">
                    <i class="bi" :class="open ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                </button>
            </div>
            <div class="actress-alias-body" x-show="open" x-transition>
                <div class="alias-form">
                    <div class="alias-form-row">
                        <div class="alias-input-group">
                            <label>舊名稱</label>
                            <input type="text" class="input input-bordered input-sm" placeholder="例：miru">
                            <span class="alias-count"></span>
                        </div>
                        <span class="alias-arrow"><i class="bi bi-arrow-right"></i></span>
                        <div class="alias-input-group">
                            <label>新名稱</label>
                            <input type="text" class="input input-bordered input-sm" placeholder="例：坂道みる">
                            <span class="alias-count"></span>
                        </div>
                        <button class="btn-alias-add" type="button">
                            <i class="bi bi-plus-lg"></i>
                        </button>
                    </div>
                    <div class="alias-preview"></div>
                </div>
                <div class="alias-list">
                    <div class="alias-list-empty">尚無別名對照</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 代碼展示 -->
    <pre class="ds-code"><code>&lt;div class="actress-alias-card"&gt;
  &lt;div class="actress-alias-header"&gt;
    &lt;div class="title"&gt;
      &lt;i class="bi bi-person-badge"&gt;&lt;/i&gt; &lt;span&gt;女優名稱管理&lt;/span&gt;
    &lt;/div&gt;
    &lt;button class="btn-icon btn-collapse"&gt;
      &lt;i class="bi bi-chevron-down"&gt;&lt;/i&gt;
    &lt;/button&gt;
  &lt;/div&gt;

  &lt;div class="actress-alias-body"&gt;
    &lt;!-- Alias Form --&gt;
    &lt;div class="alias-form"&gt;
      &lt;div class="alias-form-row"&gt;
        &lt;div class="alias-input-group"&gt;
          &lt;label&gt;舊名稱&lt;/label&gt;
          &lt;input class="input input-bordered input-sm"&gt;
          &lt;span class="alias-count"&gt;23 部&lt;/span&gt;
        &lt;/div&gt;
        &lt;span class="alias-arrow"&gt;→&lt;/span&gt;
        &lt;div class="alias-input-group"&gt;
          &lt;label&gt;新名稱&lt;/label&gt;
          &lt;input class="input input-bordered input-sm"&gt;
        &lt;/div&gt;
        &lt;button class="btn-alias-add"&gt;+&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Alias List --&gt;
    &lt;div class="alias-list"&gt;
      &lt;div class="alias-item"&gt;
        &lt;span class="alias-old"&gt;miru&lt;/span&gt;
        &lt;span class="alias-arrow"&gt;→&lt;/span&gt;
        &lt;span class="alias-new"&gt;坂道みる&lt;/span&gt;
        &lt;span class="alias-applied"&gt;(已套用 15)&lt;/span&gt;
        &lt;button class="btn-alias-delete"&gt;×&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
