{% extends 'base.html' %}
{% block content %}
<section>
  <h2>Hardware Listings</h2>
  <p><strong>{{ total_listings }}</strong> matching listings · Page {{ current_page }} of {{ total_pages }} · Escrow only</p>
</section>

<section class="action-card" style="margin-bottom:1rem;">
  <h3 style="margin-top:0;">Browse & Filter Marketplace</h3>
  <form method="get" action="{{ url_for('index') }}">
    <div class="grid-cards" style="grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:.75rem;">
      <label>
        Search
        <input type="search" name="q" value="{{ active_filters.q }}" placeholder="title, description, seller">
      </label>

      <label>
        Seller
        <input type="text" name="seller" value="{{ active_filters.seller }}" placeholder="seller name">
      </label>

      <label>
        Min price (XMR)
        <input type="number" name="min_price" step="0.0001" min="0" value="{{ active_filters.min_price }}">
      </label>

      <label>
        Max price (XMR)
        <input type="number" name="max_price" step="0.0001" min="0" value="{{ active_filters.max_price }}">
      </label>

      <label>
        Max shipping (XMR)
        <input type="number" name="max_shipping" step="0.0001" min="0" value="{{ active_filters.max_shipping }}">
      </label>

      <label>
        Min listing rating
        <select name="min_rating">
          <option value="" {% if not active_filters.min_rating %}selected{% endif %}>Any</option>
          <option value="3" {% if active_filters.min_rating == '3' %}selected{% endif %}>3★+</option>
          <option value="3.5" {% if active_filters.min_rating == '3.5' %}selected{% endif %}>3.5★+</option>
          <option value="4" {% if active_filters.min_rating == '4' %}selected{% endif %}>4★+</option>
          <option value="4.5" {% if active_filters.min_rating == '4.5' %}selected{% endif %}>4.5★+</option>
        </select>
      </label>

      <label>
        Sort by
        <select name="sort">
          <option value="newest" {% if active_filters.sort == 'newest' %}selected{% endif %}>Newest</option>
          <option value="oldest" {% if active_filters.sort == 'oldest' %}selected{% endif %}>Oldest</option>
          <option value="price_low" {% if active_filters.sort == 'price_low' %}selected{% endif %}>Price: low → high</option>
          <option value="price_high" {% if active_filters.sort == 'price_high' %}selected{% endif %}>Price: high → low</option>
          <option value="shipping_low" {% if active_filters.sort == 'shipping_low' %}selected{% endif %}>Shipping: low → high</option>
          <option value="rating_high" {% if active_filters.sort == 'rating_high' %}selected{% endif %}>Best listing rating</option>
          <option value="seller_rating_high" {% if active_filters.sort == 'seller_rating_high' %}selected{% endif %}>Best seller rating</option>
          <option value="title_az" {% if active_filters.sort == 'title_az' %}selected{% endif %}>Title A → Z</option>
        </select>
      </label>
    </div>

    {% if selected_category_id %}
      <input type="hidden" name="category" value="{{ selected_category_id }}">
    {% endif %}

    <label>
      <input type="checkbox" name="free_shipping" value="1" {% if active_filters.free_shipping == '1' %}checked{% endif %}>
      Free shipping only
    </label>

    <div style="display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.75rem;">
      <button type="submit">Apply filters</button>
      <a role="button" class="secondary" href="{{ url_for('index') }}">Reset all</a>
    </div>
  </form>
</section>

<aside class="action-card" style="margin-bottom:1rem;">
  <h3 style="margin-top:0;">Categories</h3>
  <div style="display:flex; gap:.5rem; flex-wrap:wrap;">
    <a href="{{ clear_category_url }}" role="button" class="{% if not selected_category_id %}contrast{% else %}secondary{% endif %}">All categories</a>
    {% for c in category_links %}
      <a href="{{ c.url }}" role="button" class="{% if c.active %}contrast{% else %}secondary{% endif %}">{{ c.name }}</a>
    {% else %}
      <span>No categories yet.</span>
    {% endfor %}
  </div>
</aside>

<section class="grid-cards">
{% for l in listings %}
  <article class="card">
    {% if l.image_path %}
      <img class="thumb" src="{{ url_for('static', filename=l.image_path) }}" alt="{{ l.title }}" loading="lazy" decoding="async">
    {% else %}
      <div class="thumb" style="display:grid;place-items:center">No image</div>
    {% endif %}
    <h5 style="margin-top:.6rem"><a href="{{ url_for('listing_detail', listing_id=l.id) }}">{{ l.title }}</a></h5>
    <p>{{ l.description }}</p>
    {% set conv = conversion_display(l.price_xmr) %}
    <p><small>Seller: <a href="{{ url_for('seller_profile', username=l.seller_name) }}">{{ l.seller_name }}</a> · {{ l.category_name or 'Uncategorized' }}</small></p>
    <p><small>Listing ★ {{ '%.1f'|format(l.listing_rating_avg or 0) }} ({{ l.listing_rating_count }}) · Seller ★ {{ '%.1f'|format(l.seller_rating_avg or 0) }} ({{ l.seller_rating_count }})</small></p>
    <p><strong>{{ '%.4f'|format(l.price_xmr) }} XMR</strong><br><small>USD {{ '%.2f'|format(conv.usd) }} · EUR {{ '%.2f'|format(conv.eur) }}</small>
    {% if l.price_currency in ['EUR','USD'] and l.price_fiat %}<br><small>Fixed {{ l.price_currency }} {{ '%.2f'|format(l.price_fiat) }}</small>{% endif %}
    <br><small>Shipping: {{ '%.4f'|format(l.shipping_price_xmr or 0) }} XMR {% if (l.shipping_price_xmr or 0) == 0 %}· Free{% endif %}</small></p>
    <a href="{{ url_for('listing_detail', listing_id=l.id) }}">Open product page</a>
    {% if cart_enabled and current_user and can_purchase_account %}
    <form method="post" action="{{ url_for('cart_add', listing_id=l.id) }}" style="margin-top:.5rem">
      <button type="submit" class="secondary">Add to cart</button>
    </form>
    {% endif %}
  </article>
{% else %}
  <p>No listings matched your filters.</p>
{% endfor %}
</section>

{% if total_pages > 1 %}
<section class="action-card" style="margin-top:1rem;">
  <h3 style="margin-top:0;">More listings</h3>
  <p style="margin-bottom:.5rem;">Showing up to {{ page_size }} listings per page so the landing page stays fast.</p>
  <div style="display:flex; gap:.5rem; flex-wrap:wrap;">
    {% for link in pagination_links %}
      <a href="{{ link.url }}" role="button" class="{% if link.active %}contrast{% else %}secondary{% endif %}">{{ link.page }}</a>
    {% endfor %}
  </div>
</section>
{% endif %}

{% endblock %}