{{define "content"}}
<div class="page-header">
    <h1>Maps</h1>
    <span>{{len .Maps}} map{{if ne (len .Maps) 1}}s{{end}}</span>
</div>

<div class="map-create-section">
    <form id="create-map-form" onsubmit="createMap(event)">
        <fieldset role="group">
            <input type="text" id="new-map-name" placeholder="New map name..." required>
            <button type="submit">Create Map</button>
        </fieldset>
    </form>
</div>

<div class="map-list">
    {{range .Maps}}
    <article class="map-card">
        <a href="/maps/{{.}}">{{.}}</a>
    </article>
    {{else}}
    <p>No maps found. Create one or check the --maps-dir flag.</p>
    {{end}}
</div>

<script>
function createMap(e) {
    e.preventDefault();
    const name = document.getElementById('new-map-name').value.trim();
    if (!name) return;
    fetch('/api/maps', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({name: name})
    }).then(r => {
        if (r.ok) return r.json();
        return r.text().then(t => { throw new Error(t); });
    }).then(data => {
        window.location.href = '/maps/' + data.name;
    }).catch(err => {
        alert('Failed to create map: ' + err.message);
    });
}
</script>
{{end}}