pedal/views/pad.ejs

<%- include('partials/header', { title }) %>

<div class="pad-header">
  <div>
    <p class="eyebrow">Pad</p>
    <h1 class="title"><%= pad.name %></h1>
    <p class="subtitle"><%= pad.brand || 'Independent' %></p>
  </div>
  <div class="pad-description"><%= pad.description || 'No description yet.' %></div>
  <% if (currentUser && currentUser.is_approved) { %>
  <form method="post" action="/pads/<%= pad.id %>/delete" onsubmit="return confirm('Delete this pad and all associated reviews and photos?');">
    <button class="button is-danger is-light" type="submit">Delete pad</button>
  </form>
  <% } %>
</div>

<div class="columns">
  <div class="column is-7">
    <h2 class="title is-4">Your review</h2>
    <% if (!review) { %>
    <p class="has-text-grey">No review yet. Add one when you are ready.</p>
    <% } else { %>
    <% const avg = (review.fit + review.comfort + review.absorbency) / 3; %>
    <% const avgRounded = Math.round(avg); %>
    <article class="box review-card">
      <div class="review-meta">
        <strong>Latest update</strong>
        <span class="has-text-grey-light">
          <%= new Date(review.updated_at || review.created_at).toLocaleDateString() %>
        </span>
      </div>
      <div class="review-overall">
        <span class="has-text-weight-semibold">Overall</span>
        <div class="star-display" aria-label="Average rating">
          <% for (let i = 1; i <= 5; i++) { %>
          <span class="star <%= i <= avgRounded ? 'is-filled' : '' %>">★</span>
          <% } %>
          <span class="has-text-grey ml-2"><%= avg.toFixed(1) %>/5</span>
        </div>
      </div>
      <div class="columns is-mobile review-scores">
        <div class="column">Fit: <strong><%= review.fit %>/5</strong></div>
        <div class="column">Comfort: <strong><%= review.comfort %>/5</strong></div>
        <div class="column">Absorbency: <strong><%= review.absorbency %>/5</strong></div>
      </div>
      <% if (review.notes) { %>
      <p><%= review.notes %></p>
      <% } %>
    </article>
    <% } %>
  </div>
  <div class="column is-5">
    <h2 class="title is-4">Photos</h2>
    <% if (photos.length === 0) { %>
    <p class="has-text-grey">No photos yet.</p>
    <% } %>
    <div class="photo-grid">
      <% photos.forEach((photo) => { %>
      <div class="photo-card">
        <figure class="image">
          <img src="/uploads/<%= photo.filename %>" alt="<%= photo.original_name || 'Pad photo' %>" />
        </figure>
        <% if (currentUser && currentUser.is_approved) { %>
        <form method="post" action="/pads/<%= pad.id %>/photos/<%= photo.id %>/delete" onsubmit="return confirm('Delete this photo?');">
          <button class="button is-small is-danger is-light" type="submit">Delete</button>
        </form>
        <% } %>
      </div>
      <% }) %>
    </div>
  </div>
</div>

<% if (currentUser && currentUser.is_approved) { %>
<div class="columns">
  <div class="column is-7">
    <h2 class="title is-4"><%= review ? 'Update your review' : 'Add a review' %></h2>
    <form class="box" method="post" action="/pads/<%= pad.id %>/reviews">
      <div class="columns">
        <div class="column">
          <label class="label" for="fit">Fit</label>
          <div class="star-rating">
            <% for (let i = 5; i >= 1; i--) { %>
            <input type="radio" id="fit-<%= i %>" name="fit" value="<%= i %>" <%= review && review.fit === i ? 'checked' : '' %> <%= i === 1 ? 'required' : '' %> />
            <label for="fit-<%= i %>" aria-label="<%= i %> stars"></label>
            <% } %>
          </div>
        </div>
        <div class="column">
          <label class="label" for="comfort">Comfort</label>
          <div class="star-rating">
            <% for (let i = 5; i >= 1; i--) { %>
            <input type="radio" id="comfort-<%= i %>" name="comfort" value="<%= i %>" <%= review && review.comfort === i ? 'checked' : '' %> <%= i === 1 ? 'required' : '' %> />
            <label for="comfort-<%= i %>" aria-label="<%= i %> stars"></label>
            <% } %>
          </div>
        </div>
        <div class="column">
          <label class="label" for="absorbency">Absorbency</label>
          <div class="star-rating">
            <% for (let i = 5; i >= 1; i--) { %>
            <input type="radio" id="absorbency-<%= i %>" name="absorbency" value="<%= i %>" <%= review && review.absorbency === i ? 'checked' : '' %> <%= i === 1 ? 'required' : '' %> />
            <label for="absorbency-<%= i %>" aria-label="<%= i %> stars"></label>
            <% } %>
          </div>
        </div>
      </div>
      <div class="field">
        <label class="label" for="notes">Notes</label>
        <textarea class="textarea" id="notes" name="notes" placeholder="Anything about fit, feel, wear time?"><%= review ? review.notes || '' : '' %></textarea>
      </div>
      <button class="button is-primary" type="submit">Save review</button>
    </form>
  </div>
  <div class="column is-5">
    <h2 class="title is-4">Upload a photo</h2>
    <form class="box photo-actions" method="post" action="/pads/<%= pad.id %>/photos" enctype="multipart/form-data">
      <div class="photo-action-row">
        <label class="icon-button" title="Upload photo">
          <input class="sr-only" type="file" name="photo" accept="image/*" onchange="this.form.submit()" />
          <span class="icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" role="img">
              <path d="M4 18h16v-7h2v9H2v-9h2v7zm9-14v8.17l2.59-2.58L17 11l-5 5-5-5 1.41-1.41L11 12.17V4h2z"></path>
            </svg>
          </span>
          <span class="icon-label">Upload</span>
        </label>
        <label class="icon-button" title="Take photo">
          <input class="sr-only" type="file" name="photo" accept="image/*" capture="environment" onchange="this.form.submit()" />
          <span class="icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" role="img">
              <path d="M7 6l2-2h6l2 2h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3zm5 3.5A4.5 4.5 0 1 0 16.5 14 4.5 4.5 0 0 0 12 9.5zm0 2A2.5 2.5 0 1 1 9.5 14 2.5 2.5 0 0 1 12 11.5z"></path>
            </svg>
          </span>
          <span class="icon-label">Camera</span>
        </label>
      </div>
      <p class="help">Accepted: HEIC, HEIF, PNG, GIF, JPEG. Converted to WebP.</p>
    </form>
  </div>
</div>
<% } else if (currentUser) { %>
<div class="notification is-warning">Your account is pending approval. You can view your entry, but you cannot submit yet.</div>
<% } else { %>
<div class="notification is-light">Log in to add ratings and photos.</div>
<% } %>

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