{{define "body-map"}}
<div class="layout">
  <div class="panel panel-left" id="disconnectedPanel" style="display:none">
    <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-wrapper">
      <div class="z-controls">
        <span style="font-size:11px;color:#aaa">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>
        <button id="renameDirBtn" class="z-text-btn" onclick="showRenameDir()" style="font-size:11px;padding:0 10px;min-width:44px;background:var(--input-bg);color:var(--text);border:1px solid var(--border);border-radius:3px;cursor:pointer;font-family:monospace">Rename</button>
        <button id="newDirBtn" class="z-text-btn" onclick="showNewDir()" style="font-size:11px;padding:0 10px;min-width:44px;background:var(--input-bg);color:var(--text);border:1px solid var(--border);border-radius:3px;cursor:pointer;font-family:monospace">New</button>
        <span class="z-sep"></span>
        <button id="newRoomBtn" class="z-text-btn" onclick="createEmptyRoom()" style="display:none;font-size:11px;padding:0 10px;min-width:44px;background:var(--danger);color:#fff;border:1px solid var(--danger);border-radius:3px;cursor:pointer;font-family:monospace">New Room</button>
        <span class="z-sep" id="newRoomSep" style="display:none"></span>
        <button onclick="changeZ(-1)">-</button>
        <span class="z-label" id="zLabel">Z=0</span>
        <button onclick="changeZ(1)">+</button>
        <button class="z-text-btn" 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">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>
        <span class="z-sep"></span>
        <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 id="renameDirForm" class="z-dir-form">
          <input id="renameDirInput" type="text" onkeydown="onDirInputKey(event,'rename')" 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;width:160px">
          <button class="z-text-btn" onclick="confirmRenameDir()" style="font-size:11px;padding:0 8px;min-width:44px;background:var(--accent);color:var(--text);border:1px solid #1a5a8e;border-radius:3px;cursor:pointer;font-family:monospace">Confirm</button>
          <button class="z-text-btn" onclick="cancelRenameDir()" style="font-size:11px;padding:0 8px;min-width:44px;background:var(--input-bg);color:var(--text);border:1px solid var(--border);border-radius:3px;cursor:pointer;font-family:monospace">Cancel</button>
        </div>
        <div id="newDirForm" class="z-dir-form">
          <input id="newDirInput" type="text" placeholder="area name" onkeydown="onDirInputKey(event,'new')" 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;width:160px">
          <button class="z-text-btn" onclick="confirmNewDir()" style="font-size:11px;padding:0 8px;min-width:44px;background:var(--accent);color:var(--text);border:1px solid #1a5a8e;border-radius:3px;cursor:pointer;font-family:monospace">Confirm</button>
          <button class="z-text-btn" onclick="cancelNewDir()" style="font-size:11px;padding:0 8px;min-width:44px;background:var(--input-bg);color:var(--text);border:1px solid var(--border);border-radius:3px;cursor:pointer;font-family:monospace">Cancel</button>
        </div>
      </div>
    </div>
    <svg id="mapSvg" style="width:100%;height:100%"></svg>
    <div class="room-tooltip" id="tooltip" style="display:none"></div>
    <div id="linkModeBadge" class="link-mode-badge" 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/cardeditor.js"></script>
<script src="/static/intereditor.js"></script>
<script src="/static/map.js"></script>
{{end}}