`views/petition.ejs`

115 lines
<%
  const shareUrl = siteUrl + '/petitions/' + p.slug;
  const shareText = 'Sign this petition: ' + p.title;
%>
<%- include('partials/head', { title: p.title, description: p.description.slice(0, 155) }) %>

<section class="wrap narrow petition-detail">
  <p class="breadcrumb"><a href="/">&larr; All petitions</a></p>

  <% if (created) { %>
    <div class="alert alert-success">Your petition is live. Share the link below to start gathering signatures.</div>
  <% } %>
  <% if (signed) { %>
    <div class="alert alert-success">Thanks for signing — your voice has been added.</div>
  <% } %>
  <% if (error) { %>
    <div class="alert alert-error"><%= error %></div>
  <% } %>

  <span class="card-category"><%= p.category %></span>
  <h1><%= p.title %></h1>
  <p class="card-target">Addressed to: <strong><%= p.target %></strong></p>
  <p class="card-date">Started <%= new Date(p.createdAt).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' }) %><%= p.creatorName ? ' by ' + p.creatorName : '' %></p>

  <div class="signature-tally">
    <strong id="sig-tally-count"><%= p.signatureCount %></strong> signature<%= p.signatureCount === 1 ? '' : 's' %> so far
  </div>
  <% if (reach && reach.uniqueOffices > 0) { %>
    <div class="reach-tally" title="Signers who used the reps panel to target their own congressional offices">
      Signers are targeting <strong><%= reach.uniqueOffices %></strong> unique congressional office<%= reach.uniqueOffices === 1 ? '' : 's' %>.
    </div>
  <% } %>

  <div class="petition-body">
    <p><%= p.description %></p>
  </div>

  <div class="share-row" aria-label="Share this petition">
    <span class="share-label">Share:</span>
    <button type="button" class="btn btn-ghost btn-sm" id="copy-link-btn" data-url="<%= shareUrl %>">Copy Link</button>
    <a class="btn btn-ghost btn-sm" target="_blank" rel="noopener noreferrer"
       href="https://twitter.com/intent/tweet?text=<%= encodeURIComponent(shareText) %>&url=<%= encodeURIComponent(shareUrl) %>">Share on X</a>
    <a class="btn btn-ghost btn-sm" target="_blank" rel="noopener noreferrer"
       href="https://www.facebook.com/sharer/sharer.php?u=<%= encodeURIComponent(shareUrl) %>">Share on Facebook</a>
    <a class="btn btn-ghost btn-sm"
       href="mailto:?subject=<%= encodeURIComponent(shareText) %>&body=<%= encodeURIComponent(shareText + ' ' + shareUrl) %>">Email</a>
  </div>

  <div class="sign-panel" id="sign">
    <h2>Sign this petition</h2>
    <form method="POST" action="/petitions/<%= p.slug %>/sign" class="stack-form">
      <label for="name">Full name *</label>
      <input type="text" id="name" name="name" required maxlength="100" value="<%= form.name || '' %>">

      <label for="email">Email *</label>
      <input type="email" id="email" name="email" required maxlength="160" value="<%= form.email || '' %>">
      <p class="field-hint">Used to verify your signature and prevent duplicates. Never shown publicly, never sold.</p>

      <label for="zip">ZIP code (optional)</label>
      <input type="text" id="zip" name="zip" maxlength="10" placeholder="e.g. 90210" value="<%= form.zip || '' %>">
      <p class="field-hint">Helps show which districts support this — also lets you look up your representatives.</p>

      <label for="comment">Why does this matter to you? (optional)</label>
      <textarea id="comment" name="comment" rows="3" maxlength="500"><%= form.comment || '' %></textarea>

      <label class="checkbox-row">
        <input type="checkbox" name="showNamePublicly" value="1" checked>
        Show my name publicly on this petition (uncheck to sign anonymously)
      </label>

      <label class="checkbox-row">
        <input type="checkbox" name="updatesOptIn" value="1">
        Email me updates about this petition (optional — we will not email you unless you check this)
      </label>

      <!-- Populated by the reps panel below: the offices this signer resolved
           (senators always; House rep when pinned exactly). Recorded for
           aggregate reach only — we never contacted anyone on their behalf. -->
      <input type="hidden" id="targeted-reps-input" name="targetedReps" value="">

      <button type="submit" class="btn btn-primary btn-wide">Sign This Petition</button>
      <p class="fine-print">By signing, you agree to our handling of your info as described in the footer below. We never send bulk email without this opt-in checked, and every update email includes an unsubscribe link.</p>
    </form>
  </div>

  <% if (supporters.length) { %>
    <div class="supporters">
      <h2>Recent supporters</h2>
      <ul class="supporter-list">
        <% supporters.forEach(function(s){ %>
          <li>
            <strong><%= s.name %></strong>
            <% if (s.zip) { %><span class="supporter-zip"><%= s.zip %></span><% } %>
            <% if (s.comment) { %><p class="supporter-comment">"<%= s.comment %>"</p><% } %>
          </li>
        <% }) %>
      </ul>
    </div>
  <% } %>

  <div class="reps-widget reps-panel" id="reps-panel"
       data-seed-title="<%= p.title.replace(/"/g, '&quot;') %>"
       data-sign-input="targeted-reps-input">
    <h2>Find &amp; contact your representatives</h2>
    <p>Enter your ZIP to see your two U.S. Senators (resolved exactly) and your U.S. House representative. We&rsquo;ll open each member&rsquo;s <strong>official government contact form</strong> with your message ready to submit — we never send anything for you.</p>
    <form id="reps-lookup-form" class="inline-form">
      <input type="text" id="reps-zip" placeholder="ZIP code" maxlength="10" value="<%= form.zip || '' %>">
      <button type="submit" class="btn btn-ghost btn-sm">Look up</button>
    </form>
    <div id="reps-result" aria-live="polite"></div>
  </div>
</section>

<%- include('partials/foot') %>