{{define "modals"}}
<div id="cookieModal" class="modal-overlay settings-modal-overlay" style="z-index: 1001;">
    <div class="modal settings-modal">
        <div class="modal-header">
            <div>
                <h3>系统设置</h3>
                <p class="settings-modal-subtitle">分类管理播放体验、下载同步与平台 Cookie</p>
            </div>
            <div class="modal-close" onclick="document.getElementById('cookieModal').style.display='none'"><i class="fa-solid fa-xmark"></i></div>
        </div>
        <div class="modal-body settings-modal-body">
            <div class="settings-tabs" role="tablist" aria-label="设置分类">
                <button type="button" id="settings-tab-general" class="settings-tab is-active" role="tab" aria-selected="true" aria-controls="settings-panel-general" data-settings-tab="general">
                    <i class="fa-solid fa-sliders"></i> 常规
                </button>
                <button type="button" id="settings-tab-download" class="settings-tab" role="tab" aria-selected="false" aria-controls="settings-panel-download" data-settings-tab="download" tabindex="-1">
                    <i class="fa-solid fa-download"></i> 下载与同步
                </button>
                <button type="button" id="settings-tab-cookies" class="settings-tab" role="tab" aria-selected="false" aria-controls="settings-panel-cookies" data-settings-tab="cookies" tabindex="-1">
                    <i class="fa-solid fa-cookie-bite"></i> 平台 Cookie
                </button>
            </div>

            <section id="settings-panel-general" class="settings-tab-panel" role="tabpanel" aria-labelledby="settings-tab-general" data-settings-panel="general">
                <div class="cookie-item setting-item">
                    <label class="setting-toggle" for="setting-floating-lyrics">
                        <input type="checkbox" id="setting-floating-lyrics">
                        <span class="setting-switch" aria-hidden="true"></span>
                        <span class="setting-toggle-text">播放音乐时显示悬浮歌词</span>
                    </label>
                    <p class="setting-hint">关闭后，播放音乐时不显示底部悬浮歌词。</p>
                </div>
                <div class="cookie-item">
                    <label for="setting-web-page-size">Web 每页条数</label>
                    <select id="setting-web-page-size" aria-label="Web 每页条数">
                        <option value="30">30 条/页</option>
                        <option value="100">100 条/页</option>
                        <option value="200" selected>200 条/页（默认）</option>
                        <option value="300">300 条/页</option>
                        <option value="400">400 条/页</option>
                        <option value="500">500 条/页</option>
                    </select>
                    <p class="setting-hint" style="margin-left: 0;">搜索结果列表每页显示的歌曲数量，默认 200。</p>
                </div>
                <div class="cookie-item">
                    <label for="setting-cli-page-size">CLI 每页条数</label>
                    <input type="number" id="setting-cli-page-size" min="1" max="200" step="1" placeholder="默认 20">
                    <p class="setting-hint" style="margin-left: 0;">用于 TUI 分页显示，默认 20。</p>
                </div>
                <div class="cookie-item setting-item">
                    <label class="setting-toggle" for="setting-auto-switch-invalid-sources">
                        <input type="checkbox" id="setting-auto-switch-invalid-sources">
                        <span class="setting-switch" aria-hidden="true"></span>
                        <span class="setting-toggle-text">自动选择无效音源并批量换源</span>
                    </label>
                    <p class="setting-hint">音乐列表检测完成后，会自动选中当前列表全部无效歌曲并执行批量换源，默认开启。</p>
                </div>
                <button type="button" class="cookie-item setting-item setting-link-row" onclick="openAboutAppModal()">
                    <span class="setting-link-icon"><i class="fa-solid fa-circle-info"></i></span>
                    <span class="setting-link-body">
                        <span class="setting-link-title">关于 go-music-dl</span>
                        <span class="setting-link-desc">查看当前版本并检查 GitHub 是否有新版</span>
                    </span>
                    <i class="fa-solid fa-chevron-right setting-link-chevron" aria-hidden="true"></i>
                </button>
                <div class="cookie-item setting-item">
                    <label class="setting-toggle" for="setting-vg-change-cover">
                        <input type="checkbox" id="setting-vg-change-cover">
                        <span class="setting-switch" aria-hidden="true"></span>
                        <span class="setting-toggle-text">显示“更换封面/背景”按钮</span>
                    </label>
                    <p class="setting-hint">控制视频生成弹窗中的本地封面/背景替换入口，默认隐藏。</p>
                </div>
                <div class="cookie-item setting-item">
                    <label class="setting-toggle" for="setting-vg-change-audio">
                        <input type="checkbox" id="setting-vg-change-audio">
                        <span class="setting-switch" aria-hidden="true"></span>
                        <span class="setting-toggle-text">显示“更换音频”按钮</span>
                    </label>
                    <p class="setting-hint">控制视频生成弹窗中的本地音频替换入口，默认隐藏。</p>
                </div>
                <div class="cookie-item setting-item">
                    <label class="setting-toggle" for="setting-vg-change-lyric">
                        <input type="checkbox" id="setting-vg-change-lyric">
                        <span class="setting-switch" aria-hidden="true"></span>
                        <span class="setting-toggle-text">显示“更换歌词”按钮</span>
                    </label>
                    <p class="setting-hint">控制视频生成弹窗中的本地歌词替换入口，默认隐藏。</p>
                </div>
                <div class="cookie-item setting-item">
                    <label class="setting-toggle" for="setting-vg-export-video">
                        <input type="checkbox" id="setting-vg-export-video">
                        <span class="setting-switch" aria-hidden="true"></span>
                        <span class="setting-toggle-text">显示“导出视频”按钮</span>
                    </label>
                    <p class="setting-hint">控制视频生成弹窗中的导出视频入口，默认隐藏。</p>
                </div>
            </section>

            <section id="settings-panel-download" class="settings-tab-panel" role="tabpanel" aria-labelledby="settings-tab-download" data-settings-panel="download" hidden>
                <div class="cookie-item setting-item">
                    <label class="setting-toggle" for="setting-embed-download">
                        <input type="checkbox" id="setting-embed-download">
                        <span class="setting-switch" aria-hidden="true"></span>
                        <span class="setting-toggle-text">下载时内嵌元数据（封面、歌词）</span>
                    </label>
                    <p class="setting-hint">影响“保存到本地目录”和“浏览器下载”两种方式；播放始终使用流式下载，不内嵌元数据。</p>
                </div>
                <div class="cookie-item">
                    <label for="setting-download-dir">本地下载目录</label>
                    <div class="download-dir-control">
                        <select id="setting-download-dir-preset" aria-label="本地下载目录预设" aria-describedby="setting-download-dir-hint">
                            <option value="data/downloads">PC 默认：data/downloads</option>
                            <option value="downloads">PC 简洁：downloads</option>
                            <option value="D:/Music/Downloads">PC 示例：D:/Music/Downloads</option>
                            <option value="/home/appuser/data">Docker 默认：/home/appuser/data</option>
                            <option value="/sdcard/Music">Android 默认：/sdcard/Music</option>
                            <option value="/storage/emulated/0/Music">Android 兼容：/storage/emulated/0/Music</option>
                            <option value="/sdcard/Download">Android 下载：/sdcard/Download</option>
                            <option value="__custom__">自定义目录...</option>
                        </select>
                        <div style="display:flex;gap:6px;align-items:center;">
                            <input type="text" id="setting-download-dir" aria-describedby="setting-download-dir-hint" placeholder="例如: data/downloads、D:/Music/Downloads 或 /sdcard/Music" style="flex:1;">
                            <button type="button" class="btn-pill" onclick="pickDownloadFolder()" title="选择文件夹" style="white-space:nowrap;font-size:12px;padding:4px 10px;">
                                <i class="fa-solid fa-folder-open"></i>
                            </button>
                        </div>
                    </div>
                    <p id="setting-download-dir-hint" class="setting-hint" style="margin-left: 0;">选择预设会自动填入路径，也可以手填相对目录或绝对目录。Docker 部署推荐 <code>/home/appuser/data</code>。</p>
                </div>
                <div class="cookie-item">
                    <label for="setting-download-filename-template">音乐文件名模板</label>
                    <input type="text" id="setting-download-filename-template" placeholder="{artist} - {name}">
                    <p class="setting-hint" style="margin-left: 0;">支持 <code>{name}</code>、<code>{artist}</code>、<code>{album}</code>、<code>{source}</code>、<code>{id}</code>、<code>{ext}</code>。未写 <code>{ext}</code> 时会自动追加扩展名；可用 <code>/</code> 或 <code>\</code> 创建相对子目录，例如 <code>{artist}/{album}/{name} - {artist}.{ext}</code>。</p>
                </div>
                <div class="cookie-item">
                    <label for="setting-download-tip-duration">下载提示显示时长</label>
                    <select id="setting-download-tip-duration" aria-label="下载提示显示时长">
                        <option value="3">3 秒</option>
                        <option value="5">5 秒</option>
                        <option value="8" selected>8 秒（默认）</option>
                        <option value="10">10 秒</option>
                        <option value="15">15 秒</option>
                        <option value="30">30 秒</option>
                    </select>
                    <p class="setting-hint" style="margin-left: 0;">下载完成、失败和批量下载提示会自动关闭，仍可随时手动关闭。</p>
                </div>
                <div class="cookie-item setting-item">
                    <label class="setting-toggle" for="setting-auto-cache-on-play">
                        <input type="checkbox" id="setting-auto-cache-on-play">
                        <span class="setting-switch" aria-hidden="true"></span>
                        <span class="setting-toggle-text">播放时自动缓存本地音乐</span>
                    </label>
                    <p class="setting-hint">开启后，在线歌曲开始播放时会后台保存到本地下载目录；默认关闭，避免持续占用储存空间。</p>
                </div>
                <button type="button" class="cookie-item setting-item setting-link-row" onclick="openDownloadRecordsModal()">
                    <span class="setting-link-icon"><i class="fa-solid fa-clock-rotate-left"></i></span>
                    <span class="setting-link-body">
                        <span class="setting-link-title">下载记录</span>
                        <span class="setting-link-desc">查看下载任务历史（成功 / 跳过 / 失败）</span>
                    </span>
                    <i class="fa-solid fa-chevron-right setting-link-chevron" aria-hidden="true"></i>
                </button>
                <div class="cookie-item setting-item">
                    <label class="setting-toggle" for="setting-webdav-enabled">
                        <input type="checkbox" id="setting-webdav-enabled">
                        <span class="setting-switch" aria-hidden="true"></span>
                        <span class="setting-toggle-text">下载时同步到 WebDAV</span>
                    </label>
                    <p class="setting-hint">保存到本地目录或浏览器下载时，同时上传到已配置的 WebDAV。</p>
                </div>
                <div id="webdav-settings-fields" style="display: none;">
                    <div class="cookie-item">
                        <label for="setting-webdav-url">WebDAV 地址</label>
                        <input type="url" id="setting-webdav-url" placeholder="http://127.0.0.1:18081/dav" autocomplete="off">
                        <p class="setting-hint" style="margin-left: 0;">测试示例：<code>http://127.0.0.1:18081/dav</code>，不需要域名。</p>
                    </div>
                    <div class="cookie-item">
                        <label for="setting-webdav-username">用户名</label>
                        <input type="text" id="setting-webdav-username" autocomplete="username">
                    </div>
                    <div class="cookie-item">
                        <label for="setting-webdav-password">密码</label>
                        <input type="password" id="setting-webdav-password" autocomplete="new-password" placeholder="留空则保留已保存密码">
                        <p class="setting-hint" style="margin-left: 0;">密码只保存在服务器配置中，不会回显到页面。</p>
                    </div>
                    <div class="cookie-item">
                        <label for="setting-webdav-dir">远端目录</label>
                        <input type="text" id="setting-webdav-dir" value="music-dl" placeholder="music-dl">
                        <p class="setting-hint" style="margin-left: 0;">上传到 WebDAV 下的子目录，默认 <code>music-dl</code>。</p>
                    </div>
                </div>
            </section>

            <section id="settings-panel-cookies" class="settings-tab-panel" role="tabpanel" aria-labelledby="settings-tab-cookies" data-settings-panel="cookies" hidden>
                <p class="settings-panel-hint">Cookie 只保存在当前服务器的配置库中。平台登录后通常可获得更完整的音质和歌单信息。</p>
                <div class="cookie-list">
                    {{ range $source := .AllSources }}
                    <div class="cookie-item">
                        <label>{{ $source }}</label>
                        <div class="cookie-input-row">
                            <input type="text" id="cookie-{{$source}}" placeholder="在此粘贴 Cookie...">
                            {{ if eq $source "qq" }}
                            {{ if index $.QRLoginSupported "qq" }}
                            <button type="button" class="cookie-qr-btn" onclick="startQRLogin('qq')"><i class="fa-brands fa-qq"></i> QQ扫码</button>
                            {{ end }}
                            {{ if index $.QRLoginSupported "qq_wx" }}
                            <button type="button" class="cookie-qr-btn cookie-qr-btn-wx" onclick="startQRLogin('qq_wx')"><i class="fa-brands fa-weixin"></i> 微信扫码</button>
                            {{ end }}
                            {{ else }}
                            {{ if index $.QRLoginSupported $source }}
                            <button type="button" class="cookie-qr-btn" onclick="startQRLogin('{{$source}}')"><i class="fa-solid fa-qrcode"></i> 扫码</button>
                            {{ end }}
                            {{ end }}
                        </div>
                    </div>
                    {{ end }}
                </div>
            </section>

            <div class="settings-save-bar">
                <button type="button" class="btn-save" onclick="saveCookies()">保存设置</button>
            </div>
        </div>
    </div>
