{% extends 'base.html' %}
{% from '_macros.html' import product_card, empty_state with context %}

{% block title %}TradeHub — Student Marketplace{% endblock %}

{% block content %}
<div class="container">

  {# Hero — only when not searching #}
  {% if not q and not category %}
  <section class="hero">
    <div class="hero-content">
      <span class="hero-tagline">
        <i data-lucide="sparkles" width="14" height="14" style="display:inline-block; vertical-align:middle;"></i>
        New listings every day
      </span>
      <h1>Find your next <span class="highlight">deal</span>.<br>Sell what you don't need.</h1>
      <p class="hero-subtitle">
        A student-only marketplace for textbooks, electronics, furniture,
        and everything in between — at prices that work for a student budget.
      </p>
      <div class="hero-actions">
        {% if current_user.is_authenticated %}
          <a href="{{ url_for('products.publish') }}" class="btn btn-primary btn-lg">
            <i data-lucide="plus" width="18" height="18"></i>
            List an item
          </a>
        {% else %}
          <a href="{{ url_for('auth.register') }}" class="btn btn-primary btn-lg">Get started</a>
          <a href="{{ url_for('auth.login') }}" class="btn btn-outline btn-lg" style="color:#fff; border-color:rgba(255,255,255,0.3);">Log in</a>
        {% endif %}
      </div>
    </div>
  </section>
  {% endif %}

  {# Category pills #}
  <nav class="category-pills" aria-label="Categories">
    <button type="button" class="category-pill {% if not category %}active{% endif %}" data-category-pill="all">All</button>
    {% for value, label in categories %}
      <button type="button" class="category-pill {% if category == value %}active{% endif %}" data-category-pill="{{ value }}">
        {{ label }}
      </button>
    {% endfor %}
  </nav>

  {# Filter / sort bar #}
  <div class="filter-bar">
    <h2>
      {% if q %}Results for "{{ q }}"
      {% elif category %}{{ category | replace('_', ' ') | title }}
      {% else %}Fresh finds{% endif %}
      <small class="text-muted text-sm" style="font-weight:400; margin-left:8px;">
        {{ pagination.total }} item{{ '' if pagination.total == 1 else 's' }}
      </small>
    </h2>
    <select class="sort-select" data-sort-select>
      <option value="newest"     {% if sort == 'newest' %}selected{% endif %}>Newest first</option>
      <option value="price_asc"  {% if sort == 'price_asc' %}selected{% endif %}>Price: Low → High</option>
      <option value="price_desc" {% if sort == 'price_desc' %}selected{% endif %}>Price: High → Low</option>
      <option value="popular"    {% if sort == 'popular' %}selected{% endif %}>Most viewed</option>
    </select>
  </div>

  {# Product grid #}
  {% if products %}
    <div class="product-grid">
      {% for product in products %}
        {{ product_card(product) }}
      {% endfor %}
    </div>

    {# Pagination #}
    {% if pagination.pages > 1 %}
      <div class="flex justify-between items-center mt-8" style="margin-bottom: var(--space-8);">
        {% if pagination.has_prev %}
          <a href="{{ url_for('main.index', q=q, category=category, sort=sort, page=pagination.prev_num) }}" class="btn btn-outline">
            <i data-lucide="arrow-left" width="16" height="16"></i> Previous
          </a>
        {% else %}<span></span>{% endif %}
        <span class="text-muted text-sm">Page {{ pagination.page }} / {{ pagination.pages }}</span>
        {% if pagination.has_next %}
          <a href="{{ url_for('main.index', q=q, category=category, sort=sort, page=pagination.next_num) }}" class="btn btn-outline">
            Next <i data-lucide="arrow-right" width="16" height="16"></i>
          </a>
        {% else %}<span></span>{% endif %}
      </div>
    {% endif %}

  {% else %}
    {{ empty_state(icon='search-x',
                   title='No items found',
                   message='Try different keywords or browse all categories.',
                   cta_url=url_for('main.index'),
                   cta_text='View all items') }}
  {% endif %}
</div>
{% endblock %}