{% extends "base.html" %}
{% block title %}{{ cat.name }} {{ _('classifieds') }} — Classifieds{% endblock %}
{% block meta_description %}<meta name="description" content="{{ _('Browse %(cat)s listings near you — buy, sell, and connect with your local community.', cat=cat.name) }}">{% endblock %}
{% block og_title %}{{ cat.name }} {{ _('classifieds') }}{% endblock %}
{% block content %}
<div class="card">
  <h1>{{ cat.name }} {{ _('listings') }}</h1>
  <p class="muted">
    {{ _('%(n)s active listings', n=listings|length) }} ·
    <a href="{{ url_for('listings.browse', category=cat.id) }}">{{ _('See all with filters') }}</a>
  </p>
  {% if not listings %}
    <p class="muted">{{ _('No listings yet in this category.') }}</p>
  {% else %}
    <div class="listing-grid">
      {% for l in listings %}
      <a class="listing-card" href="{{ url_for('listings.detail', listing_id=l.id) }}">
        {% if l.images %}
          <img src="{{ url_for('listings.media', rel=l.images[0].thumb_path) }}"
               alt="{{ l.title }}" loading="lazy">
        {% endif %}
        <div class="listing-info">
          <div class="listing-title">{{ l.title }}</div>
          {% if l.price_display %}<div class="price">{{ l.price_display }}</div>{% endif %}
          <div class="muted small">{{ l.city or '' }}{% if l.city and l.state %}, {% endif %}{{ l.state or '' }}</div>
        </div>
      </a>
      {% endfor %}
    </div>
  {% endif %}

  {% if cat.children %}
  <h2>{{ _('Subcategories') }}</h2>
  <ul>
    {% for sub in cat.children %}
      {% if sub.is_active %}
      <li><a href="{{ url_for('listings.browse', category=sub.id) }}">{{ sub.name }}</a></li>
      {% endif %}
    {% endfor %}
  </ul>
  {% endif %}
</div>
{% endblock %}