{% extends "base.html" %}
{% block titre %}Matériels - Gestion de stock IT{% endblock %}
{% block contenu %}
<h1>Matériels</h1>

<table>
  <thead>
    <tr>
      <th>Nom</th>
      <th>Sous-catégorie</th>
      <th>Code-barre</th>
      <th>Quantité</th>
      <th>Seuil d'alerte</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    {% for materiel in materiels %}
    <tr class="{{ 'stock-bas' if materiel.seuil_alerte is not none and materiel.quantite < materiel.seuil_alerte else '' }}">
      <td><input type="text" name="nom" value="{{ materiel.nom }}" form="materiel-{{ materiel.id }}" required></td>
      <td>{{ materiel.sous_categorie.categorie.nom }} / {{ materiel.sous_categorie.nom }}</td>
      <td><input type="text" name="code_barre" value="{{ materiel.code_barre or '' }}" form="materiel-{{ materiel.id }}"></td>
      <td><input type="number" name="quantite" value="{{ materiel.quantite }}" min="0" form="materiel-{{ materiel.id }}" required></td>
      <td><input type="number" name="seuil_alerte" value="{{ materiel.seuil_alerte if materiel.seuil_alerte is not none else '' }}" min="0" form="materiel-{{ materiel.id }}"></td>
      <td>
        <button type="submit" form="materiel-{{ materiel.id }}">Enregistrer</button>
        <button type="submit" form="materiel-{{ materiel.id }}" formaction="/materiels/{{ materiel.id }}/supprimer" class="bouton-danger">Supprimer</button>
      </td>
    </tr>
    {% else %}
    <tr><td colspan="6">Aucun matériel pour l'instant.</td></tr>
    {% endfor %}
  </tbody>
</table>

{# Un <form> par matériel, hors du tableau : un <form> ne peut pas
   entourer plusieurs <td> en HTML valide. Les champs du tableau ci-dessus
   s'y rattachent via l'attribut form="materiel-{id}" (HTML5). #}
{% for materiel in materiels %}
<form id="materiel-{{ materiel.id }}" method="post" action="/materiels/{{ materiel.id }}/modifier" hidden></form>
{% endfor %}

<h2>Ajouter un matériel</h2>
{% if sous_categories %}
<form method="post" action="/materiels" class="formulaire-grille">
  <label>Nom <input type="text" name="nom" required></label>
  <label>Sous-catégorie
    <select name="sous_categorie_id" required>
      {% for sous_categorie in sous_categories %}
      <option value="{{ sous_categorie.id }}">{{ sous_categorie.categorie.nom }} / {{ sous_categorie.nom }}</option>
      {% endfor %}
    </select>
  </label>
  <label>Code-barre <input type="text" name="code_barre"></label>
  <label>Quantité initiale <input type="number" name="quantite" value="0" min="0"></label>
  <label>Seuil d'alerte <input type="number" name="seuil_alerte" min="0"></label>
  <button type="submit">Créer</button>
</form>
{% else %}
<p>Créez d'abord une <a href="/categories">catégorie et une sous-catégorie</a> avant d'ajouter un matériel.</p>
{% endif %}
{% endblock %}