{{define "content"}}
<link rel="stylesheet" href="/static/map_editor.css">
<div class="editor-header">
    <div class="editor-breadcrumb">
        <a href="/maps">Maps</a> &rsaquo; <strong>{{.MapName}}</strong>
    </div>
    <div class="editor-actions">
        <button id="btn-undo" onclick="editorUndo()" disabled>Undo</button>
        <button id="btn-redo" onclick="editorRedo()" disabled>Redo</button>
        <button id="btn-save" onclick="editorSave()" class="contrast">Save</button>
        <button id="btn-download" onclick="editorDownload()" class="secondary outline">Download</button>
        {{if .CanCreatePR}}<button id="btn-create-pr" onclick="editorCreatePR()" class="secondary outline">Create PR</button>{{end}}
        <span id="save-status"></span>
        <span id="pr-status"></span>
    </div>
</div>

<div class="editor-layout">
    <aside class="editor-sidebar">
        <details open>
            <summary>Terrain</summary>
            <div class="tool-grid" id="terrain-tools"></div>
        </details>

        <details open>
            <summary>Modifier</summary>
            <div class="tool-grid" id="modifier-tools"></div>
            <div class="modifier-integrity" id="integrity-section" style="display:none;">
                <label>Integrity
                    <input type="number" id="modifier-integrity" value="100" min="1" step="1">
                </label>
            </div>
        </details>

        <details open>
            <summary>Starting Positions</summary>
            <div class="startpos-tools" id="startpos-tools"></div>
            <p class="tool-hint" id="startpos-hint"></p>
        </details>

        <details>
            <summary>Weather</summary>
            <div class="weather-table-container">
                <table class="weather-table" id="weather-table">
                    <thead>
                        <tr>
                            <th>Month</th>
                            <th>Sun</th>
                            <th>Cloud</th>
                            <th>Rain</th>
                            <th>Snow</th>
                            <th>Storm</th>
                            <th>Bliz</th>
                            <th>Sum</th>
                            <th>Temp</th>
                            <th>Wind</th>
                        </tr>
                    </thead>
                    <tbody id="weather-body"></tbody>
                </table>
            </div>
        </details>
    </aside>

    <div class="editor-canvas-container">
        <canvas id="hex-canvas"></canvas>
    </div>
</div>

<script>
    const MAP_NAME = "{{.MapName}}";
</script>
<script src="/static/map_editor.js"></script>
{{end}}