<div class="container">
  <% reminders.forEach(reminder => { %>
  
    <h3 class="page-header mt-4">
      <img src=<%= reminder.picture %> class="img-thumbnail mr-2" width="50px" data-toggle="popover-hover" data-content="<img src=<%= reminder.picture %>>">
      <% if (reminder.friend == reminders[0].friend) { %>
        My Reminders
      <% } else { %>
        <%= reminder.username %>'s Reminders
      <% } %>
    </h3>

    <ul class="list-group">
      <% reminder.reminders.forEach(function (reminderItem) { %>
        <li class="list-group-item">
          <strong><%= reminderItem.title %>: </strong>
          <%= reminderItem.description %>
          || Status:
          <% if (reminderItem.completed == true) { %>
            <span class="badge badge-success">Completed</span>
          <% } else if (reminderItem.completed == false) { %>
            <span class="badge badge-danger">Incomplete</span>
          <% } %>

          <a class="float-right" href=<%= "/reminder/" + reminder.friend + "&" + reminderItem.id %>>View</a>
        </li>
      <% }) %>
    </ul>
  <% }) %>

</div>

<script>
$(function(){
    $('[data-toggle=popover-hover]').popover({
      trigger: 'hover',
      html: true,
      placement: 'right'
}) 
});
</script>