{{define "browser-check"}}
<!-- 浏览器检测组件 -->

<div id="browserWarning" class="browser-warning">
    <div class="browser-warning-content">
        <div class="browser-warning-left">
            <div class="browser-warning-icon">⚠️</div>
            <div class="browser-warning-text">
                <div class="browser-warning-title">Browser compatibility</div>
                <div class="browser-warning-desc" id="browserWarningDesc">
                    Your browser may be outdated and some features may not work. We recommend upgrading or using a modern browser.
                </div>
            </div>
        </div>
        <div class="browser-warning-actions">
            <a href="https://www.google.com/chrome/" target="_blank" class="browser-warning-btn">
                <i class='bx bx-download'></i>
                Download Chrome
            </a>
            <a href="https://www.microsoft.com/edge" target="_blank" class="browser-warning-btn">
                <i class='bx bx-download'></i>
                Download Edge
            </a>
            <a href="https://www.mozilla.org/firefox/" target="_blank" class="browser-warning-btn">
                <i class='bx bx-download'></i>
                Download Firefox
            </a>
            <button class="browser-warning-close" onclick="closeBrowserWarning()" title="Dismiss">
                <i class='bx bx-x'></i>
            </button>
        </div>
    </div>
</div>

<script>
    // 浏览器检测函数
    function detectBrowser() {
        const userAgent = navigator.userAgent.toLowerCase();
        
        // 检测IE浏览器（已过时，不支持）
        if (/msie|trident/.test(userAgent)) {
            const ieVersion = userAgent.match(/msie (\d+)/);
            const tridentVersion = userAgent.match(/trident\/(\d+)/);
            let version = 0;
            if (ieVersion) {
                version = parseInt(ieVersion[1]);
            } else if (tridentVersion) {
                // Trident版本对应IE版本：Trident 7 = IE11
                version = parseInt(tridentVersion[1]) === 7 ? 11 : 10;
            }
            return { 
                isCompatible: false, 
                name: 'Internet Explorer',
                version: version,
                reason: 'Internet Explorer is no longer supported. Please use a modern browser.'
            };
        }
        
        // 检测Chrome浏览器版本
        if (/chrome/.test(userAgent) && !/edge|edg|opr/.test(userAgent)) {
            const chromeMatch = userAgent.match(/chrome\/(\d+)/);
            if (chromeMatch) {
                const version = parseInt(chromeMatch[1]);
                // Chrome 90+ 认为是现代版本
                if (version < 90) {
                    return { 
                        isCompatible: false, 
                        name: 'Chrome',
                        version: version,
                        reason: 'Your Chrome version is outdated. Please upgrade to the latest version.'
                    };
                }
            }
            return { isCompatible: true, name: 'Chrome' };
        }
        
        // 检测Edge浏览器版本
        if (/edge|edg/.test(userAgent)) {
            const edgeMatch = userAgent.match(/edg[ea]?\/(\d+)/);
            if (edgeMatch) {
                const version = parseInt(edgeMatch[1]);
                // Edge 90+ 认为是现代版本
                if (version < 90) {
                    return { 
                        isCompatible: false, 
                        name: 'Edge',
                        version: version,
                        reason: 'Your Edge version is outdated. Please upgrade to the latest version.'
                    };
                }
            }
            return { isCompatible: true, name: 'Edge' };
        }
        
        // 检测Firefox浏览器版本
        if (/firefox/.test(userAgent)) {
            const firefoxMatch = userAgent.match(/firefox\/(\d+)/);
            if (firefoxMatch) {
                const version = parseInt(firefoxMatch[1]);
                // Firefox 88+ 认为是现代版本
                if (version < 88) {
                    return { 
                        isCompatible: false, 
                        name: 'Firefox',
                        version: version,
                        reason: 'Your Firefox version is outdated. Please upgrade to the latest version.'
                    };
                }
            }
            return { isCompatible: true, name: 'Firefox' };
        }
        
        // 检测Safari浏览器版本（允许使用）
        if (/safari/.test(userAgent) && !/chrome/.test(userAgent)) {
            const safariMatch = userAgent.match(/version\/(\d+)/);
            if (safariMatch) {
                const version = parseInt(safariMatch[1]);
                // Safari 14+ 认为是现代版本
                if (version < 14) {
                    return { 
                        isCompatible: false, 
                        name: 'Safari',
                        version: version,
                        reason: 'Your Safari version is outdated. Please upgrade to the latest version.'
                    };
                }
            }
            return { isCompatible: true, name: 'Safari' };
        }
        
        // 检测Opera浏览器
        if (/opr/.test(userAgent)) {
            const operaMatch = userAgent.match(/opr\/(\d+)/);
            if (operaMatch) {
                const version = parseInt(operaMatch[1]);
                if (version < 76) {
                    return { 
                        isCompatible: false, 
                        name: 'Opera',
                        version: version,
                        reason: 'Your Opera version is outdated. Please upgrade to the latest version.'
                    };
                }
            }
            return { isCompatible: true, name: 'Opera' };
        }
        
        // 其他现代浏览器，默认兼容
        return { isCompatible: true, name: 'Modern Browser' };
    }
    
    // 关闭警告提示
    function closeBrowserWarning() {
        const warning = document.getElementById('browserWarning');
        if (warning) {
            warning.style.animation = 'slideUp 0.3s ease-out';
            setTimeout(() => {
                warning.classList.remove('show');
                // 保存用户选择，24小时内不再显示
                localStorage.setItem('browserWarningClosed', Date.now().toString());
            }, 300);
        }
    }
    
    // 检查是否应该显示警告
    function shouldShowWarning() {
        // 检查用户是否在24小时内关闭过提示
        const closedTime = localStorage.getItem('browserWarningClosed');
        if (closedTime) {
            const timeDiff = Date.now() - parseInt(closedTime);
            const hours24 = 24 * 60 * 60 * 1000;
            if (timeDiff < hours24) {
                return false;
            }
        }
        return true;
    }
    
    // 初始化浏览器检测
    function initBrowserCheck() {
        const browser = detectBrowser();
        
        // 如果浏览器不兼容，且用户没有关闭过提示，则显示警告
        if (!browser.isCompatible && shouldShowWarning()) {
            const warning = document.getElementById('browserWarning');
            if (warning) {
                // 更新提示文本，显示检测到的浏览器名称和原因
                const descElement = document.getElementById('browserWarningDesc');
                if (descElement) {
                    let message = browser.reason || 'Your browser may be outdated and some features may not work.';
                    if (browser.version) {
                        message = `You are using ${browser.name} ${browser.version}. ${message}`;
                    } else {
                        message = `You are using ${browser.name}. ${message}`;
                    }
                    message += ' We recommend upgrading or using a modern browser (Chrome, Edge, Firefox, Safari, etc.).';
                    descElement.textContent = message;
                }
                
                warning.classList.add('show');
                
                // 添加 slideUp 动画（用于关闭时）
                const style = document.createElement('style');
                style.textContent = `
                    @keyframes slideUp {
                        from {
                            transform: translateY(0);
                            opacity: 1;
                        }
                        to {
                            transform: translateY(-100%);
                            opacity: 0;
                        }
                    }
                `;
                document.head.appendChild(style);
            }
        }
    }
    
    // 页面加载完成后执行检测
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initBrowserCheck);
    } else {
        initBrowserCheck();
    }
</script>
{{end}}