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

<form method="post" action="/scan" class="formulaire-inline">
  <input type="text" name="code_barre" id="champ-scan" placeholder="Scannez un code-barre..." autocomplete="off" autofocus required>
</form>

{% if erreur %}
<p class="message-erreur">{{ erreur }}</p>
{% endif %}

{% if materiel %}
<section class="carte">
  <h2>{{ materiel.nom }}</h2>
  <p>{{ materiel.sous_categorie.categorie.nom }} / {{ materiel.sous_categorie.nom }}</p>
  <p class="quantite-actuelle">Quantité en stock : <strong>{{ materiel.quantite }}</strong></p>

  <div class="formulaire-inline">
    <form method="post" action="/scan/{{ materiel.id }}/ajuster">
      <input type="hidden" name="delta" value="1">
      <button type="submit">+ 1 (réception)</button>
    </form>
    <form method="post" action="/scan/{{ materiel.id }}/ajuster">
      <input type="hidden" name="delta" value="-1">
      <button type="submit">- 1 (sortie)</button>
    </form>
  </div>
</section>
{% endif %}

<script>
  // Remet le focus sur le champ de scan à chaque affichage de la page,
  // pour pouvoir enchaîner les scans sans avoir à cliquer dans le champ.
  document.getElementById("champ-scan").focus();
</script>
{% endblock %}