{% extends 'base.html' %}
{% from '_macros.html' import form_field %}

{% block title %}Edit listing · TradeHub{% endblock %}

{% block content %}
<div class="container" style="max-width: 720px;">
  <div class="page-header">
    <h1>Edit your listing</h1>
    <p>Update details or add more photos.</p>
  </div>

  <div class="form-card">
    {# Existing images gallery #}
    {% if product.images %}
    <div class="form-group">
      <label class="form-label">Current photos</label>
      <div class="upload-preview">
        {% for img in product.images %}
          <div class="upload-preview-item">
            <img src="{{ img.image_url }}" alt="Photo {{ loop.index }}">
            <form method="POST" action="{{ url_for('products.delete_image', product_id=product.id, image_id=img.id) }}" style="display:inline;">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <button type="submit" class="upload-preview-remove" aria-label="Delete photo">&times;</button>
            </form>
          </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}

    <form method="POST" enctype="multipart/form-data" novalidate>
      {{ form.hidden_tag() }}

      {# Add more photos #}
      <div class="form-group">
        <label class="form-label">Add more photos <span class="text-muted text-xs">(up to 5 total)</span></label>
        <div class="upload-zone" data-upload-zone>
          <i data-lucide="image-plus" width="40" height="40"></i>
          <div class="upload-zone-text">Click or drag photos here</div>
        </div>
        <input type="file" name="images" multiple accept="image/*" data-upload-input style="display:none;">
        <div class="upload-preview" data-upload-preview></div>
      </div>

      {{ form_field(form.title) }}

      <div style="display:grid; grid-template-columns:1fr 1fr; gap: var(--space-4);">
        {{ form_field(form.category) }}
        <div class="form-group">
          <label class="form-label">Condition</label>
          <div class="condition-radios">
            {% for value, label in form.condition.choices %}
              <div class="condition-radio">
                <input type="radio" id="cond_{{ value }}" name="condition" value="{{ value }}"
                       {% if form.condition.data == value or (not form.condition.data and loop.first) %}checked{% endif %}>
                <label for="cond_{{ value }}">{{ label }}</label>
              </div>
            {% endfor %}
          </div>
        </div>
      </div>

      {{ form_field(form.description) }}

      <div style="display:grid; grid-template-columns:1fr 1fr; gap: var(--space-4);">
        <div class="form-group">
          <label class="form-label" for="price">Price</label>
          <div class="price-input-wrap">
            {{ form.price(class="form-input", step='0.01', id='price') }}
          </div>
        </div>
        {{ form_field(form.location) }}
      </div>

      <div style="display:flex; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-6);">
        <a href="{{ url_for('products.detail', product_id=product.id) }}" class="btn btn-outline">Cancel</a>
        {{ form.submit(class="btn btn-primary") }}
      </div>
    </form>

    {# Delete is a SEPARATE form to avoid nested-form HTML issues #}
    <form method="POST" action="{{ url_for('products.delete', product_id=product.id) }}"
          onsubmit="return confirm('Delete this listing permanently?');"
          style="margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border); display:flex; justify-content:flex-start;">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <button type="submit" class="btn btn-danger">
        <i data-lucide="trash-2" width="16" height="16"></i> Delete listing
      </button>
    </form>
  </div>
</div>
{% endblock %}