{#
  Shared building blocks for the Create and Edit listing pages, so both use
  identical field markup, styling, validation rendering and helper text.

    {% from "components/listing_form.html" import listing_fields, listing_summary %}
    {{ listing_fields(form) }}
    {{ listing_summary(form, "Post Listing") }}   {# or "Save changes" on edit #}
#}

{# The Item Details fields (title, category, price, condition, description, negotiable). #}
{% macro listing_fields(form) %}
  <div class="mb-3">
    <label class="form-label" for="title">Item Title</label>
    {{ form.title(class="form-control" ~ (" is-invalid" if form.title.errors), id="title",
                  placeholder="e.g. Organic Chemistry 2nd Ed. Textbook", autofocus=true) }}
    {% for e in form.title.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}
  </div>

  <div class="row">
    <div class="col-md-6 mb-3">
      <label class="form-label" for="category_id">Category</label>
      {{ form.category_id(class="form-select" ~ (" is-invalid" if form.category_id.errors),
                          id="category_id") }}
      {% for e in form.category_id.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}
    </div>
    <div class="col-md-6 mb-3">
      <label class="form-label" for="price">Price (&#8377;)</label>
      <div class="input-group">
        <span class="input-group-text">&#8377;</span>
        {{ form.price(class="form-control" ~ (" is-invalid" if form.price.errors), id="price",
                      type="number", step="0.01", min="0", placeholder="0.00") }}
      </div>
      {% for e in form.price.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}
    </div>
  </div>

  <div class="mb-3">
    <label class="form-label d-block">Condition</label>
    {{ form.condition(class="d-none", **{"data-condition-input": ""}) }}
    <div class="condition-group" data-condition-group>
      {% for value, label in form.condition.choices %}
        <button type="button" class="condition-btn {{ 'active' if form.condition.data == value }}"
                data-value="{{ value }}">{{ label }}</button>
      {% endfor %}
    </div>
    {% for e in form.condition.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}
  </div>

  <div class="mb-3">
    <label class="form-label" for="description">Description</label>
    {{ form.description(class="form-control" ~ (" is-invalid" if form.description.errors), id="description",
                        rows="4",
                        placeholder="Describe the item, including any flaws, dimensions, or specific pick-up locations on campus...") }}
    {% for e in form.description.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}
  </div>

  <div class="form-check form-switch">
    {{ form.negotiable(class="form-check-input", role="switch", id="negotiable") }}
    <label class="form-check-label" for="negotiable">Open to offers (negotiable)</label>
  </div>
{% endmacro %}


{# Right-hand summary + safety panel. `submit_label` sets the submit button text. #}
{% macro listing_summary(form, submit_label) %}
  <div class="card form-card mb-4">
    <div class="card-body p-4">
      <h2 class="h6 mb-3">Listing Summary</h2>
      <div class="summary-row">
        <span class="text-muted">Visibility</span>
        <span class="fw-medium"><i class="bi bi-globe2 me-1"></i>Everyone</span>
      </div>
      {# "Listing Duration" hidden until that feature exists. #}
      <div class="summary-row">
        <span class="text-muted">Seller Fees</span>
        <span class="text-primary fw-semibold">Free</span>
      </div>

      <div class="summary-info">
        <i class="bi bi-info-circle-fill"></i>
        <span>Your listing will be instantly visible to all verified students at University Campus.</span>
      </div>

      {{ form.submit(class="btn btn-primary w-100 mt-3", value=submit_label) }}
    </div>
  </div>

  <div class="card safety-card">
    <div class="card-body p-4">
      <h2 class="h6 d-flex align-items-center gap-2 mb-3">
        <i class="bi bi-shield-check"></i> Safety Guidelines
      </h2>
      <ul class="safety-list mb-0">
        <li>Meet in public campus locations</li>
        <li>Inspect the item before paying</li>
        <li>Use secure payment methods</li>
      </ul>
    </div>
  </div>
{% endmacro %}