<%# app/views/consolidacoes/_lista.html.erb — visão por CONSOLIDAÇÃO %>
<% if @consolidacoes.any? %>
  <%# Em celular/monitor pequeno a lista vira carrossel de 10 em 10; em tela
      grande aparece inteira (ver carrossel_controller.js). %>
  <div data-controller="carrossel" data-carrossel-tamanho-value="10" class="relative sm:px-16">
  <div class="space-y-3">
    <% @consolidacoes.each do |c| %>
      <%= link_to consolidacao_path(c),
          data: { carrossel_target: 'item' },
          class: 'block bg-[#1a1a1a] border border-[#2a2a2a] hover:border-orange-500 rounded-xl p-5 transition-colors' do %>
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
          <div>
            <div class="flex items-center gap-3 mb-1">
              <h3 class="text-white font-bold text-lg"><%= c.nome %></h3>
              <%= badge_status(c.status) %>
              <% if c.finalizada? %><%= badge_pagamento(c.status_pagamento) %><% end %>
            </div>
            <p class="text-gray-400 text-sm">
              <%= icone :calendario %> <%= l c.data_inicio, format: :short %> → <%= l c.data_fim, format: :short %>
              · <%= icone :pessoa %> <%= c.consolidacao_motoristas.count %> motorista(s)
              · Criada por <%= c.criador.nome_display %>
            </p>
            <% if c.operacoes.present? %>
              <p class="text-gray-500 text-xs mt-1"><%= icone :pasta %> <%= c.operacoes_label.join(' · ') %></p>
            <% end %>
          </div>
          <div class="text-right">
            <p class="text-orange-500 font-black text-2xl"><%= moeda(c.valor_total) %></p>
            <p class="text-gray-500 text-xs"><%= c.consolidacao_entregas.count %> entregas classificadas</p>
          </div>
        </div>
      <% end %>
    <% end %>
  </div>

    <%= render 'shared/carrossel_controles',
            anterior: 'Consolidações anteriores', proximo: 'Próximas consolidações' %>
  </div>
<% else %>
  <div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl p-12 text-center">
    <p class="mb-4"><%= icone :vazio, tamanho: 'w-12 h-12', cor: 'text-gray-600', espaco: false %></p>
    <p class="text-gray-400 mb-4">Nenhuma consolidação encontrada.</p>
    <%= link_to 'Criar primeira consolidação', new_consolidacao_path,
        class: 'inline-block bg-orange-500 hover:bg-orange-600 text-black font-bold px-5 py-3 rounded-lg' %>
  </div>
<% end %>
