{% extends "base.html" %}
{% from "components/listing_form.html" import listing_fields, listing_summary %}

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

{% block content %}
<div class="mb-4">
  <h1 class="h3 fw-bold mb-1">Edit listing</h1>
  <p class="text-muted mb-0">Update your listing details.</p>
</div>

<form method="post" novalidate>
  {{ form.hidden_tag() }}
  <div class="row g-4">
    <!-- ============ Left column ============ -->
    <div class="col-lg-8">

      <!-- Photos (read-only in this phase) -->
      <div class="card form-card mb-4">
        <div class="card-body p-4">
          <div class="d-flex align-items-center justify-content-between mb-3">
            <h2 class="h5 mb-0 d-flex align-items-center">
              <span class="step-badge">1</span> Photos
            </h2>
            <span class="small text-muted">Read-only</span>
          </div>

          {% if listing.images %}
            <div class="detail-thumbs">
              {% for image in listing.images %}
                <div class="detail-thumb {{ 'active' if loop.first }}">
                  <img src="{{ url_for('marketplace.listing_image', filename=image.image_path) }}"
                       alt="{{ image.caption or listing.title }}" loading="lazy" decoding="async">
                </div>
              {% endfor %}
            </div>
          {% else %}
            <p class="text-muted mb-0">No images.</p>
          {% endif %}

          <p class="form-text mt-2 mb-0">
            <i class="bi bi-lock" aria-hidden="true"></i>
            Photo editing is coming soon. Existing photos are shown for reference.
          </p>
        </div>
      </div>

      <!-- Item Details -->
      <div class="card form-card">
        <div class="card-body p-4">
          <h2 class="h5 mb-4 d-flex align-items-center">
            <span class="step-badge">2</span> Item Details
          </h2>

          {{ listing_fields(form) }}
        </div>
      </div>
    </div>

    <!-- ============ Right column ============ -->
    <div class="col-lg-4">
      <div class="summary-col">
        {{ listing_summary(form, "Save changes") }}
        <a class="btn btn-link w-100 text-muted mt-2"
           href="{{ url_for('marketplace.listing_detail', public_id=listing.public_id) }}">
          Cancel
        </a>
      </div>
    </div>
  </div>
</form>
{% endblock %}