{% extends "public/base.html" %}
{% block title %}Artworks — {{ gallery.public_name or gallery.name }}{% endblock %}
{% block content %}
<div class="pub-container" style="padding:48px 24px;max-width:1200px;margin:0 auto;">

  <h1 style="font-family:var(--font-serif);font-size:2rem;font-weight:300;margin-bottom:8px;">{{ _("Collection") }}</h1>
  <div style="width:40px;height:1px;background:var(--border);margin-bottom:40px;"></div>

  <!-- Filters -->
  <form method="GET" action="" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:40px;align-items:flex-end;">
    <div>
      <label style="font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:4px;">{{ _("Artist") }}</label>
      <select name="artist" class="pub-input" style="min-width:160px;" onchange="this.form.submit()">
        <option value="">All Artists</option>
        {% for artist in artists %}
        <option value="{{ artist.id }}" {% if selected_artist == artist.id %}selected{% endif %}>
          {{ artist.first_name }} {{ artist.last_name }}
        </option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label style="font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:4px;">{{ _("Medium") }}</label>
      <select name="medium_category" class="pub-input" style="min-width:160px;" onchange="this.form.submit()">
        <option value="">All Mediums</option>
        {% for cat in medium_categories %}
        <option value="{{ cat }}" {% if selected_medium_category == cat %}selected{% endif %}>{{ cat }}</option>
        {% endfor %}
      </select>
    </div>
    <div style="display:flex;gap:8px;align-items:flex-end;">
      <div>
        <label style="font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:4px;">Min CHF</label>
        <input type="number" name="price_min" class="pub-input" style="width:90px;"
               value="{{ price_min|int if price_min else '' }}" placeholder="0">
      </div>
      <div>
        <label style="font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:4px;">Max CHF</label>
        <input type="number" name="price_max" class="pub-input" style="width:90px;"
               value="{{ price_max|int if price_max else '' }}" placeholder="Any">
      </div>
    </div>
    <button type="submit" class="btn-pub btn-pub-dark" style="padding:8px 20px;font-size:0.75rem;">{{ _("Filter") }}</button>
    {% if selected_artist or selected_medium or price_min or price_max %}
    <a href="{{ url_for('public.artworks') }}" class="btn-pub btn-pub-outline" style="padding:8px 20px;font-size:0.75rem;">{{ _("Clear") }}</a>
    {% endif %}
  </form>

  <div style="font-size:0.78rem;color:var(--muted);margin-bottom:24px;">{{ artworks|length }} work{{ 's' if artworks|length != 1 }}</div>

  <!-- Grid -->
  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:32px;">
    {% for aw in artworks %}
    {% set img = aw.images[0] if aw.images else none %}
    <a href="{{ url_for('public.artwork_detail', id=aw.id) }}" style="text-decoration:none;color:inherit;">
      <div>
        {% if img and img.iiif_url %}
        <img src="{{ img.iiif_url }}" alt="{{ aw.title }}"
             style="width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--border-light);">
        {% else %}
        <div style="width:100%;aspect-ratio:1;background:var(--border-light);"></div>
        {% endif %}
        <div style="padding:12px 0 0;">
          <div style="font-family:var(--font-serif);font-size:0.95rem;margin-bottom:2px;">{{ aw.title }}</div>
          <div style="font-size:0.78rem;color:var(--muted);font-style:italic;">
            {% if aw.contact_artist %}{{ aw.contact_artist.first_name }} {{ aw.contact_artist.last_name }}{% endif %}
          </div>
          {% if aw.price %}
          <div style="font-size:0.78rem;color:var(--muted);margin-top:4px;">{{ aw.price|ch_currency(aw.currency or 'CHF') }}</div>
          {% endif %}
        </div>
      </div>
    </a>
    {% endfor %}
  </div>

</div>
{% endblock %}