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

<div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem;">
  <a href="{% url 'tree:camera-list' %}" class="brand-pill {% if not selected_brand %}brand-pill-active{% endif %}">All</a>
  {% for b in brands %}
  <a href="{% url 'tree:camera-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 cameras..."
    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;">{{ cameras|length }} cameras</p>

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