<!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>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background-color: #f8f9fa;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }
        .image-container {
            max-width: 100%;
            margin-bottom: 20px;
        }
        .image-container img {
            max-width: 100%;
            max-height: 80vh;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        }
        .actions {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            justify-content: center;
        }
        .btn {
            display: inline-block;
            padding: 12px 24px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.2s ease;
        }
        .btn-primary {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
        }
        .btn-secondary {
            background: #6c757d;
            color: white;
        }
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }
        .filename {
            margin-bottom: 20px;
            color: #666;
            font-size: 14px;
        }
    </style>
<link rel="stylesheet" href="/static/lib/sweetalert2.min.css">
<script src="/static/lib/sweetalert2.min.js"></script>
</head>
<body>
    <div class="filename">{{ filename }}</div>
    <div class="image-container">
        <img src="{{ url_for('file.serve_file', path=file_path) }}" 
             onerror="Swal.fire({ icon: 'error', title: '错误', text: '无法显示此图片' });"
             alt="{{ filename }}">
    </div>
    <div class="actions">
        <a href="{{ url_for('file.download_file', path=file_path) }}" class="btn btn-primary">下载</a>
        <a href="{{ url_for('browser.browse', path=current_dir) }}" class="btn btn-secondary">返回目录</a>
    </div>
</body>
</html>
