{% extends "base.html" %}
{% block titulo %}{{ 'Editar' if id_prod else 'Nuevo' }} ítem{% endblock %}
{% block encabezado %}{{ 'Editar ítem del catálogo' if id_prod else 'Nuevo ítem del catálogo' }}{% endblock %}
{% block contenido %}

<div class="tarjeta" style="max-width:760px">
  <form class="tarjeta__cuerpo" method="post">
    <div class="form-grid">
      <div class="campo"><label>Categoría</label>
        <select name="categoria" id="categoria">
          {% for c in categorias %}
          <option value="{{ c }}" {{ 'selected' if registro.get('categoria')==c }}>{{ c }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="campo"><label>Código / SKU *</label>
        <input name="codigo" id="codigo" value="{{ registro.get('codigo','') }}" required></div>
      <div class="campo full"><label>Descripción *</label>
        <input name="descripcion" value="{{ registro.get('descripcion','') }}" required></div>
      <div class="campo"><label>Precio ($) *</label>
        <input name="precio" value="{{ registro.get('precio','') }}" inputmode="numeric" required></div>
    </div>
    <div class="acciones">
      <button class="btn btn--primario">Guardar ítem</button>
      <a class="btn btn--fantasma" href="{{ url_for('catalogo.lista') }}">Cancelar</a>
    </div>
  </form>
</div>

{% if not id_prod %}
<script>
document.getElementById('categoria').addEventListener('change', async (e) => {
  const r = await fetch('{{ url_for("catalogo.sugerir", categoria="__CAT__") }}'.replace('__CAT__', encodeURIComponent(e.target.value)));
  const j = await r.json();
  if (j.codigo) document.getElementById('codigo').value = j.codigo;
});
</script>
{% endif %}
{% endblock %}