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

{% block title %}List an item · TradeHub{% endblock %}

{% block content %}
<div class="container" style="max-width: 720px;">
  <div class="page-header">
    <h1>List an item for sale</h1>
    <p>Add photos, a catchy title, and a fair price. You can edit anytime.</p>
  </div>

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

      {# Photos #}
      <div class="form-group">
        <label class="form-label">Photos <span class="text-muted text-xs">(up to 5)</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 class="upload-zone-hint">JPG, PNG, WEBP &middot; max 5 MB each</div>
        </div>
        <input type="file" name="images" multiple accept="image/*" data-upload-input style="display:none;">
        <div class="upload-preview" data-upload-preview></div>
        {% if form.images.errors %}
          {% for e in form.images.errors %}<div class="form-error">{{ e }}</div>{% endfor %}
        {% endif %}
      </div>

      {{ form_field(form.title, placeholder='e.g. MacBook Pro 13" 2020 — great condition') }}

      <div style="display:grid; grid-template-columns:1fr 1fr; gap: var(--space-4);">
        {{ form_field(form.category) }}

        {# Condition as radio pills #}
        <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>
          {% if form.condition.errors %}
            {% for e in form.condition.errors %}<div class="form-error">{{ e }}</div>{% endfor %}
          {% endif %}
        </div>
      </div>

      <div class="form-group">
        <label class="form-label" for="description">Description</label>
        <textarea id="description" name="description" class="form-textarea"
                  placeholder="Condition details, accessories included, reason for selling..."
                  maxlength="2000" data-char-counter="2000" data-target-counter="desc-count">{{ form.description.data or '' }}</textarea>
        <div class="form-hint" id="desc-count">0 / 2000</div>
        {% if form.description.errors %}
          {% for e in form.description.errors %}<div class="form-error">{{ e }}</div>{% endfor %}
        {% endif %}
      </div>

      <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", placeholder='0.00', step='0.01', id='price') }}
          </div>
          {% if form.price.errors %}
            {% for e in form.price.errors %}<div class="form-error">{{ e }}</div>{% endfor %}
          {% endif %}
        </div>

        {{ form_field(form.location, placeholder='Campus area, North dorm...') }}
      </div>

      <div style="display:flex; gap: var(--space-3); margin-top: var(--space-6);">
        <a href="{{ url_for('main.index') }}" class="btn btn-outline">Cancel</a>
        {{ form.submit(class="btn btn-primary btn-lg", style="flex:1;") }}
      </div>
    </form>
  </div>
</div>
{% endblock %}