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

{% block title %}Sell an item · CampusCart{% endblock %}

{% block content %}
<h1 class="visually-hidden">Sell an item</h1>

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

      <!-- Step 1: Photos -->
      <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">Maximum 7 photos</span>
          </div>

          <div class="image-uploader {{ 'is-invalid' if form.images.errors }}"
               data-image-uploader data-max="7">
            {# Real submit carrier: hidden, populated via the DataTransfer API. #}
            {{ form.images(
                 class="d-none",
                 multiple=True,
                 accept="image/png,image/jpeg,image/webp",
                 **{"data-uploader-input": ""}) }}

            <div class="uploader-dropzone" data-uploader-dropzone tabindex="0" role="button"
                 aria-label="Add photos">
              <div class="uploader-cloud"><i class="bi bi-cloud-arrow-up"></i></div>
              <p class="mb-1 fw-medium">Drag and drop your photos here</p>
              <p class="text-muted small mb-0">or click to browse your files (PNG, JPG up to 5&nbsp;MB)</p>
            </div>

            <div class="d-flex justify-content-between align-items-center mt-2">
              <span class="small text-muted" data-uploader-counter>0 of 7 photos selected</span>
              <span class="small text-muted d-none d-sm-inline">Drag to reorder &middot; first photo is the cover</span>
            </div>

            <div class="uploader-grid" data-uploader-grid></div>
          </div>
          {% for error in form.images.errors %}
            <div class="invalid-feedback d-block">{{ error }}</div>
          {% endfor %}
        </div>
      </div>

      <!-- Step 2: 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, "Post Listing") }}
      </div>
    </div>
  </div>
</form>
{% endblock %}

{% block scripts %}
  <script src="{{ url_for('static', filename='js/image-uploader.js') }}"></script>
{% endblock %}