{% extends "base.html" %}
{% block title %}Search — {{ site_title }}{% endblock %}
{% block content %}
<div class="page-header">
  <h1>Search</h1>
  <p>Find images by EXIF data</p>
</div>

<form method="get" class="search-form">
  <div class="field">
    <label>Keyword</label>
    <input type="text" name="q" value="{{ q }}" placeholder="Title or description...">
  </div>
  <div class="field">
    <label>Camera</label>
    <select name="camera">
      <option value="">Any</option>
      {% for c in cameras %}
      <option value="{{ c.id }}" {% if camera == c.id|slugify %}selected{% endif %}>{{ c.display_name }}</option>
      {% endfor %}
    </select>
  </div>
  <div class="field">
    <label>Lens</label>
    <select name="lens">
      <option value="">Any</option>
      {% for l in lenses %}
      <option value="{{ l.id }}" {% if lens == l.id|slugify %}selected{% endif %}>{{ l.display_name }}</option>
      {% endfor %}
    </select>
  </div>
  <div class="field">
    <label>Focal (mm)</label>
    <div style="display: flex; gap: 0.25rem;">
      <input type="number" name="focal_min" value="{{ focal_min }}" placeholder="min" style="width: 5rem;">
      <input type="number" name="focal_max" value="{{ focal_max }}" placeholder="max" style="width: 5rem;">
    </div>
  </div>
  <div class="field">
    <label>Aperture (f/)</label>
    <div style="display: flex; gap: 0.25rem;">
      <input type="number" step="0.1" name="aperture_min" value="{{ aperture_min }}" placeholder="min" style="width: 5rem;">
      <input type="number" step="0.1" name="aperture_max" value="{{ aperture_max }}" placeholder="max" style="width: 5rem;">
    </div>
  </div>
  <div class="field">
    <label>ISO</label>
    <div style="display: flex; gap: 0.25rem;">
      <input type="number" name="iso_min" value="{{ iso_min }}" placeholder="min" style="width: 5rem;">
      <input type="number" name="iso_max" value="{{ iso_max }}" placeholder="max" style="width: 5rem;">
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Search</button>
</form>

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

<div class="image-grid">
  {% for img in images %}
  <div>
    <a href="/images/{{ img.id }}/" class="image-card">
      {% if img.thumbnail_medium %}<img src="{{ img.thumbnail_medium.url }}" alt="{{ img.title }}">
      {% elif img.thumbnail_small %}<img src="{{ img.thumbnail_small.url }}" alt="{{ img.title }}">{% endif %}
      {% include "includes/image_overlay.html" %}
    </a>
  </div>
  {% empty %}
  <div class="empty" style="grid-column: 1 / -1;">No images match your filters.</div>
  {% endfor %}
</div>
{% endblock %}