{% extends "base.html" %}
{% block title %}{{ "Component nou" if is_new else "Editare component" }}{% endblock %}

{% block content %}
<section class="page-head">
  <div>
    <h1>{{ "Component nou" if is_new else "Editare component" }}</h1>
    <p class="subtitle">Numele apare pe etichetă, lângă greutate.</p>
  </div>
</section>

<section class="card narrow">
  <form method="post" class="form">
    <div class="field">
      <label for="code">Cod <span class="req">*</span></label>
      <input id="code" name="code" type="text" maxlength="40" required
             value="{{ component.code or '' }}" autofocus>
    </div>
    <div class="field">
      <label for="name">Denumire <span class="req">*</span></label>
      <input id="name" name="name" type="text" maxlength="120" required
             value="{{ component.name or '' }}" placeholder="ex. Fasole">
    </div>
    <div class="field">
      <label for="unit">Unitate de măsură</label>
      <select id="unit" name="unit">
        {% for u in ["g", "kg", "mg", "t", "lb", "oz"] %}
        <option value="{{ u }}" {{ 'selected' if (component.unit or 'g') == u }}>{{ u }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="field">
      <label for="description">Descriere</label>
      <textarea id="description" name="description" rows="3" maxlength="500">{{ component.description or '' }}</textarea>
    </div>
    <label class="check">
      <input type="checkbox" name="active" {{ 'checked' if component.active in [True, 1, '1', 'on', 'true'] or is_new }}>
      Component activ
    </label>

    <div class="actions">
      <button class="btn primary" type="submit">Salvează</button>
      <a class="btn ghost" href="{{ url_for('components.index') }}">Renunță</a>
    </div>
  </form>
</section>
{% endblock %}