<%- include('partials/header', { title: 'Dashboard', heading: 'Dashboard', active: '/' }) %>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
  <% const cards = [
      ['Devices', stats.deviceCount, 'emerald'],
      ['Contacts', stats.contactCount, 'sky'],
      ['Campaigns', stats.campaignCount, 'violet'],
      ['Messages sent', stats.sentCount, 'amber']
  ]; %>
  <% cards.forEach(([label, value, color]) => { %>
    <div class="bg-white rounded-2xl shadow p-5">
      <p class="text-sm text-slate-500"><%= label %></p>
      <p class="text-3xl font-bold mt-1 text-<%= color %>-600"><%= value %></p>
    </div>
  <% }); %>
</div>

<div class="bg-white rounded-2xl shadow p-6">
  <h2 class="font-semibold mb-4">Connected devices</h2>
  <% if (devices.length === 0) { %>
    <p class="text-slate-500 text-sm">No devices yet. <a href="/devices" class="text-emerald-600 underline">Add one</a>.</p>
  <% } else { %>
    <ul class="divide-y">
      <% devices.forEach((d) => { %>
        <li class="py-3 flex items-center justify-between">
          <div>
            <p class="font-medium"><%= d.label %></p>
            <p class="text-sm text-slate-500"><%= d.phone_number || '—' %></p>
          </div>
          <span class="text-xs px-2 py-1 rounded-full <%= d.status === 'connected' ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-600' %>">
            <%= d.status %>
          </span>
        </li>
      <% }); %>
    </ul>
  <% } %>
</div>

<%- include('partials/footer') %>
