{{define "title"}}Nouvelle page — Talas Wiki{{end}}

{{define "content"}}
<div class="breadcrumb"><a href="/">/</a> / <span>nouveau</span></div>
<h1>Creer une page</h1>

<form method="POST" action="/new" class="edit-form" id="newpage-form">
    <div class="form-group">
        <label class="form-label">Chemin (ex: 01_PILOTAGE/MA_PAGE)</label>
        <input type="text" name="path" id="page-path" class="form-input" placeholder="DOMAINE/NOM_PAGE" value="{{.Dir}}" required autofocus>
    </div>
    <div class="form-group">
        <label class="form-label">Template</label>
        <select id="template-select" class="form-input" style="padding:8px">
            {{range .Templates}}
            <option value="{{.ID}}" data-content="{{.Content}}">{{.Name}}</option>
            {{end}}
        </select>
    </div>
    <div class="form-group">
        <label class="form-label">Contenu initial</label>
        <textarea name="content" id="new-content" class="edit-textarea" style="min-height:30vh"></textarea>
    </div>
    <div class="edit-actions">
        <button type="submit" class="btn-save">creer</button>
        <a href="/" class="btn-cancel">annuler</a>
    </div>
</form>
{{end}}

{{define "scripts"}}
<script>
var sel = document.getElementById('template-select');
var ta = document.getElementById('new-content');
var pathInput = document.getElementById('page-path');
function applyTemplate() {
    var opt = sel.options[sel.selectedIndex];
    var content = opt.dataset.content || '';
    var title = pathInput.value.split('/').pop() || 'Titre';
    ta.value = content.replace(/\{\{TITLE\}\}/g, title);
}
sel.addEventListener('change', applyTemplate);
pathInput.addEventListener('input', applyTemplate);
applyTemplate();
</script>
{{end}}