{{define "body-map"}}
<div class="layout">
  <div class="panel panel-left" id="disconnectedPanel">
    <div class="panel-header">Disconnected Rooms</div>
    <div id="disconnectedList" style="overflow-y:auto;flex:1">
      <p style="color:#888;text-align:center;margin-top:20px;font-size:11px">None</p>
    </div>
  </div>
  <div class="main" id="mapContainer">
    <div class="z-controls">
      <button onclick="changeZ(-1)">-</button>
      <span class="z-label" id="zLabel">Z=0</span>
      <button onclick="changeZ(1)">+</button>
      <button onclick="changeZ(0)" style="width:auto;font-size:11px">Reset</button>
      <select id="dirSelect" onchange="changeDir(this.value)" style="margin-left:8px;padding:3px 6px;font-size:11px;background:var(--input-bg);color:var(--text);border:1px solid var(--input-border);border-radius:3px;font-family:monospace"></select>
      <button onclick="zoomIn()" title="Zoom in" style="margin-left:8px;width:auto;font-size:14px">&#x2795;</button>
      <button onclick="zoomOut()" title="Zoom out" style="width:auto;font-size:14px">&#x2796;</button>
    </div>
    <svg id="mapSvg" style="width:100%;height:100%"></svg>
    <div class="room-tooltip" id="tooltip" style="display:none"></div>
  </div>
  <div class="panel" id="sidePanel">
    <div id="panelContent">
      <p style="color:#888;text-align:center;margin-top:40px">Click a room to view details</p>
    </div>
  </div>
</div>
<script src="/static/map.js"></script>
{{end}}