{% extends "base.html" %}
{% block title %}{{ state }} {{ _('classifieds') }} — Classifieds{% endblock %}
{% block meta_description %}<meta name="description" content="{{ _('Browse local classifieds in %(state)s — buy, sell, find jobs and services.', state=state) }}">{% endblock %}
{% block og_title %}{{ state }} {{ _('classifieds') }}{% endblock %}
{% block content %}
<div class="card">
  <h1>{{ state }} {{ _('listings') }}</h1>
  <p class="muted">
    {{ _('%(n)s active listings', n=listings|length) }} ·
    <a href="{{ url_for('listings.browse', state=state) }}">{{ _('See all with filters') }}</a>
  </p>
  {% if not listings %}
    <p class="muted">{{ _('No listings in %(state)s yet.', state=state) }}</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 %}
</div>
{% endblock %}