{% extends "base.html" %}
{% block title %}Usuários — 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>Usuários do painel</h2>
  {% if error %}<div class="error" style="margin-bottom:16px">{{ error }}</div>{% endif %}

  <div class="card" style="margin-bottom:20px">
    <table>
      <thead><tr><th>Usuário</th><th>Criado em</th><th>Trocar senha</th><th></th></tr></thead>
      <tbody>
        {% for user in users %}
        <tr>
          <td><strong>{{ user.username }}</strong></td>
          <td class="secondary">{{ user.created_at.strftime("%d/%m/%Y") }}</td>
          <td>
            <form method="post" action="/api/usuarios/{{ user.id }}/senha" style="display:flex; gap:6px">
              <input type="password" name="nova_senha" placeholder="nova senha" required style="width:120px">
              <input type="password" name="confirmar_nova_senha" placeholder="confirmar" required style="width:120px">
              <button type="submit" class="secondary-btn">Salvar</button>
            </form>
          </td>
          <td>
            <form method="post" action="/api/usuarios/{{ user.id }}/excluir" onsubmit="return confirm('Excluir o usuário {{ user.username }}?')">
              <button type="submit" class="secondary-btn">Excluir</button>
            </form>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <div class="card">
    <h3 style="margin-top:0">Novo usuário</h3>
    <form method="post" action="/api/usuarios" style="display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap">
      <div><label>Usuário</label><input type="text" name="username" required></div>
      <div><label>Senha</label><input type="password" name="password" required></div>
      <div><label>Confirmar senha</label><input type="password" name="confirmar_senha" required></div>
      <div><button type="submit">Criar</button></div>
    </form>
  </div>
</main>
{% endblock %}