{% extends 'base.html.twig' %}
{% block title %}Ajouter un exercice — RepTrack{% endblock %}
{% block body %}
<div class="page-title">AJOUTER UN EXERCICE</div>
<div class="page-sub">{{ day.label }} — {{ day.program.label }}</div>
<div class="card">
  {{ form_start(form) }}
  <div class="form-group">{{ form_label(form.name) }}{{ form_widget(form.name) }}{{ form_errors(form.name) }}</div>
  <div class="form-group">{{ form_label(form.detail) }}{{ form_widget(form.detail) }}</div>
  <div class="form-group">{{ form_label(form.sectionName) }}{{ form_widget(form.sectionName) }}</div>

  <div class="section-label">ICÔNE</div>
  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;margin-bottom:16px">
    {% for key, label in constant('App\\Entity\\Exercise::ICONS') %}
      <label style="cursor:pointer;text-align:center">
        <input type="radio" name="{{ form.icon.vars.full_name }}" value="{{ key }}"
               style="display:none" class="icon-radio"
               {% if form.icon.vars.value == key %}checked{% endif %}/>
        <div class="icon-card" style="background:var(--surface2);border:2px solid var(--border);border-radius:8px;padding:8px;transition:all .15s">
          <div style="font-size:10px;color:var(--text-muted);margin-top:4px;word-break:break-word;line-height:1.3">{{ label }}</div>
        </div>
      </label>
    {% endfor %}
  </div>
  {{ form_errors(form.icon) }}

  <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
    <div class="form-group">{{ form_label(form.seriesCount) }}{{ form_widget(form.seriesCount) }}</div>
    <div class="form-group">{{ form_label(form.reps) }}{{ form_widget(form.reps) }}{{ form_errors(form.reps) }}</div>
  </div>
  <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
    <div class="form-group">{{ form_label(form.restSeconds) }}{{ form_widget(form.restSeconds) }}</div>
    <div class="form-group">{{ form_label(form.restAfterSeconds) }}{{ form_widget(form.restAfterSeconds) }}</div>
  </div>

  <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:8px">
    <button type="submit" class="btn btn-primary">AJOUTER</button>
    <button type="submit" name="add_another" value="1" class="btn btn-secondary">+ UN AUTRE</button>
  </div>
  {{ form_end(form) }}
</div>
<script>
document.querySelectorAll('.icon-radio').forEach(r => {
  r.addEventListener('change', () => {
    document.querySelectorAll('.icon-card').forEach(c => {
      c.style.borderColor='var(--border)'; c.style.background='var(--surface2)';
    });
    if(r.checked){
      r.closest('label').querySelector('.icon-card').style.borderColor='var(--accent)';
      r.closest('label').querySelector('.icon-card').style.background='var(--accent-dim)';
    }
  });
  if(r.checked){
    r.closest('label').querySelector('.icon-card').style.borderColor='var(--accent)';
    r.closest('label').querySelector('.icon-card').style.background='var(--accent-dim)';
  }
});
</script>
{% endblock %}