<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><%= project ? project.name : 'Project' %> — Mek-Tech</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/neon.css">
<link rel="stylesheet" href="/css/dynamic.css">
<script src="https://unpkg.com/lucide@latest"></script>
<style>
.pd-wrap{max-width:960px;margin:0 auto;padding:1.5rem 2rem 3rem}
.pd-hdr{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem}
.pd-hdr h1{font-size:1.4rem;font-weight:800;margin:0}
.pd-meta{font-size:.75rem;color:var(--text-muted);margin-top:.25rem}
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
@media(max-width:768px){.pd-grid{grid-template-columns:1fr}}
.task-row{display:flex;align-items:center;gap:.5rem;padding:.5rem 0;border-bottom:1px solid var(--border-light);font-size:.78rem}
.task-row:last-child{border-bottom:none}
</style>
</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="/projects" class="nav-icon-btn"><i data-lucide="folder-kanban" style="width:15px;height:15px"></i> Projecten</a>
<a href="/" class="nav-icon-btn"><i data-lucide="layout-dashboard" style="width:15px;height:15px"></i> Dashboard</a>
<a href="/auth/logout" class="nav-icon-btn" style="color:var(--red)"><i data-lucide="log-out" style="width:15px;height:15px"></i></a>
</div></div></nav>
<div class="pd-wrap">
<a href="/projects" 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 naar projecten</a>
<% if (!project) { %>
<div class="card" style="text-align:center;padding:2rem"><p>Project niet gevonden.</p><a href="/projects" class="btn btn-accent btn-small">Naar projecten</a></div>
<% } else { %>
<div class="pd-hdr">
<div>
<h1><%= project.name %></h1>
<p class="pd-meta"><%= project.client_name || 'Geen cliënt' %> · <span class="status-badge <%= project.status %>"><%= project.status %></span> · Prioriteit: <%= project.priority %></p>
<% if (project.description) { %><p class="pd-meta" style="margin-top:.35rem"><%= project.description %></p><% } %>
</div>
<a href="/clients/<%= project.client_id %>" class="btn btn-secondary btn-small">Cliënt bekijken</a>
</div>
<div class="kpi-row" style="margin-bottom:1rem">
<div class="kpi-card accent"><div class="kpi-num"><%= tasks.length %></div><div class="kpi-label">Taken</div></div>
<div class="kpi-card green"><div class="kpi-num"><%= tasks.filter(t=>t.status==='done').length %></div><div class="kpi-label">Voltooid</div></div>
<div class="kpi-card purple"><div class="kpi-num"><%= milestones.length %></div><div class="kpi-label">Milestones</div></div>
</div>
<div class="pd-grid">
<div class="card card-hover">
<div class="card-title">Taken</div>
<% if (tasks.length === 0) { %><p class="empty-state-s">Nog geen taken voor dit project.</p><% } else { %>
<% tasks.forEach(function(t) { %>
<div class="task-row">
<span class="status-badge <%= t.status %>"><%= t.status %></span>
<span style="flex:1"><%= t.title %></span>
<span style="color:var(--text-muted);font-size:.68rem"><%= t.assignee_name || '—' %></span>
</div>
<% }) %>
<% } %>
</div>
<div class="card card-hover">
<div class="card-title">Milestones</div>
<% if (milestones.length === 0) { %><p class="empty-state-s">Geen milestones gepland.</p><% } else { %>
<% milestones.forEach(function(m) { %>
<div class="task-row">
<strong><%= m.name %></strong>
<span style="margin-left:auto;color:var(--text-muted);font-size:.68rem"><%= m.target_date || '—' %></span>
</div>
<% }) %>
<% } %>
</div>
</div>
<% } %>
</div>
<script>lucide.createIcons();</script>
<script src="/js/theme.js"></script>
</body>
</html>
