{% extends 'base.html' %}
{% block content %}
<section class="hero">
  <div class="card">
    <h2>Overview</h2>
    <div class="stat-grid" id="summary-stats">
      <div><strong>Courses</strong><span id="stat-courses">—</span></div>
      <div><strong>Assignments</strong><span id="stat-assignments">—</span></div>
      <div><strong>Submissions</strong><span id="stat-submissions">—</span></div>
      <div><strong>Recordings</strong><span id="stat-recordings">—</span></div>
    </div>
    <p class="muted" id="backend-note">Loading backend…</p>
    <button id="sync-button" type="button">Refresh from D2L</button>
    <p class="muted" id="sync-status">No sync run loaded yet.</p>
  </div>
  <div class="card">
    <h2>What this app currently does</h2>
    <ul>
      <li>Reads current D2L scrape data</li>
      <li>Caches course and assignment rows</li>
      <li>Stores assignment upload intake records</li>
      <li>Stores recording upload intake records</li>
      <li>Builds Paperless/n8n handoff payloads</li>
    </ul>
  </div>
</section>

<section class="three-up">
  <div class="card">
    <h2>Recent assignments</h2>
    <div id="recent-assignments" class="list-block muted">Loading…</div>
  </div>
  <div class="card">
    <h2>Recent submissions</h2>
    <div id="recent-submissions" class="list-block muted">Loading…</div>
  </div>
  <div class="card">
    <h2>Recent recordings</h2>
    <div id="recent-recordings" class="list-block muted">Loading…</div>
  </div>
</section>
{% endblock %}