</div>

<div id="appUpdateModal" class="modal-overlay" style="z-index: 1008;">
    <div class="modal app-update-modal">
        <div class="modal-header">
            <div>
                <h3 id="appUpdateTitle">检查更新</h3>
                <p id="appUpdateSummary" class="app-update-summary">正在读取 GitHub 版本信息</p>
            </div>
            <div class="modal-close" onclick="closeUpdateModal()"><i class="fa-solid fa-xmark"></i></div>
        </div>
        <div class="modal-body">
            <span id="updateCheckStatus" class="setting-inline-status"></span>
            <div class="update-modal-actions">
                <button type="button" class="btn-pill btn-pill-dl" onclick="closeUpdateModal()">关闭</button>
                <button type="button" id="appUpdateOpenRepoBtn" class="btn-pill btn-pill-primary" onclick="openLatestUpdatePage('release')"><i class="fa-solid fa-arrow-up-right-from-square"></i> 打开发布页</button>
            </div>
        </div>
    </div>
</div>

<div id="qrLoginModal" class="modal-overlay" style="z-index: 1007;">
    <div class="modal qr-login-modal">
        <div class="modal-header">
            <h3 id="qrLoginTitle">扫码登录</h3>
            <div class="modal-close" onclick="closeQRLoginModal()"><i class="fa-solid fa-xmark"></i></div>
        </div>
        <div class="modal-body">
            <div class="qr-login-card">
                <div class="qr-login-frame">
                    <canvas id="qrLoginCanvas" width="260" height="260"></canvas>
                    <img id="qrLoginImage" class="qr-login-image" alt="扫码登录二维码">
                    <div id="qrLoginLoading" class="qr-login-loading">正在生成二维码...</div>
                </div>
                <div id="qrLoginStatus" class="qr-login-status">请稍候</div>
                <div id="qrLoginSMSPanel" class="qr-login-sms" style="display: none;">
                    <div class="qr-login-sms-row">
                        <input id="qrLoginSMSCode" class="qr-login-sms-input" type="text" inputmode="numeric" maxlength="8" placeholder="输入验证码">
                        <button id="qrLoginSendSMSBtn" type="button" class="btn-pill btn-pill-primary" onclick="sendSodaSMSCode()">发送验证码</button>
                    </div>
                    <button id="qrLoginValidateSMSBtn" type="button" class="btn-pill btn-pill-dl qr-login-sms-submit" onclick="validateSodaSMSCode()">确认登录</button>
                </div>
                <div class="qr-login-actions">
                    <button type="button" class="btn-pill btn-pill-primary" onclick="restartQRLogin()"><i class="fa-solid fa-rotate-right"></i> 刷新二维码</button>
                    <button type="button" class="btn-pill btn-pill-dl" onclick="closeQRLoginModal()">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="editCollectionModal" class="modal-overlay" style="z-index: 1005;">
    <div class="modal" style="max-width: 400px;">
        <div class="modal-header">
            <h3 id="editColTitle">新建歌单</h3>
            <div class="modal-close" onclick="document.getElementById('editCollectionModal').style.display='none'"><i class="fa-solid fa-xmark"></i></div>
        </div>
        <div class="modal-body">
            <input type="hidden" id="editColId">
            <div class="cookie-item">
                <label>歌单名称 <span style="color:#e53e3e;">*</span></label>
                <input type="text" id="editColName" placeholder="例如: 睡前听的歌" maxlength="30">
            </div>
            <div class="cookie-item">
                <label>描述</label>
                <input type="text" id="editColDesc" placeholder="简单描述一下...">
            </div>
            <div class="cookie-item">
                <label>封面图片 (URL)</label>
                <input type="text" id="editColCover" placeholder="留空则自动生成随机封面">
            </div>
            <button type="button" class="btn-save" onclick="saveCollection()">保存歌单</button>
        </div>
    </div>
