← back to NationalPaperHangers
views/public/papers-detail.ejs
104 lines
<%- include('../partials/head', { title }) %>
<%- include('../partials/header') %>
<section class="papers-detail" style="max-width:760px;margin:0 auto;padding:48px 24px">
<nav style="margin-bottom:24px;font-size:13px">
<a href="/papers" style="color:inherit">← All papers</a>
</nav>
<header style="margin:0 0 28px">
<div style="font-size:13px;text-transform:uppercase;letter-spacing:0.08em;color:#888"><%= thread.brand %></div>
<h1 style="margin:6px 0 12px;font-size:34px;letter-spacing:0.005em;line-height:1.15"><%= thread.paper_name %></h1>
<dl style="display:flex;gap:24px;flex-wrap:wrap;margin:0;font-size:13px">
<% if (thread.category) { %>
<div><dt class="muted" style="display:inline">Category:</dt> <dd style="display:inline;margin:0;text-transform:capitalize"><%= thread.category %></dd></div>
<% } %>
<% if (thread.paste_type) { %>
<div><dt class="muted" style="display:inline">Paste:</dt> <dd style="display:inline;margin:0"><%= thread.paste_type %></dd></div>
<% } %>
<% if (thread.sku) { %>
<div><dt class="muted" style="display:inline">SKU:</dt> <dd style="display:inline;margin:0"><%= thread.sku %></dd></div>
<% } %>
<div><dt class="muted" style="display:inline">Notes:</dt> <dd style="display:inline;margin:0"><%= thread.comment_count %></dd></div>
</dl>
<% if (thread.description) { %>
<div style="margin:24px 0 0;padding:18px 22px;border-left:3px solid var(--accent,#0e0e0e);background:var(--bg-subtle,#f7f6f3);border-radius:0 4px 4px 0">
<p style="margin:0;font-size:15px;line-height:1.6"><%= thread.description %></p>
<% if (thread.seeded_by && thread.seeded_by !== 'nph_ops') { %>
<p class="muted" style="margin:8px 0 0;font-size:12px">— seeded by <%= thread.seeded_by %></p>
<% } %>
</div>
<% } %>
</header>
<h2 style="font-size:14px;text-transform:uppercase;letter-spacing:0.1em;margin:32px 0 14px;color:#999">Notes from working installers</h2>
<% if (!comments || !comments.length) { %>
<div class="callout" style="border:1px dashed var(--border,#ddd);padding:24px;border-radius:8px;text-align:center">
<p style="margin:0 0 6px">No notes on this paper yet.</p>
<p class="muted" style="margin:0;font-size:13px">Working installers — <a href="/login">log in</a> to contribute.</p>
</div>
<% } else { %>
<ul id="comments" style="list-style:none;padding:0;margin:0;display:grid;gap:18px">
<% comments.forEach(function(c){ %>
<li id="comment-<%= c.id %>" style="padding:18px 20px;border:1px solid var(--border,#ddd);border-radius:8px">
<p style="margin:0 0 12px;font-size:15px;line-height:1.6;white-space:pre-wrap"><%= c.body %></p>
<footer style="display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;flex-wrap:wrap">
<a href="/installer/<%= c.installer_slug %>" style="color:inherit;text-decoration:none">
<strong><%= c.installer_business_name %></strong>
<% if (c.installer_verified) { %><span style="color:#888"> · verified</span><% } %>
<% if (c.installer_city) { %><span class="muted"> · <%= c.installer_city %><% if (c.installer_state) { %>, <%= c.installer_state %><% } %></span><% } %>
</a>
<div style="display:flex;gap:10px;align-items:center">
<span class="muted" style="font-size:12px">
<%= new Date(c.created_at).toLocaleDateString('en-US', {year:'numeric', month:'short', day:'numeric'}) %>
</span>
<form method="post" action="/papers/<%= thread.slug %>/comments/<%= c.id %>/helpful#comment-<%= c.id %>" style="margin:0;display:inline">
<input type="hidden" name="_csrf" value="<%= csrfToken %>">
<button type="submit"
style="background:transparent;border:1px solid var(--border,#ddd);border-radius:14px;padding:3px 10px;cursor:pointer;font-size:12px;color:inherit"
title="Mark this note helpful — designers, installers, anyone">
↑ helpful<% if (c.helpful_count > 0) { %> · <%= c.helpful_count %><% } %>
</button>
</form>
</div>
</footer>
</li>
<% }); %>
</ul>
<% } %>
<% if (locals.flash && flash.ok) { %>
<div class="callout callout-success" style="margin-top:24px;padding:14px 18px;border-radius:6px;background:#e8f5e9;border:1px solid #c8e6c9;color:#1b5e20"><%= flash.ok %></div>
<% } %>
<% if (locals.flash && flash.error) { %>
<div class="callout callout-warn" style="margin-top:24px;padding:14px 18px;border-radius:6px;background:#fff3e0;border:1px solid #ffcc80;color:#b45309"><%= flash.error %></div>
<% } %>
<% if (locals.currentInstaller) { %>
<section id="comment-form" style="margin-top:32px;padding:22px;border:1px solid var(--border,#ddd);border-radius:8px">
<h3 style="margin:0 0 6px;font-size:16px">Add a note as <%= locals.currentInstaller.business_name %></h3>
<p class="muted" style="margin:0 0 14px;font-size:13px">
Drop %, paste behavior in humid environments, seam-matching gotchas, what to bring on the second visit. Specific > general. Designers will see this.
</p>
<form method="POST" action="/papers/<%= thread.slug %>/comments" style="display:grid;gap:10px">
<input type="hidden" name="_csrf" value="<%= csrfToken %>">
<textarea name="body" rows="6" minlength="20" maxlength="4000" required
placeholder="What working installers wish they'd known going in…"
style="width:100%;padding:12px;font-family:inherit;font-size:14px;line-height:1.55;border:1px solid var(--border,#ddd);border-radius:4px;resize:vertical"></textarea>
<div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap">
<p class="muted" style="margin:0;font-size:12px">20–4,000 characters. Public-readable. Attributed to your studio profile.</p>
<button type="submit" class="btn btn-primary btn-sm">Post note</button>
</div>
</form>
</section>
<% } else { %>
<p class="muted" style="margin-top:32px;font-size:13px;text-align:center"><a href="/login?next=/papers/<%= thread.slug %>">Log in as a verified installer</a> to contribute notes.</p>
<% } %>
</section>
<%- include('../partials/footer') %>