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

<section class="hero pad-hero">
  <div class="hero-body">
    <p class="title">Find the right fit</p>
    <p class="subtitle">
      Browse pads, compare comfort, and share honest reviews with photos.
    </p>
    <% if (currentUser && currentUser.is_approved) { %>
    <a class="button is-primary is-large" href="/pads/new">Add a pad</a>
    <% } else if (currentUser) { %>
    <p class="has-text-weight-semibold">Your account is pending approval.</p>
    <% } else { %>
    <a class="button is-link is-medium" href="/login">Log in to start your list</a>
    <% } %>
  </div>
</section>

<% if (pads.length === 0) { %>
<div class="notification is-light">
  No pads yet. Be the first to add one.
</div>
<% } %>

<div class="columns is-multiline">
  <% pads.forEach((pad) => { %>
  <div class="column is-4">
    <div class="card pad-card">
      <div class="card-content">
        <p class="title is-5"><%= pad.name %></p>
        <p class="subtitle is-6"><%= pad.brand || 'Independent' %></p>
        <p class="content"><%= pad.description || 'No description yet.' %></p>
        <% if (pad.fit && pad.comfort && pad.absorbency) { %>
        <% const avg = (pad.fit + pad.comfort + pad.absorbency) / 3; %>
        <% const avgRounded = Math.round(avg); %>
        <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>
        <% } else { %>
        <p class="has-text-grey">No rating yet.</p>
        <% } %>
      </div>
      <div class="card-footer">
        <a class="card-footer-item" href="/pads/<%= pad.id %>">View ratings</a>
      </div>
    </div>
  </div>
  <% }) %>
</div>

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