<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>安装第三方库</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #1e1e1e;
            color: #f5f5f5;
            margin: 0;
            padding: 20px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            border-radius: 8px;
        }

        h1 {
            text-align: center;
            color: #ffffff;
        }

        #filter-container {
            display: flex;
            margin-bottom: 20px;
        }

        #filter {
            flex: 1;
            padding: 10px;
            border: 1px solid #444;
            border-radius: 5px;
            background-color: #333;
            color: #f5f5f5;
        }

        button {
            padding: 10px 15px;
            margin-left: 10px;
            color: white;
            background-color: #d9534f;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: #c9302c;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            background: #2c2c2c;
            border-radius: 5px;
            overflow: hidden;
        }

        th, td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #444;
        }

        th {
            background-color: #444;
            cursor: pointer;
        }

        tr:hover {
            background-color: #555;
        }

        select {
            padding: 10px;
            margin-left: 10px;
            border: 1px solid #444;
            border-radius: 5px;
            background-color: #333;
            color: #f5f5f5;
        }
    </style>
</head>
<body>
<h1>安装第三方库</h1>
<div id="filter-container">
    <input type="text" id="filter" placeholder="按名称搜索...">
    <button onclick="searchPackages()">搜索</button>
    <select id="mirror-source">
        <option value="https://pypi.python.org/simple">默认镜像</option>
        <option value="https://mirrors.aliyun.com/pypi/simple/">阿里云</option>
        <option value="https://pypi.tuna.tsinghua.edu.cn/simple">清华大学</option>
        <option value="https://pypi.hust.edu.cn/simple">华中科技大学</option>
        <option value="https://pypi.mirrors.ustc.edu.cn/simple/">中国科学技术大学</option>
        <option value="https://pypi.douban.com/simple/">豆瓣</option>
    </select>
</div>
<table>
    <thead>
    <tr>
        <th onclick="sortTable(0)">名称</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="available-package-table">
    {% for package in available_packages %}
    <tr>
        <td>{{ package.name }}</td>
        <td>
            <button onclick="install('{{ package.name }}')">安装</button>
        </td>
    </tr>
    {% endfor %}
    </tbody>
</table>

<script>
    function searchPackages() {
        const filter = document.getElementById('filter').value.trim();
        if (filter === "") {
            alert('请输入包名');
            return;
        }

        // 使用 window.location.href 进行跳转到搜索页面
        window.location.href = `/search/?q=${filter}`;
    }

    function install(packageName) {
        const mirrorSource = document.getElementById('mirror-source').value;
        fetch(`/install/?q=${packageName}&mirror=${mirrorSource}`, {
            method: 'GET'
        }).then(response => {
            if (response.ok) {
                alert('安装成功');
                location.reload(); // 安装成功，刷新页面
            } else {
                alert('安装失败');
            }
        });
    }
</script>
</body>
</html>
