<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>环视系统</title>
  <link rel="stylesheet" href="/static/layui/css/layui.css">
  <style>
    html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
    #app { display: flex; height: 100vh; }
    #sidebar { width: 200px; background: #393D49; color: white; padding: 20px 0; }
    #main { flex: 1; position: relative; background: black; }
    #video { width: 100%; height: 100%; object-fit: contain; }
    .menu-item { padding: 12px 20px; cursor: pointer; }
    .menu-item:hover { background: #4B515D; }
    .active { background: #009688 !important; }
  </style>
</head>
<body>
<div id="app">
  <div id="sidebar">
    <div class="menu-item active" data-view="all">全景鸟瞰</div>
    <div class="menu-item" data-view="front">前视</div>
    <div class="menu-item" data-view="back">后视</div>
    <div class="menu-item" data-view="left">左视</div>
    <div class="menu-item" data-view="right">右视</div>
    <hr style="border-color:#5a5e6a;margin:15px 10px">
    <div class="menu-item" onclick="logout()">退出登录</div>
  </div>
  <div id="main">
    <img id="video" src="/video_feed" />
  </div>
</div>

<script src="/static/layui/layui.js"></script>
<script>
  // 切换视图（可选：后续通过 WebSocket 或 REST API 控制后端 current_view）
  document.querySelectorAll('.menu-item[data-view]').forEach(item => {
    item.addEventListener('click', function() {
      document.querySelector('.active').classList.remove('active');
      this.classList.add('active');
      const view = this.getAttribute('data-view');
      // TODO: 发送 AJAX 请求通知后端切换 current_view
      // fetch('/api/set_view?view=' + view);
    });
  });

  function logout() {
    if (confirm('确定退出？')) {
      window.location.href = '/logout';
    }
  }
</script>
</body>
</html>