<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"></head>
<body style="font-family:system-ui,sans-serif;background:#fdf6ee;margin:0;padding:2rem 1rem">
  <div style="max-width:480px;margin:0 auto;background:#fff;border-radius:12px;overflow:hidden;border:1px solid #e8d9c4">
    <div style="padding:1.5rem">
      <img src="{{ absolute_url('/build/logo.svg') }}" alt="WeVisto"
           width="64" height="64"
           style="display:block;width:64px;height:64px;border-radius:10px;margin-bottom:.75rem">

      <h1 style="font-size:1.25rem;font-weight:700;color:#3a2e22;margin-bottom:.5rem">{{ sharer.email }} shared a photo with you</h1>
      <p style="color:#8a7060;font-size:.875rem;margin-bottom:1.25rem">Add it to your frame or decline — it's up to you.</p>
    </div>

    <img src="{{ absolute_url('/api/images/' ~ image.id ~ '/thumbnail') }}"
         alt="Shared photo" width="480"
         style="display:block;width:100%;max-width:480px;height:auto">

    <div style="padding:1.5rem;display:flex;flex-direction:column;gap:.75rem">
      <a href="{{ absolute_url('/token/' ~ approveToken.uuid ~ '/approve') }}"
         style="display:block;padding:1rem;background:#c97c3a;color:#fff;border-radius:10px;text-align:center;text-decoration:none;font-weight:700;font-size:1rem">
        Add to my frame
      </a>
      <a href="{{ absolute_url('/token/' ~ declineToken.uuid ~ '/decline?back=' ~ approveToken.uuid) }}"
         style="display:block;padding:1rem;background:transparent;color:#8a7060;border:1.5px solid #e8d9c4;border-radius:10px;text-align:center;text-decoration:none;font-weight:600;font-size:.9rem">
        No thanks
      </a>
    </div>

    <div style="padding:1rem 1.5rem;border-top:1px solid #e8d9c4;font-size:.75rem;color:#aaa">
      These links expire in {{ (approveToken.expiresAt.timestamp - 'now'|date('U')) // 86400 }} days.
    </div>
  </div>
</body>
</html>
