{{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;padding:0 10px;min-width:44px">Reset</button>
      <span style="font-size:11px;color:#aaa;margin-left:8px">Area:</span>
      <select id="dirSelect" onchange="changeDir(this.value)" style="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>
      <span style="font-size:11px;color:#aaa;margin-left:8px">Zoom:</span>
      <button onclick="zoomIn()" title="Zoom in" style="width:auto;font-size:14px;padding:0 6px;min-width:32px">&#x2795;</button>
      <button onclick="zoomOut()" title="Zoom out" style="width:auto;font-size:14px;padding:0 6px;min-width:32px">&#x2796;</button>
      <label style="font-size:11px;color:#ccc;cursor:pointer;display:flex;align-items:center;gap:4px;margin-left:8px" title="When unchecked, skips the confirm dialog when deleting rooms">
        <input type="checkbox" id="confirmDelete" style="cursor:pointer">
        Confirm before delete
      </label>
    </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}}