{% extends "base.html" %}
{% from "auth/_macros.html" import field %}
{% block title %}{{ _('Edit listing') if listing else _('New listing') }}{% endblock %}
{% block content %}
<div class="card form-wide">
  <h2>{{ _('Edit listing') if listing else _('New listing') }}</h2>
  <form method="post" enctype="multipart/form-data" novalidate>
    {{ form.hidden_tag() }}
    {{ field(form.category_id) }}
    {{ field(form.title) }}
    {{ field(form.body) }}
    <div class="row2">{{ field(form.lang) }}{{ field(form.price) }}</div>
    {{ field(form.zip) }}

    {# category-specific fields: one group per category, toggled by JS #}
    <div id="attr-groups">
      {% for c in categories %}
      <div class="attr-group" data-cat="{{ c.id }}" style="display:none">
        {% for f in c.fields() %}
        <div class="field">
          <label>{{ f.label }}{% if f.required %} *{% endif %}</label>
          {% set val = (listing.attributes.get(f.name) if listing and listing.attributes else '') %}
          {% if f.type == 'select' %}
            <select class="input" name="attr_{{ f.name }}">
              <option value="">—</option>
              {% for opt in f.options %}<option value="{{ opt }}" {{ 'selected' if val==opt }}>{{ opt }}</option>{% endfor %}
            </select>
          {% elif f.type == 'number' %}
            <input class="input" type="number" name="attr_{{ f.name }}" value="{{ val }}">
          {% elif f.type == 'bool' %}
            <input type="checkbox" name="attr_{{ f.name }}" value="true" {{ 'checked' if val }}>
          {% else %}
            <input class="input" name="attr_{{ f.name }}" value="{{ val }}">
          {% endif %}
        </div>
        {% endfor %}
      </div>
      {% endfor %}
    </div>

    {{ field(form.images) }}
    {{ form.submit(class="btn") }}
  </form>

  {% if listing and listing.images %}
  <div class="existing-images">
    <h4>{{ _('Current photos') }}</h4>
    <div class="thumbs">
      {% for img in listing.images %}
      <div class="thumb-wrap">
        <img src="{{ url_for('listings.media', rel=img.thumb_path) }}" alt="">
        <form method="post" action="{{ url_for('listings.delete_image', listing_id=listing.id, image_id=img.id) }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button class="btn danger tiny" type="submit">×</button>
        </form>
      </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}
</div>

<script>
(function(){
  var sel = document.querySelector('[name=category_id]');
  var groups = document.querySelectorAll('.attr-group');
  function sync(){
    groups.forEach(function(g){
      g.style.display = (g.dataset.cat === sel.value) ? 'block' : 'none';
    });
  }
  if (sel){ sel.addEventListener('change', sync); sync(); }
})();
</script>
{% endblock %}