<% title = 'My Notes - MyNotes' %>
<%- include('../partials/header') %>

<div class="notes-header">
  <h1>My Notes</h1>
  <a href="/notes/new" class="btn btn-primary">+ New Note</a>
</div>

<% if (!notes.length) { %>
  <p class="muted">You don't have any notes yet. Create your first one.</p>
<% } else { %>
  <div class="notes-grid">
    <% notes.forEach(function(note) { %>
      <div class="note-card">
        <h3><%= note.title %></h3>
        <p class="note-content"><%= (note.content || '').slice(0, 200) %><%= (note.content || '').length > 200 ? '…' : '' %></p>
        <p class="note-meta">Updated <%= new Date(note.updated_at).toLocaleString() %></p>
        <div class="note-actions">
          <a href="/notes/<%= note.id %>/edit">Edit</a>
          <form action="/notes/<%= note.id %>/email" method="POST" class="inline-form">
            <button type="submit" class="link-button">Email to me</button>
          </form>
          <form action="/notes/<%= note.id %>?_method=DELETE" method="POST" class="inline-form" onsubmit="return confirm('Delete this note?');">
            <button type="submit" class="link-button link-danger">Delete</button>
          </form>
        </div>
      </div>
    <% }); %>
  </div>
<% } %>

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