<%- include('partials/header') %>

<main class="app-shell">
  <div class="container">
    <div class="page-grid">
      <aside class="sidebar">
        <nav class="sidebar-nav">
          <a class="sidebar-link" href="/dashboard">Overview</a>
          <a class="sidebar-link" href="/planner">Sleep Planner</a>
          <a class="sidebar-link" href="/commitments">Commitments</a>
          <a class="sidebar-link active" href="/history">Sleep History</a>
          <a class="sidebar-link" href="/profile">Profile & Settings</a>
        </nav>
      </aside>

      <div class="content-panel">
        <div class="eyebrow">Sleep history</div>
        <h2>Previous recommendations</h2>

        <% if (history && history.length) { %>
          <div class="history-list">
            <% history.forEach((item) => { %>
              <div class="history-item">
                <div>
                  <strong><%= item.date %></strong>
                  <p><%= item.recommended_bedtime %> to <%= item.recommended_wake_time %></p>
                </div>
                <div>
                  <p><strong><%= item.sleep_duration %> hrs</strong></p>
                  <p><%= item.compatibility_score %>% score</p>
                </div>
              </div>
            <% }) %>
          </div>
        <% } else { %>
          <div class="empty-state">Your sleep history is empty. Generate your first recommendation to see trend insights.</div>
        <% } %>
      </div>
    </div>
  </div>
</main>

<%- include('partials/footer') %>