</div>

<div id="addToCollectionModal" class="modal-overlay" style="z-index: 1004;">
    <div class="modal" style="max-width: 400px;">
        <div class="modal-header">
            <h3>收藏到我的歌单</h3>
            <div class="modal-close" onclick="document.getElementById('addToCollectionModal').style.display='none'"><i class="fa-solid fa-xmark"></i></div>
        </div>
        <div class="modal-body">
            <div style="margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center;">
                <span style="font-size: 14px; color: var(--text-sub);">选择或管理歌单</span>
                <button class="btn-pill btn-pill-primary" style="padding: 6px 12px; font-size: 12px;" onclick="showEditCollectionModal()">
                    <i class="fa-solid fa-plus"></i> 新建
                </button>
            </div>
            <div id="addColList"></div>
        </div>
    </div>
</div>
<!-- 下载记录弹窗 -->
<div id="downloadRecordsModal" class="modal-overlay utility-modal-overlay">
    <div class="modal utility-modal download-records-modal">
        <div class="modal-header">
            <div>
                <h3><i class="fa-solid fa-clock-rotate-left"></i> 下载记录</h3>
                <p class="download-records-subtitle">最近的下载、跳过和失败记录</p>
            </div>
            <div class="modal-close" onclick="closeDownloadRecordsModal()"><i class="fa-solid fa-xmark"></i></div>
        </div>
        <div class="modal-body">
            <div class="utility-modal-toolbar download-records-toolbar">
                <span id="download-records-count" class="utility-modal-count download-records-count">加载中...</span>
                <div class="utility-modal-actions download-records-actions">
                    <button type="button" class="btn-pill" onclick="openLocalMusicPage()">
                        <i class="fa-solid fa-folder-plus"></i> 本地音乐
                    </button>
                    <button type="button" class="btn-pill btn-pill-danger" onclick="clearDownloadRecords()">
                        <i class="fa-solid fa-trash-can"></i> 清空记录
                    </button>
                </div>
            </div>
            <div id="download-records-list" class="utility-modal-list download-records-list"></div>
            <nav id="download-records-pagination" class="utility-modal-pagination" aria-label="下载记录分页"></nav>
        </div>
    </div>
</div>

<!-- 播放历史弹窗 -->
<div id="playbackHistoryModal" class="modal-overlay utility-modal-overlay">
    <div class="modal utility-modal playback-history-modal">
        <div class="modal-header">
            <div>
                <h3><i class="fa-solid fa-clock"></i> 播放历史</h3>
                <p class="utility-modal-subtitle">此设备最近播放过的歌曲</p>
            </div>
            <div class="modal-close" onclick="closePlaybackHistoryModal()"><i class="fa-solid fa-xmark"></i></div>
        </div>
        <div class="modal-body">
            <div class="utility-modal-toolbar">
                <span id="playback-history-count" class="utility-modal-count">暂无播放记录</span>
                <div class="utility-modal-actions">
                    <button type="button" class="btn-pill btn-pill-danger" onclick="clearPlaybackHistory()">
                        <i class="fa-solid fa-trash-can"></i> 清空历史
                    </button>
                </div>
            </div>
            <div id="playback-history-list" class="utility-modal-list playback-history-list"></div>
            <nav id="playback-history-pagination" class="utility-modal-pagination" aria-label="播放历史分页"></nav>
        </div>
    </div>
</div>

{{end}}