{% extends "base.html" %}
{% block title %}Itens de manutenção — Frota Trucks{% endblock %}
{% block body %}
<header>
  <div class="brand">Frota Trucks{% set h = header_info() %}{% if h.company %} · {{ h.company }}{% endif %}{% if h.machine_id %} · <span class="secondary" style="font-weight:400; font-size:0.82rem">Cód: {{ h.machine_id }}</span>{% endif %}</div>
  <nav style="display:flex; align-items:center">
    <a href="/">Painel</a>
    <a href="/manutencao">Itens de manutenção</a>
    <a href="/configuracoes">Configurações</a>
    <a href="/usuarios">Usuários</a>
    <form method="post" action="/api/logout" style="display:inline; margin-left:18px">
      <button type="submit" class="secondary-btn" style="padding:4px 10px; font-size:0.85rem">Sair</button>
    </form>
  </nav>
</header>
<main>
  <h2>Itens de manutenção</h2>
  <p class="secondary">Os intervalos abaixo são ponto de partida — ajuste conforme a aplicação dos seus trucks e as recomendações do fabricante do motor.</p>

  <div class="card" style="margin-bottom:20px">
    <table>
      <thead>
        <tr>
          <th>Item</th><th>Intervalo (mi)</th><th>Intervalo (h)</th><th>Intervalo (dias)</th>
          <th>Avisar (mi antes)</th><th>Avisar (h antes)</th><th>Avisar (dias antes)</th>
          <th>Ativo</th><th></th>
        </tr>
      </thead>
      <tbody>
        {% for item in items %}
        <tr>
          <td><input type="text" name="name" form="item-form-{{ item.id }}" value="{{ item.name }}" style="width:100%; min-width:240px"></td>
          <td><input type="number" name="interval_miles" form="item-form-{{ item.id }}" value="{{ item.interval_miles|int if item.interval_miles else '' }}" style="width:100px"></td>
          <td><input type="number" name="interval_hours" form="item-form-{{ item.id }}" value="{{ item.interval_hours|int if item.interval_hours else '' }}" style="width:90px"></td>
          <td><input type="number" name="interval_days" form="item-form-{{ item.id }}" value="{{ item.interval_days or '' }}" style="width:90px"></td>
          <td><input type="number" name="warning_miles" form="item-form-{{ item.id }}" value="{{ item.warning_miles|int if item.warning_miles else '' }}" style="width:100px"></td>
          <td><input type="number" name="warning_hours" form="item-form-{{ item.id }}" value="{{ item.warning_hours|int if item.warning_hours else '' }}" style="width:90px"></td>
          <td><input type="number" name="warning_days" form="item-form-{{ item.id }}" value="{{ item.warning_days or '' }}" style="width:90px"></td>
          <td><input type="checkbox" name="active" form="item-form-{{ item.id }}" {% if item.active %}checked{% endif %} value="1"></td>
          <td>
            <button type="submit" form="item-form-{{ item.id }}" class="secondary-btn">Salvar</button>
            <button type="submit" form="item-form-{{ item.id }}" formaction="/api/manutencao/{{ item.id }}/excluir"
                    class="secondary-btn" onclick="return confirm('Excluir o item {{ item.name }}?')">Excluir</button>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% for item in items %}
    <form id="item-form-{{ item.id }}" method="post" action="/api/manutencao/{{ item.id }}" style="display:none"></form>
    {% endfor %}
  </div>

  <div class="card">
    <h3 style="margin-top:0">Novo item</h3>
    <form method="post" action="/api/manutencao" style="display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap">
      <div><label>Nome</label><input type="text" name="name" required></div>
      <div><label>Intervalo (milhas)</label><input type="number" name="interval_miles"></div>
      <div><label>Intervalo (horas)</label><input type="number" name="interval_hours"></div>
      <div><label>Intervalo (dias)</label><input type="number" name="interval_days"></div>
      <div><button type="submit">Adicionar</button></div>
    </form>
  </div>
</main>
{% endblock %}