% layout = 'layouts/main' %>
<% title = 'Projects' %>

<div class="page-header">
  <h1>Projects</h1>
  <a href="/projects/add" class="btn btn-primary">+ Add Project</a>
</div>

<% if (projects.length === 0) { %>
<div class="empty-state">
  <p>No projects yet. Add your test project to connect the AI QA pipeline.</p>
  <a href="/projects/add" class="btn btn-primary" style="margin-top:0.5rem;">+ Add Project</a>
</div>
<% } %>

<div class="project-grid">
  <% const colors = ['card-cream', 'card-lavender', 'card-peach', 'card-ochre']; %>
  <% projects.forEach((p, idx) => { %>
  <div class="project-card <%= colors[idx % colors.length] %>">
    <div class="project-name"><%= p.name %></div>
    <div class="project-path"><%= p.path %></div>
    <div class="project-meta">Added: <%= new Date(p.createdAt).toLocaleDateString() %></div>
    <div class="project-actions">
      <a href="/projects/<%= p.id %>" class="btn btn-sm btn-primary">Open</a>
      <form action="/projects/<%= p.id %>/remove" method="POST" style="display:inline">
        <button class="btn btn-sm btn-danger">Remove</button>
      </form>
    </div>
  </div>
  <% }) %>
</div>
