{% extends 'admin/layout.html.twig' %}
{% block page_title %}{{ title }}{% endblock %}
{% block breadcrumb %}
  <span class="sep">/</span><a href="{{ path('admin_csiwo_index') }}" class="breadcrumb-link">CSIWO</a>
  <span class="sep">/</span><a href="{{ path('admin_map_index') }}" class="breadcrumb-link">Cartes</a>
  <span class="sep">/</span><span class="breadcrumb-text">{{ title }}</span>
{% endblock %}

{% block content %}
<form method="post" action="{{ action }}" enctype="multipart/form-data">

  <div class="section">
    <div class="section-title">Général</div>
    <div class="grid-2">
      <div class="field">
        <label class="field-label" for="name">Nom *</label>
        <input type="text" name="name" id="name" required value="{{ map.name }}">
      </div>
      <div class="field">
        <label class="field-label" for="slug">Slug *</label>
        <input type="text" name="slug" id="slug" required value="{{ map.slug }}"
               pattern="[a-z0-9\-]+" title="Minuscules, chiffres et tirets uniquement">
      </div>
      <div class="field col-span-2">
        <label class="field-label">Options</label>
        <label class="checkbox-item" style="margin-top:4px">
          <input type="checkbox" name="isActive" value="1" {{ map.active ? 'checked' }}>
          Carte active (visible par les joueurs)
        </label>
      </div>
      <div class="field" style="margin-top:10px;grid-column:1/-1">
        <label class="field-label">Accès minimum requis</label>
        <select name="minSubscriptionTier" style="max-width:240px">
          <option value="">Aucun (carte libre)</option>
          <option value="bronze"  {{ map.minSubscriptionTier == 'bronze'  ? 'selected' }}>Bronze (ou plus)</option>
          <option value="argent"  {{ map.minSubscriptionTier == 'argent'  ? 'selected' }}>Argent (ou plus)</option>
          <option value="gold"    {{ map.minSubscriptionTier == 'gold'    ? 'selected' }}>Gold (ou plus)</option>
          <option value="platine" {{ map.minSubscriptionTier == 'platine' ? 'selected' }}>Platine uniquement</option>
        </select>
      </div>
    </div>
  </div>

  <div class="section">
    <div class="section-title">Description</div>
    <div class="field">
      <textarea name="description" id="description" rows="4">{{ map.description }}</textarea>
    </div>
  </div>

  <div class="section">
    <div class="section-title">Image</div>
    {% if map.filename %}
      <div style="margin-bottom:12px">
        <img src="{{ asset('uploads/maps/' ~ map.filename) }}"
             style="max-width:320px;max-height:200px;object-fit:contain;border-radius:6px;border:1px solid var(--border);display:block" alt="{{ map.name }}">
        <p style="margin:6px 0 0;font-size:.8em;color:var(--muted)">{{ map.filename }}</p>
      </div>
    {% endif %}
    <div class="field">
      <input type="file" name="filename" id="filename" accept="image/*" {{ map.filename is empty ? 'required' }}>
      {% if map.filename %}
        <p style="font-size:.8em;color:var(--muted);margin-top:4px">Laisser vide pour conserver l'image actuelle.</p>
      {% endif %}
    </div>
  </div>

  <div class="form-actions">
    <button type="submit" class="btn btn-primary">Enregistrer</button>
    <a href="{{ path('admin_map_index') }}" class="btn btn-cancel">Annuler</a>
  </div>
</form>

<script>
(function () {
  var nameEl = document.getElementById('name');
  var slugEl = document.getElementById('slug');
  var slugEdited = slugEl.value !== '';

  function toSlug(s) {
    return s.normalize('NFD').replace(/[̀-ͯ]/g, '')
      .toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
  }

  slugEl.addEventListener('input', function () { slugEdited = true; });
  nameEl.addEventListener('input', function () {
    if (!slugEdited) slugEl.value = toSlug(nameEl.value);
  });
})();
</script>
{% endblock %}