<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Approve Your Design</title>
  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <div class="wrap">
    <div class="card">
      <h1>Approve Your Design</h1>
      <p><strong>Project ID:</strong> <%= row.id %></p>
      <p><strong>Product:</strong> <%= row.product_title || '-' %></p>
      <p><strong>Operation:</strong> <%= row.operation_choice || '-' %></p>
      <p><strong>Method:</strong> <%= row.method_choice || '-' %></p>
      <p><strong>Wood:</strong> <%= row.wood_species || row.material_choice || '-' %></p>
      <p><strong>Finish:</strong> <%= row.finish_choice || '-' %></p>
      <p><strong>Accent / Fill:</strong> <%= row.color_choice || '-' %></p>
      <p><strong>Text:</strong> <%= row.custom_text || '-' %></p>
      <p><strong>Font:</strong> <%= row.font_choice || '-' %></p>

      <% if (message) { %>
        <p class="co-status ok"><strong><%= message %></strong></p>
      <% } %>

      <% if (row.proof_url) { %>
        <p><a href="<%= row.proof_url %>" target="_blank">Open proof</a></p>
        <p><img class="thumb proof-thumb" src="<%= row.proof_url %>" alt="Proof preview"></p>
      <% } else { %>
        <p>No proof has been uploaded yet.</p>
      <% } %>

      <form method="post" action="/approve/<%= row.id %>">
        <label>Notes</label>
        <textarea name="approval_notes" rows="4" placeholder="Add comments or requested changes"><%= row.approval_notes || '' %></textarea>
        <div class="co-actions">
          <button type="submit" name="action" value="approve">Approve Design</button>
          <button type="submit" name="action" value="changes">Request Changes</button>
        </div>
      </form>
    </div>
  </div>
</body>
</html>
