<%# Tabela editável do veículo selecionado.
    SEM paginação de propósito: acima de 1366px a lista inteira é o certo — esconder
    item em monitor grande atrapalha até o Ctrl+F do navegador, e conferir romaneio é
    exatamente procurar uma NF na lista. A busca acima filtra sem esconder nada.

    <input> por célula, e não contenteditable: colar do Excel num contenteditable
    traz HTML junto. %>
<div class="bg-[#111] border border-white/5 rounded-2xl overflow-hidden">
  <div class="px-4 py-3 border-b border-white/5 flex items-center justify-between">
    <%# Sem repetir a contagem aqui: ela agora é VIVA no bloco de filtros (muda
        conforme a busca esconde linhas). Dois números para a mesma coisa, um
        atualizando e outro não, é a divergência que a diretriz 1 proíbe. %>
    <h2 class="text-white font-semibold text-sm">Paradas de <%= @veiculo %></h2>
    <span class="text-xs text-gray-500" data-romaneio-target="status">Alterações salvam sozinhas</span>
  </div>

  <div class="overflow-x-auto">
    <table class="w-full text-sm">
      <thead class="bg-[#1a1a1a] text-gray-400 text-xs uppercase tracking-wider">
        <tr>
          <th class="text-left px-2 py-2 w-10">#</th>
          <th class="text-left px-2 py-2 w-28">Nota fiscal</th>
          <th class="text-left px-2 py-2 w-56">Nome</th>
          <th class="text-left px-2 py-2">Endereço</th>
          <th class="text-center px-2 py-2 w-24">Aparelho</th>
          <th class="text-left px-2 py-2 w-44">Telefones</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-white/5">
        <% linhas.each_with_index do |linha, i| %>
          <tr data-romaneio-target="linha"
              data-busca="<%= [linha.nota_fiscal, linha.nome, linha.endereco].join(' ').downcase %>">
            <td class="px-2 py-1 text-gray-500 text-xs"><%= i + 1 %></td>
            <% %w[nota_fiscal nome endereco].each do |campo| %>
              <td class="px-1 py-1">
                <%= render 'celula', linha: linha, campo: campo %>
              </td>
            <% end %>

            <%# APARELHO só assume 'SIM' ou vazio: um botão de dois estados é alvo de
                toque de verdade e não deixa digitar um terceiro valor. %>
            <td class="px-1 py-1 text-center">
              <button type="button"
                      data-action="romaneio#alternarAparelho"
                      data-linha-id="<%= linha.id %>"
                      data-valor="<%= linha.aparelho %>"
                      class="<%= linha.aparelho == 'SIM' ? 'bg-green-600/20 text-green-300 border-green-600/40' : 'bg-[#1a1a1a] text-gray-500 border-white/10' %>
                             w-full min-h-[40px] rounded-lg border font-semibold text-xs hover:border-orange-500 transition-colors">
                <%= linha.aparelho.presence || '—' %>
              </button>
              <%= render 'marcador', linha: linha, campo: 'aparelho' %>
            </td>

            <td class="px-1 py-1">
              <%= render 'celula', linha: linha, campo: 'telefones' %>
            </td>
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>
</div>
