<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cliënten — Mek-Tech Consulting</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/css/dynamic.css">
  <link rel="icon" href="/img/favicon.svg" type="image/svg+xml">
</head>
<body>
  <nav class="navbar"><div class="nav-inner"><a href="/" class="nav-brand"><img src="/img/logo.svg" class="nav-logo" alt="Mek-Tech"></a><div style="display:flex;align-items:center;gap:.4rem"><a href="/" class="nav-icon-btn" title="Dashboard"><i data-lucide="layout-dashboard" style="width:15px;height:15px"></i> Dashboard</a><button class="theme-toggle" id="themeToggle" onclick="toggleTheme()"></button><a href="/auth/logout" class="nav-icon-btn" style="color:var(--red)"><i data-lucide="log-out" style="width:15px;height:15px"></i> Uitloggen</a></div></div></nav>

  <div class="container">
    <a href="javascript:history.back()" class="back-link"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg> Terug</a>
<div class="page-header">
      <h1>Clients</h1>
      <a href="/clients/new" class="btn btn-primary">+ Nieuwe cliënt</a>
    </div>

    <% if (clients.length === 0) { %>
    <div class="empty-state">
      <p>Nog geen cliënten. <a href="/clients/new" class="link">Voeg je eerste cliënt toe</a>.</p>
    </div>
    <% } else { %>
    <table class="data-table">
      <thead>
        <tr>
          <th>Bedrijf</th>
          <th>Sector</th>
          <th>Status</th>
          <th>Engagements</th>
          <th>Laatste Assessment</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <% clients.forEach(function(c) { %>
        <tr>
          <td><a href="/clients/<%= c.id %>" class="link"><%= c.name %></a></td>
          <td><%= c.industry || '-' %></td>
          <td><span class="status-badge <%= c.status %>"><%= c.status %></span></td>
          <td><%= c.engagement_count %></td>
          <td><%= c.last_assessment ? new Date(c.last_assessment).toLocaleDateString('nl-NL') : '-' %></td>
          <td><a href="/clients/<%= c.id %>/edit" class="btn-small">Bewerk</a></td>
        </tr>
        <% }) %>
      </tbody>
    </table>
    <% } %>
  </div>
<script src="/js/theme.js"></script></body>
</html>
