{% extends "base.html" %}
{% block title %}Lenses — {{ site_title }}{% endblock %}
{% block content %}
<div class="page-header">
  <h1>Lenses</h1>
  <p>Browse photography by lens</p>
</div>

<div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem;">
  <a href="{% url 'tree:lens-list' %}" class="brand-pill {% if not selected_brand %}brand-pill-active{% endif %}">All</a>
  {% for b in brands %}
  <a href="{% url 'tree:lens-list' %}?brand={{ b }}" class="brand-pill {% if selected_brand == b %}brand-pill-active{% endif %}">{{ b }}</a>
  {% endfor %}
</div>

<form method="get" style="margin-bottom: 1.5rem;">
  {% if selected_brand %}<input type="hidden" name="brand" value="{{ selected_brand }}">{% endif %}
  <input type="text" name="q" value="{{ query }}" placeholder="Filter lenses..."
    style="width: 100%; max-width: 400px; padding: 0.5rem 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text);">
</form>

<p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1rem;">{{ lenses|length }} lenses</p>

<div class="gear-grid">
  {% for l in lenses %}
  <a href="/lenses/{{ l.slug }}/" class="gear-card" style="color: inherit;">
    <h3>{{ l.display_name }}</h3>
    <div>
      <span class="count">{{ l.image_count }} images</span>
      {% if l.max_aperture %}<span class="count"> · f/{{ l.max_aperture }}</span>{% endif %}
    </div>
  </a>
  {% empty %}
  <div class="empty" style="grid-column: 1 / -1;">No lenses match your filter.</div>
  {% endfor %}
</div>
{% if not show_all %}
<div style="text-align: center; margin-top: 2rem;">
  <a href="{% url 'tree:lens-list-all' %}" class="btn">View all lenses</a>
</div>
{% endif %}
{% endblock %}
{% block scripts %}
{% include "includes/gear_keynav.html" %}
{% endblock %}