<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ filename }} - 代码查看器</title>
    <link rel="stylesheet" href="/static/lib/highlight-default.min.css">
    <style>
        body { margin: 0; padding: 0; font-family: 'Courier New', monospace; background-color: #f8f9fa; }
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white; padding: 0.4rem 0.5rem; position: sticky; top: 0; z-index: 100;
            display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.3rem;
        }
        .header-buttons { display: flex; gap: 0.3rem; flex-wrap: wrap; }
        .back-btn, .edit-btn, .download-btn {
            padding: 0.3rem 0.5rem; background-color: rgba(255,255,255,0.2); color: white;
            text-decoration: none; border-radius: 4px; font-size: 0.8rem;
        }
        .back-btn:hover, .edit-btn:hover, .download-btn:hover { background-color: rgba(255,255,255,0.3); }
        .code-container { padding: 0.5rem; overflow-x: auto; }
        pre { margin: 0; padding: 0.5rem; background-color: white; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        code { font-family: 'Courier New', monospace; font-size: var(--global-font-size, 13px); line-height: 1.4; }
        .line-number {
            display: inline-block; min-width: 40px; padding-right: 10px; text-align: right;
            color: #6e7781; background: #f6f8fa; cursor: pointer; user-select: none;
            border-right: 1px solid #d0d7de; margin-right: 10px;
        }
        .line-number:hover { color: #0969da; background: #ddf4ff; }
    </style>
</head>
<body>
    <div class="header">
        <a href="#" class="back-btn" onclick="history.back(); return false;">←</a>
        <h1 style="margin: 0; font-size: 0.95rem; flex-grow: 1; text-align: center; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ filename }}</h1>
        <div class="header-buttons">
            <a href="{{ url_for('edit.edit_file', path=file_path) }}" class="edit-btn">✏️</a>
            <a href="{{ url_for('file.download_file', path=file_path) }}" class="download-btn">📥</a>
        </div>
    </div>
    <div class="code-container">
        <pre><code class="language-{{ language }}" id="codeBlock">{{ content }}</code></pre>
    </div>
    <script>
        (function() {
            const codeBlock = document.getElementById('codeBlock');
            if (!codeBlock) return;
            const lines = codeBlock.innerHTML.split('\n');
            codeBlock.innerHTML = lines.map((line, i) => 
                '<span class="line-number" data-line="' + (i+1) + '" onclick="copyLineRef(this)">' + (i+1) + '</span>' + line
            ).join('\n');
        })();
        
        function copyLineRef(element) {
            const line = element.dataset.line;
            const textToCopy = `{{ file_path }}:${line}`;
            navigator.clipboard.writeText(textToCopy).then(() => {
                element.style.color = '#0969da';
                element.style.background = '#ddf4ff';
                setTimeout(() => { element.style.color = ''; element.style.background = ''; }, 200);
            });
        }
    </script>
</body>
</html>
