<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统</title>
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='ico.png') }}">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            height: 100vh;
        }
        .sidebar {
            width: 200px;
            background-color: #333;
            color: white;
            padding-top: 20px;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            overflow: auto;
        }
        .sidebar a {
            display: block;
            color: white;
            padding: 10px 15px;
            text-decoration: none;
        }
        .sidebar a:hover {
            background-color: #575757;
        }
        .content {
            margin-left: 200px;
            padding: 20px;
            width: 100%;
        }
        h1 {
            background-color: #007bff;
            color: white;
            padding: 20px;
            margin: 0;
        }
        table {
            width: 80%;
            margin: 20px auto;
            border-collapse: collapse;
        }
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #007bff;
            color: white;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
        img {
            max-width: 100px;
            height: auto;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="sidebar">
        <a href="/">进入记录</a>
        <a href="/info_person">人员信息</a>
    </div>

    <div class="content">
        <h1>进入记录</h1>
        <table border="0">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>身份</th>
                    <th>进入时间</th>
                    <th>照片</th>
                </tr>
            </thead>
            <tbody id="log-table-body">
                <!-- 日志行将在 JavaScript 中插入 -->
            </tbody>
        </table>
    </div>

    <script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var socket = io.connect('http://' + document.domain + ':' + location.port);
            socket.on('update', function(data) {
                var tableBody = document.getElementById('log-table-body');
                tableBody.innerHTML = '';
                data.logs.forEach(function(log) {
                    var row = document.createElement('tr');
                    row.innerHTML = '<td>' + log[0] + '</td>' +
                                    '<td>' + log[1] + '</td>' +
                                    '<td>' + log[3] + '</td>' +
                                    '<td><img src="' + '../static/' + log[2] + '" alt="Photo of ' + log[0] + '"></td>';
                    tableBody.appendChild(row);
                });
            });
        });
    </script>
</body>
</html>
