{% extends 'admin/layout.html.twig' %}
{% block title %}Modèle de convention — WTL{% endblock %}
{% block admin_body %}
<div class="mb-4">
<h1 class="h2">Modèle de convention — v{{ template.version }}
</h1>
<p class="text-secondary">Chaque nouvelle version crée un nouvel enregistrement : les conventions déjà générées ne changent jamais.</p>
</div>
<form method="post">
<input type="hidden" name="_token" value="{{ csrf_token('convention-template') }}">
<div class="card">
<div class="card-body p-4">
<div class="row g-3">
<div class="col-md-8">
<label class="form-label">Nom du modèle</label>
<input class="form-control" name="name" value="{{ template.name }}" required>
</div>
<div class="col-md-4 d-flex align-items-end">
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" name="active" value="1" id="active" {{ template.active ? 'checked' : '' }}>
<label class="form-check-label" for="active">Version active</label>
</div>
</div>
<div class="col-12">
<label class="form-label">Contenu</label>
<textarea class="form-control font-monospace token-editor" rows="30" name="content" required>{{ template.content }}
</textarea>
</div>
<div class="col-12">
<strong>Variables</strong>
<div class="d-flex flex-wrap gap-2 mt-2">
{% for token in tokens %}
<button type="button" class="btn btn-sm btn-outline-secondary token-btn" data-token="{{ '{{' ~ token ~ '}}' }}">
<code>{{ '{{' ~ token ~ '}}' }}
</code>
</button>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<div class="sticky-bottom bg-body py-3 border-top">
<button class="btn btn-dark btn-lg">Enregistrer cette version</button> <a class="btn btn-outline-secondary btn-lg" href="{{ path('admin_convention_template_index') }}">Annuler</a>
</div>
</form>
{% endblock %}
{% block javascripts %}{{ parent() }}
<script>(()=>{const e=document.querySelector('.token-editor');document.querySelectorAll('.token-btn').forEach(b=>b.addEventListener('click',()=>{const t=b.dataset.token,s=e.selectionStart??e.value.length,x=e.selectionEnd??e.value.length;e.value=e.value.slice(0,s)+t+e.value.slice(x);e.focus();e.selectionStart=e.selectionEnd=s+t.length;}));})();</script>
{% endblock %}