{% extends "base.html" %}
{% block title %}{{ _('Browse listings') }}{% endblock %}
{% block content %}
<div class="browse">
  <aside class="filters card">
    <h3>{{ _('Filter') }}</h3>
    <form method="get" action="{{ url_for('listings.browse') }}">
      <div class="field">
        <label>{{ _('Keyword') }}</label>
        <input class="input" name="q" value="{{ filters.get('q','') }}">
      </div>
      <div class="field">
        <label>{{ _('Category') }}</label>
        <select class="input" name="category">
          <option value="">{{ _('All') }}</option>
          {% for c in categories %}
            <option value="{{ c.id }}" {{ 'selected' if filters.get('category')|string == c.id|string }}>{{ c.name }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="field"><label>{{ _('State') }}</label>
        <input class="input" name="state" maxlength="2" value="{{ filters.get('state','') }}"></div>
      <div class="row2">
        <div class="field"><label>{{ _('Min $') }}</label>
          <input class="input" name="min_price" type="number" value="{{ filters.get('min_price','') }}"></div>
        <div class="field"><label>{{ _('Max $') }}</label>
          <input class="input" name="max_price" type="number" value="{{ filters.get('max_price','') }}"></div>
      </div>
      <div class="row2">
        <div class="field"><label>{{ _('Near ZIP') }}</label>
          <input class="input" name="zip" value="{{ filters.get('zip','') }}"></div>
        <div class="field"><label>{{ _('Radius (mi)') }}</label>
          <input class="input" name="radius" type="number" value="{{ filters.get('radius','') }}"></div>
      </div>
      <button class="btn" type="submit">{{ _('Apply') }}</button>
    </form>
  </aside>

  <section class="results">
    {% if near %}<p class="muted">{{ _('%(n)s results within %(r)s mi of %(z)s', n=near.total, r=near.radius, z=near.zip) }}</p>{% endif %}
    {% if not results %}<p class="muted">{{ _('No listings found.') }}</p>{% endif %}
    <div class="grid">
      {% for l, dist in results %}
        <a class="tile card" href="{{ url_for('listings.detail', listing_id=l.id) }}">
          {% if l.cover %}<img class="thumb" src="{{ url_for('listings.media', rel=l.cover.thumb_path) }}" alt="">
          {% else %}<div class="thumb noimg">{{ _('No photo') }}</div>{% endif %}
          <div class="tile-body">
            <div class="tile-title">{{ l.title }}</div>
            <div class="tile-meta">
              {% if l.price_display %}<span class="price">{{ l.price_display }}</span>{% endif %}
              {% if l.is_featured %}<span class="badge">{{ _('Featured') }}</span>{% endif %}
            </div>
            <div class="muted small">
              {% if l.city %}{{ l.city }}, {{ l.state }}{% endif %}
              {% if dist is not none %} · {{ dist }} mi{% endif %}
            </div>
          </div>
        </a>
      {% endfor %}
    </div>

    <div class="pager">
      {% if page > 1 %}<a href="{{ url_for('listings.browse', **merge_query(page=page-1)) }}">&larr; {{ _('Prev') }}</a>{% endif %}
      {% if has_next %}<a href="{{ url_for('listings.browse', **merge_query(page=page+1)) }}">{{ _('Next') }} &rarr;</a>{% endif %}
    </div>
  </section>
</div>
{% endblock %}