{% extends "base.html" %}
{% block content %}
<div class="d-flex justify-content-between align-items-center">
  <h4>Articles</h4>
  <div>
    <a class="btn btn-outline-secondary btn-sm" href="/import.xlsx">Import Excel</a>
    <a class="btn btn-primary btn-sm" href="/items/add/">Ajouter</a>
  </div>
</div>

<form class="row g-2 mt-2" method="get">
  <div class="col-md-4">
    <select class="form-select" name="category" onchange="this.form.submit()">
      <option value="">Toutes catégories</option>
      {% for c in categories %}
        <option value="{{ c.id }}" {% if selected_category == c.id %}selected{% endif %}>{{ c.name }}</option>
      {% endfor %}
    </select>
  </div>
</form>

<table class="table table-striped mt-3">
  <thead><tr><th>Libellé</th><th>Catégorie</th><th></th></tr></thead>
  <tbody>
  {% for it in items %}
    <tr>
      <td><a href="/items/{{ it.id }}/">{{ it.code }}</a></td>
      <td>{{ it.category.name if it.category else "" }}</td>
      <td class="text-end">
        <a class="btn btn-outline-secondary btn-sm" href="/items/{{ it.id }}/move/">Déplacer</a>
      </td>
    </tr>
  {% endfor %}
  </tbody>
</table>
{% endblock %}