{% extends "base.html" %}
{% block title %}{{ exhibition.title }} — ArtNode{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <a href="{{ url_for('exhibitions.index') }}" style="font-size:0.75rem;color:var(--text-muted);letter-spacing:0.06em;text-transform:uppercase;">&larr; Exhibitions</a>
    <div class="page-title" style="margin-top:4px;">{{ exhibition.title }}</div>
    <div class="page-subtitle">
      {% if exhibition.venue %}{{ exhibition.venue }}{% endif %}
      {% if exhibition.start_date %} · {{ exhibition.start_date|ch_date }}{% if exhibition.end_date %} – {{ exhibition.end_date|ch_date }}{% endif %}{% endif %}
    </div>
  </div>
  <div class="page-actions">
    <a href="{{ url_for('exhibitions.edit', id=exhibition.id) }}" class="btn btn-secondary">Edit</a>
    <a href="{{ url_for('public.exhibition_detail', id=exhibition.id) }}" target="_blank" class="btn btn-secondary" style="margin-left:8px;">Preview Public</a>
    <form method="POST" action="{{ url_for('exhibitions.delete', id=exhibition.id) }}"
          onsubmit="return confirm('Delete this exhibition?')" style="display:inline;">
      <button type="submit" class="btn btn-secondary" style="margin-left:8px;">Delete</button>
    </form>
  </div>
</div>

<div class="page-body">
  {% if exhibition.description %}
  <div style="max-width:640px;margin-bottom:var(--space-xl);font-size:0.9rem;line-height:1.8;color:var(--text-secondary);">
    {{ exhibition.description }}
  </div>
  {% endif %}

  <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2xl);">

    <!-- Assigned artworks -->
    <div>
      <div style="font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-md);">
        In Exhibition ({{ exhibition.artworks|length }})
      </div>
      {% for ea in exhibition.artworks|sort(attribute='sort_order') %}
      {% set aw = ea.artwork %}
      <div style="background:var(--surface);border:1px solid var(--border);padding:var(--space-md);margin-bottom:var(--space-sm);display:flex;align-items:center;gap:var(--space-md);">
        {% set img = aw.images[0] if aw.images else none %}
        {% if img and img.iiif_url %}
          <img src="{{ img.iiif_url }}" style="width:56px;height:56px;object-fit:cover;flex-shrink:0;">
        {% endif %}
        <div style="flex:1;min-width:0;">
          <div style="font-size:0.88rem;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ aw.title }}</div>
          <div style="font-size:0.78rem;color:var(--text-secondary);font-style:italic;font-family:var(--font-display);">
            {% if aw.contact_artist %}{{ aw.contact_artist.last_name }}{% elif aw.artist %}{{ aw.artist.last_name }}{% endif %}
          </div>
        </div>
        <form method="POST" action="{{ url_for('exhibitions.remove', id=exhibition.id, artwork_id=aw.id) }}" style="flex-shrink:0;">
          <button type="submit" class="btn btn-secondary" style="padding:4px 10px;font-size:0.72rem;">Remove</button>
        </form>
      </div>
      {% else %}
      <p style="font-size:0.85rem;color:var(--text-muted);">No artworks added yet.</p>
      {% endfor %}
    </div>

    <!-- Available artworks -->
    <div>
      <div style="font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-md);">Add Artworks</div>
      <input type="text" class="search-input" placeholder="Search..." id="exSearch" style="margin-bottom:var(--space-md);width:100%;">
      {% for aw in available %}
        {% if aw.id not in assigned_ids %}
        <div class="ex-row" data-title="{{ aw.title|lower }}" data-artist="{{ (aw.contact_artist.last_name if aw.contact_artist else (aw.artist.last_name if aw.artist else ''))|lower }}"
             style="background:var(--surface);border:1px solid var(--border);padding:var(--space-md);margin-bottom:var(--space-sm);display:flex;align-items:center;gap:var(--space-md);">
          {% set img = aw.images[0] if aw.images else none %}
          {% if img and img.iiif_url %}
            <img src="{{ img.iiif_url }}" style="width:56px;height:56px;object-fit:cover;flex-shrink:0;">
          {% endif %}
          <div style="flex:1;min-width:0;">
            <div style="font-size:0.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ aw.title }}</div>
            <div style="font-size:0.78rem;color:var(--text-secondary);font-style:italic;font-family:var(--font-display);">
              {% if aw.contact_artist %}{{ aw.contact_artist.last_name }}{% elif aw.artist %}{{ aw.artist.last_name }}{% endif %}
            </div>
          </div>
          <form method="POST" action="{{ url_for('exhibitions.assign', id=exhibition.id, artwork_id=aw.id) }}" style="flex-shrink:0;">
            <button type="submit" class="btn btn-secondary" style="padding:4px 12px;font-size:0.72rem;">Add</button>
          </form>
        </div>
        {% endif %}
      {% endfor %}
    </div>

  </div>
</div>

<script>
const exSearch = document.getElementById('exSearch');
const exRows = document.querySelectorAll('.ex-row');
function filterEx() {
  const q = exSearch.value.toLowerCase().trim();
  exRows.forEach(row => {
    const match = !q || row.dataset.title.includes(q) || row.dataset.artist.includes(q);
    row.style.display = match ? '' : 'none';
  });
}
exSearch.addEventListener('input', () => {
  filterEx();
  sessionStorage.setItem('search_ex', exSearch.value);
});
const exSaved = sessionStorage.getItem('search_ex');
if (exSaved) { exSearch.value = exSaved; filterEx(); }
</script>
{% endblock %}