<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map View</title>
    <link href="fonts/inter" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <main class="container">
        <div class="canvas-container">
            <canvas id="canvas_draw" width="800" height="800"></canvas>
        </div>
        <aside class="right-panel">
            <section class="panel-section">
                <h3>Map View</h3>
                <div class="zoom-controls">
                    <button id="zoomIn">+</button>
                    <span class="zoom-level">100%</span>
                    <button id="zoomOut">-</button>
                    <button id="resetZoom">↺</button>
                </div>
                <h3>Settings</h3>
                <div class="controls-grid">
                    <label class="switch-label">
                        <label class="switch">
                            <input type="checkbox" id="visibilityToggleHP" checked>
                            <span class="slider"></span>
                        </label>
                        <span>Show HP Bar</span>
                    </label>

                    <label class="switch-label">
                        <label class="switch">
                            <input type="checkbox" id="showHeroImages" checked>
                            <span class="slider"></span>
                        </label>
                        <span>Show Hero Images</span>
                    </label>
    
                    <label class="switch-label">
                        <label class="switch">
                            <input type="checkbox" id="visibilityToggleID" checked>
                            <span class="slider"></span>
                        </label>
                        <span>Show Number ID</span>
                    </label>

                    <label class="switch-label">
                        <label class="switch">
                            <input type="checkbox" id="redteamToggleID">
                            <span class="slider"></span>
                        </label>
                        <span>Red Team</span>
                    </label>

                    <label class="switch-label">
                        <label class="switch">
                            <input type="checkbox" id="infoenemyonlyToggleID">
                            <span class="slider"></span>
                        </label>
                        <span>Show Info Only Enemy</span>
                    </label>

                    <label class="switch-label">
                        <label class="switch">
                            <input type="checkbox" id="heronameToggleID">
                            <span class="slider"></span>
                        </label>
                        <span>Show Hero Names</span>
                    </label>
                </div>

                <div class="seekbar-container">
                    <label for="circleSize">Circle Size</label>
                    <input type="range" id="circleSize" min="5" max="50" value="18">
                </div>

				<div class="seekbar-container">
                    <label for="fontSize">Font Size</label>
                    <input type="range" id="fontSize" min="5" max="50" value="14">
                </div>
            </section>

            <section class="panel-section">
                <h3>Hero Info</h3>
                <div class="table-container">
                    <table id="cooldownTable">
                        <thead>
                            <tr>
                                <th>Hero</th>
                                <th>C1</th>
                                <th>C2</th>
                                <th>C3</th>
                                <th>HP</th>
                                <th>BT</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

                <div class="table-container">
                    <table id="heroTable">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Hero Name</th>
                                <th>Level</th>
                                <th>Coin</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </section>
        </aside>
    </main>

    <div id="customDialog" class="dialog-overlay">
        <div class="dialog-box">
            <p id="dialogMessage"></p>
            <div class="dialog-actions">
                <button id="dialogOkButton">OK</button>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>