{% extends "base.html" %}
{% block title %}Pottery{% endblock %}

{% block extra_css %}
<style>
.pottery-mini-carousel {
  display: flex; gap: 4px; max-width: 200px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 2px;
}
.pottery-mini-carousel > a { scroll-snap-align: start; flex: 0 0 auto; }
.pottery-mini-carousel::-webkit-scrollbar { height: 4px; }
.pottery-mini-carousel::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid mt-3">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h1>Pottery <small class="text-muted">({{ total }})</small></h1>
    <div class="d-flex gap-2">
      <a href="{{ url_for('pottery_export_pdf', **filters) }}" class="btn btn-danger" title="Export filtered PDF">
        <i class="fas fa-file-pdf"></i> Export PDF
      </a>
      <a href="{{ url_for('pottery_create') }}" class="btn btn-primary">+ Nuovo</a>
    </div>
  </div>

  <form method="get" class="row g-2 mb-3">
    <div class="col-md-2"><input class="form-control form-control-sm" type="text"   name="sito"      value="{{ filters.sito or '' }}" placeholder="Sito"></div>
    <div class="col-md-1"><input class="form-control form-control-sm" type="text"   name="area"      value="{{ filters.area or '' }}" placeholder="Area"></div>
    <div class="col-md-1"><input class="form-control form-control-sm" type="number" name="us"        value="{{ filters.us or '' }}" placeholder="US"></div>
    <div class="col-md-1"><input class="form-control form-control-sm" type="number" name="id_number" value="{{ filters.id_number or '' }}" placeholder="ID num" min="0"></div>
    <div class="col-md-1"><input class="form-control form-control-sm" type="number" name="anno"      value="{{ filters.anno or '' }}" placeholder="Anno" min="1900" max="2099"></div>
    <div class="col-md-2"><input class="form-control form-control-sm" type="text"   name="form"      value="{{ filters.form or '' }}" placeholder="Forma" list="dl-forms"></div>
    <div class="col-md-1"><input class="form-control form-control-sm" type="text"   name="fabric"    value="{{ filters.fabric or '' }}" placeholder="Impasto" list="dl-fabrics"></div>
    <div class="col-md-2"><input class="form-control form-control-sm" type="text"   name="q"         value="{{ filters.q or '' }}" placeholder="Ricerca"></div>
    <div class="col-md-1"><button class="btn btn-sm btn-secondary">Filtra</button></div>
    <datalist id="dl-forms"></datalist>
    <datalist id="dl-fabrics"></datalist>
  </form>

  <div class="table-responsive">
  <table class="table table-sm table-hover">
    <thead><tr>
      <th>id_rep</th><th>id_num</th><th>Sito</th><th>Area</th><th>US</th>
      <th>Forma</th><th>Impasto</th><th>Ware</th><th>Qty</th><th>Media</th><th></th>
    </tr></thead>
    <tbody>
    {% for p in items %}
      <tr>
        <td>{{ p.id_rep }}</td><td>{{ p.id_number or '' }}</td>
        <td>{{ p.sito }}</td><td>{{ p.area or '' }}</td><td>{{ p.us or '' }}</td>
        <td>{{ p.form or '' }}</td><td>{{ p.fabric or '' }}</td>
        <td>{{ p.ware or '' }}</td><td>{{ p.qty or '' }}</td>
        <td>
          {% set media_list = media_by_pottery.get(p.id_rep, []) %}
          {% if media_list %}
            <div class="pottery-mini-carousel" role="list">
              {% for m in media_list %}
                <a class="glightbox" data-gallery="pot-{{ p.id_rep }}"
                   href="{{ m.url }}" data-title="{{ m.media_name }}" role="listitem">
                  <img src="{{ m.thumb_url or m.url }}" alt="" loading="lazy"
                       width="48" height="48"
                       style="object-fit:cover;border-radius:3px"/>
                </a>
              {% endfor %}
            </div>
          {% else %}
            <span class="badge bg-secondary">No</span>
          {% endif %}
        </td>
        <td>
  <a href="{{ url_for('pottery_detail', id_rep=p.id_rep) }}" class="btn btn-sm btn-outline-primary" title="View">
    <i class="fas fa-eye"></i>
  </a>
  <a href="{{ url_for('pottery_edit', id_rep=p.id_rep) }}" class="btn btn-sm btn-primary" title="Edit">
    <i class="fas fa-edit"></i> <span class="d-none d-lg-inline">Edit</span>
  </a>
  <a href="{{ url_for('pottery_export_single_pdf', id_rep=p.id_rep) }}" class="btn btn-sm btn-outline-danger" title="Export PDF" target="_blank">
    <i class="fas fa-file-pdf"></i>
  </a>
</td>
      </tr>
    {% else %}
      <tr><td colspan="11" class="text-muted">Nessun risultato</td></tr>
    {% endfor %}
    </tbody>
  </table>
  </div>

  {% set pages = (total // size) + (1 if total % size else 0) %}
  {% if pages > 1 %}
  <nav><ul class="pagination pagination-sm">
    {% for p in range(1, pages+1) %}
      <li class="page-item {% if p == page %}active{% endif %}">
        <a class="page-link" href="{{ url_for('pottery_list', page=p, **filters) }}">{{ p }}</a>
      </li>
    {% endfor %}
  </ul></nav>
  {% endif %}
</div>

<script>
fetch("/api/pottery/forms").then(r=>r.ok?r.json():{values:[]}).then(o=>{
  const dl = document.getElementById("dl-forms");
  (o.values||[]).forEach(v => { const opt=document.createElement("option"); opt.value=v; dl.appendChild(opt); });
}).catch(()=>{});
fetch("/api/pottery/fabrics").then(r=>r.ok?r.json():{values:[]}).then(o=>{
  const dl = document.getElementById("dl-fabrics");
  (o.values||[]).forEach(v => { const opt=document.createElement("option"); opt.value=v; dl.appendChild(opt); });
}).catch(()=>{});
document.addEventListener('DOMContentLoaded', function () {
  if (window.GLightbox) {
    GLightbox({ selector: '.pottery-mini-carousel a.glightbox' });
  }
});
</script>
{% endblock %}