loot-hunt/src/views/player/profile.ejs

<%- include('../partials/header') %>

<div class="container">
  <div style="text-align: center; margin-bottom: 1.5rem;">
    <h1 style="margin-bottom: 0.25rem;">&#x1F464; <%= profile.username %></h1>
    <p style="color: var(--muted); margin: 0;">Joined <%= new Date(profile.created_at).toLocaleDateString() %></p>
  </div>

  <div class="stats-row">
    <div class="stat-box">
      <div class="value"><%= profile.totalPoints %></div>
      <div class="label">Total Points</div>
    </div>
    <div class="stat-box">
      <div class="value"><%= profile.scanCount %></div>
      <div class="label">Finds</div>
    </div>
    <div class="stat-box">
      <div class="value"><%= rank ? '#' + rank : '---' %></div>
      <div class="label">Rank<% if (totalPlayers) { %> / <%= totalPlayers %><% } %></div>
    </div>
  </div>

  <% if (huntBreakdown.length > 0) { %>
    <div class="card">
      <div class="card-header">Hunts Participated</div>
      <div class="table-wrapper">
        <table>
          <thead>
            <tr>
              <th>Hunt</th>
              <th>Finds</th>
              <th>Points</th>
            </tr>
          </thead>
          <tbody>
            <% huntBreakdown.forEach(h => { %>
              <tr>
                <td><a href="/hunt/<%= h.hunt_short_name %>"><%= h.hunt_name %></a></td>
                <td><%= h.scans %></td>
                <td><span class="points-badge">+<%= h.points %></span></td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      </div>
    </div>
  <% } %>

  <% if (recentScans.length > 0) { %>
    <div class="card">
      <div class="card-header">Recent Activity</div>
      <div class="table-wrapper">
        <table>
          <thead>
            <tr>
              <th>Package</th>
              <th>Hunt</th>
              <th>Points</th>
              <th>When</th>
            </tr>
          </thead>
          <tbody>
            <% recentScans.forEach(scan => { %>
              <tr>
                <td><a href="/hunt/<%= scan.hunt_short_name %>/<%= scan.card_number %>"><%= scan.card_number %> of <%= scan.package_count %></a></td>
                <td><a href="/hunt/<%= scan.hunt_short_name %>"><%= scan.hunt_name %></a></td>
                <td><% if (scan.points_awarded > 0) { %><span class="points-badge">+<%= scan.points_awarded %></span><% } else { %><span style="color: var(--muted);">0</span><% } %></td>
                <td style="font-size: 0.85rem; color: var(--muted);"><time datetime="<%= scan.scanned_at %>"><%= new Date(scan.scanned_at).toLocaleString() %></time></td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      </div>
    </div>
  <% } else { %>
    <div class="card" style="text-align: center; color: var(--muted); padding: 2rem;">
      <% if (typeof isOwnProfile !== 'undefined' && isOwnProfile) { %>
        No scans yet. Get out there and find some loot!
      <% } else { %>
        This player hasn't found any loot yet.
      <% } %>
    </div>
  <% } %>

  <div style="text-align: center; margin-top: 1rem;">
    <a href="/leaderboard" class="btn btn-outline">Global Leaderboard</a>
  </div>

  <% if (typeof isOwnProfile !== 'undefined' && isOwnProfile) { %>
    <div class="card" style="margin-top: 1.5rem;">
      <div class="card-header">&#x1F512; Change Password</div>
      <form method="POST" action="/player/<%= profile.username %>/password">
        <div class="form-group">
          <label for="current_password">Current Password</label>
          <input type="password" id="current_password" name="current_password" class="form-control" required>
        </div>
        <div class="form-group">
          <label for="new_password">New Password</label>
          <input type="password" id="new_password" name="new_password" class="form-control" required minlength="6">
          <div class="form-hint">At least 6 characters.</div>
        </div>
        <div class="form-group">
          <label for="new_password_confirm">Confirm New Password</label>
          <input type="password" id="new_password_confirm" name="new_password_confirm" class="form-control" required minlength="6">
        </div>
        <button type="submit" class="btn btn-primary btn-sm">Change Password</button>
      </form>
    </div>
  <% } %>
</div>

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