<%- include('partials/header', { title: person.name + ' - Date-a-Science' }) %>

<div class="container">
  <a href="/" class="back-link">&lt; Back to homepage</a>

  <div class="profile-card">
    <h1><%= person.name %></h1>
    <img src="<%= person.photo || anonImg %>" width="200" alt="<%= person.name %>'s photo">
    <p><strong>Age:</strong> <%= person.age %></p>
  </div>

  <div class="messages">
    <h2>Messages</h2>
    <% if (person.messages.length !== 0) { %>
      <% person.messages.forEach(msg => { %>
        <div class="message"><%= msg %></div>
      <% }) %>
    <% } else { %>
      <p>No messages yet.</p>
    <% } %>

    <h3>Leave a Message</h3>
    <input type="textbox" id="msg">
    <button type="button" onclick="submitMessage(<%= person.id %>)">Submit Message</button>
  </div>

  <script src="/clientscript.js"></script>
</div>

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