{% extends 'base.html' %}

{% block main %}

        <!-- ════════════════ PAGE HEAD ════════════════ -->
        <div class="ax-page-head">
          <div class="ax-page-head__row">
            <div>
              <nav class="ax-breadcrumb" data-ax-breadcrumb aria-label="Breadcrumb"></nav>
              <h1 class="ax-page-head__title">LMS &amp; Courses</h1>
              <p class="ax-page-head__subtitle">18,420 students learning across 142 active courses.</p>
            </div>
            <div class="ax-page-head__actions">
              <button type="button" class="ax-btn ax-btn--secondary ax-btn--pill">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12"/><path d="M16 3v4"/><path d="M8 3v4"/><path d="M4 11h16"/></svg>
                <span class="ax-btn__label">This term</span>
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6l6 -6"/></svg>
              </button>
              <button type="button" class="ax-btn ax-btn--ghost">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0"/><path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0"/><path d="M3 6l0 13"/><path d="M12 6l0 13"/><path d="M21 6l0 13"/></svg>
                <span class="ax-btn__label">Library</span>
              </button>
              <button type="button" class="ax-btn ax-btn--primary">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5l0 14"/><path d="M5 12l14 0"/></svg>
                <span class="ax-btn__label">Create Course</span>
              </button>
            </div>
          </div>
        </div>

        <!-- ════════════════ DASHBOARD GRID ════════════════ -->
        <div class="ax-dash-grid">


          <!-- ───── HERO: Enrollments & Revenue (8) + Students by Category (4) ───── -->
          <section class="ax-card ax-card--chart ax-col--8" role="region" aria-label="Enrollments and revenue">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Growth</span>
                <h2 class="ax-card__title">Enrollments &amp; Revenue</h2>
                <p class="ax-card__subtitle">New enrollments vs. course revenue</p>
              </div>
              <div class="ax-card__actions">
                <div class="ax-btn-group ax-btn-group--segmented" role="radiogroup" aria-label="Date range">
                  <button type="button" class="ax-btn ax-btn--sm" role="radio" aria-checked="false">Weekly</button>
                  <button type="button" class="ax-btn ax-btn--sm is-selected" role="radio" aria-checked="true">Monthly</button>
                  <button type="button" class="ax-btn ax-btn--sm" role="radio" aria-checked="false">Yearly</button>
                </div>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <div class="ax-cluster" style="gap:var(--ax-space-5);margin-block-end:var(--ax-space-3);">
                <span class="ax-cluster" style="gap:var(--ax-space-2);"><i style="width:9px;height:9px;border-radius:3px;background:var(--ax-accent);"></i><small style="color:var(--ax-text-muted);font-size:var(--ax-text-sm);">Enrollments</small></span>
                <span class="ax-cluster" style="gap:var(--ax-space-2);"><i style="width:9px;height:9px;border-radius:3px;background:var(--ax-viz-amber);"></i><small style="color:var(--ax-text-muted);font-size:var(--ax-text-sm);">Revenue ($K)</small></span>
              </div>
              <div id="ax-enroll-rev" aria-label="Mixed chart of monthly enrollments columns with revenue line"></div>
            </div>
          </section>

          <!-- ───── KPI RAIL — the headline figures stacked beside the hero ───── -->
          <section class="ax-card ax-card--flat ax-col--4" role="region" aria-label="Key figures">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <h2 class="ax-card__title">At a glance</h2>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <div class="ax-statgroup ax-statgroup--stack">
                <div class="ax-statgroup__cell">
                  <span class="ax-statgroup__icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 9l-10 -4l-10 4l10 4l10 -4v6"/><path d="M6 10.6v5.4a6 3 0 0 0 12 0v-5.4"/></svg>
                  </span>
                  <span class="ax-statgroup__text">
                    <span class="ax-statgroup__label">Total Students</span>
                    <span class="ax-statgroup__value ax-num">18,420</span>
                  </span>
                  <span class="ax-statgroup__delta ax-statgroup__delta--up">+7.3%</span>
                </div>
                <div class="ax-statgroup__cell">
                  <span class="ax-statgroup__icon ax-statgroup__icon--c2">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0"/><path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0"/><path d="M3 6l0 13"/><path d="M12 6l0 13"/><path d="M21 6l0 13"/></svg>
                  </span>
                  <span class="ax-statgroup__text">
                    <span class="ax-statgroup__label">Active Courses</span>
                    <span class="ax-statgroup__value ax-num">142</span>
                  </span>
                  <span class="ax-statgroup__delta ax-statgroup__delta--up">+3.0%</span>
                </div>
                <div class="ax-statgroup__cell">
                  <span class="ax-statgroup__icon ax-statgroup__icon--c3">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 15a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"/><path d="M13 17.5v4.5l2 -1.5l2 1.5v-4.5"/><path d="M10 19h-5a2 2 0 0 1 -2 -2v-10c0 -1.1 .9 -2 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -1 1.73"/><path d="M6 9l12 0"/><path d="M6 12l3 0"/><path d="M6 15l2 0"/></svg>
                  </span>
                  <span class="ax-statgroup__text">
                    <span class="ax-statgroup__label">Completion Rate</span>
                    <span class="ax-statgroup__value ax-num">64%</span>
                  </span>
                  <span class="ax-statgroup__delta ax-statgroup__delta--up">+2.1%</span>
                </div>
                <div class="ax-statgroup__cell">
                  <span class="ax-statgroup__icon ax-statgroup__icon--c4">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16.7 8a3 3 0 0 0 -2.7 -2h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1 -2.7 -2"/><path d="M12 3v3m0 12v3"/></svg>
                  </span>
                  <span class="ax-statgroup__text">
                    <span class="ax-statgroup__label">Course Revenue</span>
                    <span class="ax-statgroup__value ax-num">$58,900</span>
                  </span>
                  <span class="ax-statgroup__delta ax-statgroup__delta--up">+9.0%</span>
                </div>
              </div>
            </div>
          </section>

          <!-- Students by Category (4) -->
          <section class="ax-card ax-col--4" role="region" aria-label="Students by category">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <h2 class="ax-card__title">Students by Category</h2>
              </div>
              <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" aria-label="Category options">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M18 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/></svg>
              </button>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <div id="ax-lms-cat" aria-label="Donut chart of students by category"></div>
              <ul class="ax-list ax-list--compact" style="margin-top:var(--ax-space-2);">
                <li class="ax-list__row" style="border:0;padding-inline:0;"><span class="ax-list__leading"><i style="width:9px;height:9px;border-radius:3px;background:#38BDF8;display:inline-block;"></i></span><span class="ax-list__content"><span class="ax-list__title" style="font-weight:var(--ax-weight-medium);">Development</span></span><span class="ax-list__trailing ax-num" style="color:var(--ax-text-strong);">38%</span></li>
                <li class="ax-list__row" style="border:0;padding-inline:0;"><span class="ax-list__leading"><i style="width:9px;height:9px;border-radius:3px;background:#A78BFA;display:inline-block;"></i></span><span class="ax-list__content"><span class="ax-list__title" style="font-weight:var(--ax-weight-medium);">Design</span></span><span class="ax-list__trailing ax-num" style="color:var(--ax-text-strong);">24%</span></li>
                <li class="ax-list__row" style="border:0;padding-inline:0;"><span class="ax-list__leading"><i style="width:9px;height:9px;border-radius:3px;background:#F472B6;display:inline-block;"></i></span><span class="ax-list__content"><span class="ax-list__title" style="font-weight:var(--ax-weight-medium);">Business</span></span><span class="ax-list__trailing ax-num" style="color:var(--ax-text-strong);">21%</span></li>
                <li class="ax-list__row" style="border:0;padding-inline:0;"><span class="ax-list__leading"><i style="width:9px;height:9px;border-radius:3px;background:#FBBF24;display:inline-block;"></i></span><span class="ax-list__content"><span class="ax-list__title" style="font-weight:var(--ax-weight-medium);">Marketing</span></span><span class="ax-list__trailing ax-num" style="color:var(--ax-text-strong);">17%</span></li>
              </ul>
            </div>
          </section>

          <!-- ───── ENROLLED COURSES / CONTINUE LEARNING (8) + PROGRESS RINGS (4) ───── -->
          <section class="ax-card ax-col--8" role="region" aria-label="Continue learning">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <h2 class="ax-card__title">Continue Learning</h2>
                <p class="ax-card__subtitle">In-progress courses across your cohort</p>
              </div>
              <a class="ax-btn ax-btn--link" href="#">All courses</a>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-4);">
              <!-- course row: thumb + title/lessons + progress bar + % -->
              <div class="ax-cluster" style="gap:var(--ax-space-4);flex-wrap:nowrap;">
                <span class="ax-avatar ax-avatar--md ax-avatar--squircle" style="background:linear-gradient(135deg,#38BDF8,#A78BFA);color:#fff;"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0"/><path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0"/><path d="M3 6l0 13"/><path d="M12 6l0 13"/><path d="M21 6l0 13"/></svg></span>
                <div style="flex:1 1 auto;min-width:0;">
                  <div class="ax-cluster" style="justify-content:space-between;"><div class="ax-text-truncate" style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Advanced React Patterns</div><b class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);">82%</b></div>
                  <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);margin:2px 0 6px;">28 of 34 lessons · Daniel Cho</div>
                  <div class="ax-progress ax-progress--sm"><div class="ax-progress__track"><div class="ax-progress__fill" style="width:82%;background:var(--ax-accent);"></div></div></div>
                </div>
              </div>
              <div class="ax-cluster" style="gap:var(--ax-space-4);flex-wrap:nowrap;">
                <span class="ax-avatar ax-avatar--md ax-avatar--squircle" style="background:linear-gradient(135deg,#F472B6,#FBBF24);color:#fff;"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"/><path d="M3 9l18 0"/></svg></span>
                <div style="flex:1 1 auto;min-width:0;">
                  <div class="ax-cluster" style="justify-content:space-between;"><div class="ax-text-truncate" style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">UI Design Foundations</div><b class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);">61%</b></div>
                  <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);margin:2px 0 6px;">14 of 23 lessons · Mira Aoki</div>
                  <div class="ax-progress ax-progress--sm"><div class="ax-progress__track"><div class="ax-progress__fill" style="width:61%;background:var(--ax-viz-pink);"></div></div></div>
                </div>
              </div>
              <div class="ax-cluster" style="gap:var(--ax-space-4);flex-wrap:nowrap;">
                <span class="ax-avatar ax-avatar--md ax-avatar--squircle" style="background:linear-gradient(135deg,#34D399,#38BDF8);color:#fff;"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17l6 -6l4 4l8 -8"/><path d="M14 7l7 0l0 7"/></svg></span>
                <div style="flex:1 1 auto;min-width:0;">
                  <div class="ax-cluster" style="justify-content:space-between;"><div class="ax-text-truncate" style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Data Analytics with Python</div><b class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);">45%</b></div>
                  <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);margin:2px 0 6px;">18 of 40 lessons · Priya Nair</div>
                  <div class="ax-progress ax-progress--sm"><div class="ax-progress__track"><div class="ax-progress__fill" style="width:45%;background:var(--ax-viz-emerald);"></div></div></div>
                </div>
              </div>
              <div class="ax-cluster" style="gap:var(--ax-space-4);flex-wrap:nowrap;">
                <span class="ax-avatar ax-avatar--md ax-avatar--squircle" style="background:linear-gradient(135deg,#FBBF24,#FB7185);color:#fff;"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"/><path d="M12 12l8 -4.5"/><path d="M12 12l0 9"/></svg></span>
                <div style="flex:1 1 auto;min-width:0;">
                  <div class="ax-cluster" style="justify-content:space-between;"><div class="ax-text-truncate" style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Product Management 101</div><b class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);">28%</b></div>
                  <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);margin:2px 0 6px;">7 of 25 lessons · Tomás Herrera</div>
                  <div class="ax-progress ax-progress--sm"><div class="ax-progress__track"><div class="ax-progress__fill" style="width:28%;background:var(--ax-viz-amber);"></div></div></div>
                </div>
              </div>
            </div>
          </section>

          <!-- Progress / Instructor Rating rings (4) -->
          <section class="ax-card ax-col--4" role="region" aria-label="Completion and instructor rating">
            <div class="ax-card__header">
              <div class="ax-card__titles"><h2 class="ax-card__title">Performance</h2></div>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--ax-space-4);align-items:center;">
              <div style="text-align:center;">
                <div id="ax-completion-ring" aria-label="Radial gauge of overall completion rate at 64%"></div>
                <small style="color:var(--ax-text-subtle);font-size:var(--ax-text-xs);">Avg completion</small>
              </div>
              <div style="text-align:center;">
                <div id="ax-rating-ring" aria-label="Radial gauge of average instructor rating at 4.7 out of 5"></div>
                <small style="color:var(--ax-text-subtle);font-size:var(--ax-text-xs);">Instructor rating</small>
              </div>
              <div style="grid-column:1 / -1;">
                <div class="ax-divider"></div>
                <div class="ax-cluster" style="justify-content:space-between;margin-top:var(--ax-space-3);"><span style="font-size:var(--ax-text-sm);color:var(--ax-text-muted);">Avg. watch time</span><b class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);">42 min</b></div>
                <div class="ax-cluster" style="justify-content:space-between;margin-top:var(--ax-space-2);"><span style="font-size:var(--ax-text-sm);color:var(--ax-text-muted);">Certificates issued</span><b class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);">2,318</b></div>
                <div class="ax-cluster" style="justify-content:space-between;margin-top:var(--ax-space-2);"><span style="font-size:var(--ax-text-sm);color:var(--ax-text-muted);">Active this week</span><b class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);">9,640</b></div>
              </div>
            </div>
          </section>

          <!-- ───── UPCOMING CLASSES (4) + TOP COURSES (8) ───── -->
          <section class="ax-card ax-col--8" role="region" aria-label="Upcoming live classes">
            <div class="ax-card__header">
              <div class="ax-card__titles"><h2 class="ax-card__title">Upcoming Classes</h2></div>
              <a class="ax-btn ax-btn--link" href="#">Calendar</a>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-3);">
              <div class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;padding-bottom:var(--ax-space-3);border-bottom:1px solid var(--ax-border);">
                <div style="text-align:center;min-width:54px;"><div class="ax-num" style="font-family:var(--ax-font-mono);font-weight:700;color:var(--ax-accent);font-size:var(--ax-text-lg);">10:00</div><div style="font-size:var(--ax-text-2xs);color:var(--ax-text-subtle);">AM</div></div>
                <div style="flex:1;min-width:0;"><div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Live Q&amp;A · React Patterns</div><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Daniel Cho · 184 attending</div></div>
                <span class="ax-badge ax-badge--soft ax-badge--success ax-badge--pill"><span class="ax-badge__dot"></span>Today</span>
              </div>
              <div class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;padding-bottom:var(--ax-space-3);border-bottom:1px solid var(--ax-border);">
                <div style="text-align:center;min-width:54px;"><div class="ax-num" style="font-family:var(--ax-font-mono);font-weight:700;color:var(--ax-text-strong);font-size:var(--ax-text-lg);">2:30</div><div style="font-size:var(--ax-text-2xs);color:var(--ax-text-subtle);">PM</div></div>
                <div style="flex:1;min-width:0;"><div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Design Critique Workshop</div><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Mira Aoki · 96 attending</div></div>
                <span class="ax-badge ax-badge--soft ax-badge--neutral ax-badge--pill">Today</span>
              </div>
              <div class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;padding-bottom:var(--ax-space-3);border-bottom:1px solid var(--ax-border);">
                <div style="text-align:center;min-width:54px;"><div class="ax-num" style="font-family:var(--ax-font-mono);font-weight:700;color:var(--ax-text-strong);font-size:var(--ax-text-lg);">11:00</div><div style="font-size:var(--ax-text-2xs);color:var(--ax-text-subtle);">AM</div></div>
                <div style="flex:1;min-width:0;"><div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Python Data Lab</div><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Priya Nair · 142 enrolled</div></div>
                <span class="ax-badge ax-badge--soft ax-badge--neutral ax-badge--pill">Tomorrow</span>
              </div>
              <div class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;">
                <div style="text-align:center;min-width:54px;"><div class="ax-num" style="font-family:var(--ax-font-mono);font-weight:700;color:var(--ax-text-strong);font-size:var(--ax-text-lg);">4:00</div><div style="font-size:var(--ax-text-2xs);color:var(--ax-text-subtle);">PM</div></div>
                <div style="flex:1;min-width:0;"><div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">PM Career AMA</div><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Tomás Herrera · 210 enrolled</div></div>
                <span class="ax-badge ax-badge--soft ax-badge--neutral ax-badge--pill">Fri</span>
              </div>
            </div>
          </section>

          <!-- Top Courses (8) -->
          <section class="ax-card ax-col--8" role="region" aria-label="Top courses">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <h2 class="ax-card__title">Top Courses</h2>
                <p class="ax-card__subtitle">By enrollments &amp; revenue this term</p>
              </div>
              <a class="ax-btn ax-btn--link" href="#">View all</a>
            </div>
            <div class="ax-table-wrap">
              <table class="ax-table ax-table--hover">
                <thead class="ax-table__head">
                  <tr>
                    <th class="ax-table__th" scope="col">Course</th>
                    <th class="ax-table__th ax-table__th--num" scope="col">Students</th>
                    <th class="ax-table__th" scope="col">Rating</th>
                    <th class="ax-table__th ax-table__th--num" scope="col">Completion</th>
                    <th class="ax-table__th ax-table__th--num" scope="col">Revenue</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="ax-table__row">
                    <td class="ax-table__td"><div class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;"><span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:linear-gradient(135deg,#38BDF8,#A78BFA);"></span><div><div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Advanced React Patterns</div><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Daniel Cho</div></div></div></td>
                    <td class="ax-table__td ax-table__td--num ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text);">4,210</td>
                    <td class="ax-table__td"><span class="ax-rating ax-rating--sm" role="img" aria-label="Rated 4.9 of 5"><svg class="ax-rating__star ax-rating__star--full" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"/></svg><span class="ax-rating__value ax-num">4.9</span></span></td>
                    <td class="ax-table__td ax-table__td--num ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-viz-emerald);">82%</td>
                    <td class="ax-table__td ax-table__td--num ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);font-weight:var(--ax-weight-semibold);">$18,420</td>
                  </tr>
                  <tr class="ax-table__row">
                    <td class="ax-table__td"><div class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;"><span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:linear-gradient(135deg,#F472B6,#FBBF24);"></span><div><div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">UI Design Foundations</div><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Mira Aoki</div></div></div></td>
                    <td class="ax-table__td ax-table__td--num ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text);">3,684</td>
                    <td class="ax-table__td"><span class="ax-rating ax-rating--sm" role="img" aria-label="Rated 4.8 of 5"><svg class="ax-rating__star ax-rating__star--full" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"/></svg><span class="ax-rating__value ax-num">4.8</span></span></td>
                    <td class="ax-table__td ax-table__td--num ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-viz-emerald);">74%</td>
                    <td class="ax-table__td ax-table__td--num ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);font-weight:var(--ax-weight-semibold);">$14,210</td>
                  </tr>
                  <tr class="ax-table__row">
                    <td class="ax-table__td"><div class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;"><span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:linear-gradient(135deg,#34D399,#38BDF8);"></span><div><div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Data Analytics with Python</div><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Priya Nair</div></div></div></td>
                    <td class="ax-table__td ax-table__td--num ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text);">3,102</td>
                    <td class="ax-table__td"><span class="ax-rating ax-rating--sm" role="img" aria-label="Rated 4.7 of 5"><svg class="ax-rating__star ax-rating__star--full" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"/></svg><span class="ax-rating__value ax-num">4.7</span></span></td>
                    <td class="ax-table__td ax-table__td--num ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-viz-amber);">58%</td>
                    <td class="ax-table__td ax-table__td--num ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);font-weight:var(--ax-weight-semibold);">$11,840</td>
                  </tr>
                  <tr class="ax-table__row">
                    <td class="ax-table__td"><div class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;"><span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:linear-gradient(135deg,#FBBF24,#FB7185);"></span><div><div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Product Management 101</div><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Tomás Herrera</div></div></div></td>
                    <td class="ax-table__td ax-table__td--num ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text);">2,540</td>
                    <td class="ax-table__td"><span class="ax-rating ax-rating--sm" role="img" aria-label="Rated 4.6 of 5"><svg class="ax-rating__star ax-rating__star--full" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"/></svg><span class="ax-rating__value ax-num">4.6</span></span></td>
                    <td class="ax-table__td ax-table__td--num ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-viz-red);">41%</td>
                    <td class="ax-table__td ax-table__td--num ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);font-weight:var(--ax-weight-semibold);">$8,420</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </section>

          <!-- ───── TOP INSTRUCTORS (4) + RECENT ENROLLMENTS (8) ───── -->
          <section class="ax-card ax-col--4" role="region" aria-label="Top instructors">
            <div class="ax-card__header">
              <div class="ax-card__titles"><h2 class="ax-card__title">Top Instructors</h2></div>
              <a class="ax-btn ax-btn--link" href="#">View all</a>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-4);">
              <div class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;">
                <b class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-warning-500);width:18px;text-align:center;">1</b>
                <span class="ax-avatar ax-avatar--squircle" style="background:linear-gradient(135deg,#38BDF8,#A78BFA);"></span>
                <div style="flex:1;min-width:0;"><div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Daniel Cho</div><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">8 courses · 4.9 avg</div></div>
                <b class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);">6,210</b>
              </div>
              <div class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;">
                <b class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);width:18px;text-align:center;">2</b>
                <span class="ax-avatar ax-avatar--squircle" style="background:linear-gradient(135deg,#F472B6,#FBBF24);"></span>
                <div style="flex:1;min-width:0;"><div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Mira Aoki</div><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">6 courses · 4.8 avg</div></div>
                <b class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);">5,184</b>
              </div>
              <div class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;">
                <b class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-subtle);width:18px;text-align:center;">3</b>
                <span class="ax-avatar ax-avatar--squircle" style="background:linear-gradient(135deg,#34D399,#38BDF8);"></span>
                <div style="flex:1;min-width:0;"><div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Priya Nair</div><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">5 courses · 4.7 avg</div></div>
                <b class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);">4,096</b>
              </div>
              <div class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;">
                <b class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-subtle);width:18px;text-align:center;">4</b>
                <span class="ax-avatar ax-avatar--squircle" style="background:linear-gradient(135deg,#FBBF24,#FB7185);"></span>
                <div style="flex:1;min-width:0;"><div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Tomás Herrera</div><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">4 courses · 4.6 avg</div></div>
                <b class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);">3,402</b>
              </div>
            </div>
          </section>

          <!-- Recent Enrollments (8) -->
          <section class="ax-card ax-col--12" role="region" aria-label="Recent enrollments">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <h2 class="ax-card__title">Recent Enrollments</h2>
                <p class="ax-card__subtitle">Latest students &amp; payments</p>
              </div>
              <a class="ax-btn ax-btn--link" href="#">View all</a>
            </div>
            <div class="ax-table-wrap">
              <table class="ax-table ax-table--hover">
                <thead class="ax-table__head">
                  <tr>
                    <th class="ax-table__th" scope="col">Student</th>
                    <th class="ax-table__th" scope="col">Course</th>
                    <th class="ax-table__th" scope="col">Date</th>
                    <th class="ax-table__th ax-table__th--num" scope="col">Amount</th>
                    <th class="ax-table__th" scope="col">Status</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="ax-table__row">
                    <td class="ax-table__td"><div class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;"><span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:color-mix(in oklab,#38BDF8 18%,transparent);color:#38BDF8;"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"/><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/></svg></span><div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Ava Sutton</div></div></td>
                    <td class="ax-table__td" style="color:var(--ax-text-muted);">Advanced React Patterns</td>
                    <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);">Jun 12</td>
                    <td class="ax-table__td ax-table__td--num ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);">$89</td>
                    <td class="ax-table__td"><span class="ax-badge ax-badge--soft ax-badge--success ax-badge--pill"><span class="ax-badge__dot"></span>Paid</span></td>
                  </tr>
                  <tr class="ax-table__row">
                    <td class="ax-table__td"><div class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;"><span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:color-mix(in oklab,#A78BFA 18%,transparent);color:#A78BFA;"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"/><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/></svg></span><div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Henry Whitlock</div></div></td>
                    <td class="ax-table__td" style="color:var(--ax-text-muted);">UI Design Foundations</td>
                    <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);">Jun 12</td>
                    <td class="ax-table__td ax-table__td--num ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);">$69</td>
                    <td class="ax-table__td"><span class="ax-badge ax-badge--soft ax-badge--success ax-badge--pill"><span class="ax-badge__dot"></span>Paid</span></td>
                  </tr>
                  <tr class="ax-table__row">
                    <td class="ax-table__td"><div class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;"><span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:color-mix(in oklab,#FBBF24 18%,transparent);color:#FBBF24;"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"/><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/></svg></span><div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Camila Rossi</div></div></td>
                    <td class="ax-table__td" style="color:var(--ax-text-muted);">Data Analytics with Python</td>
                    <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);">Jun 11</td>
                    <td class="ax-table__td ax-table__td--num ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);">$129</td>
                    <td class="ax-table__td"><span class="ax-badge ax-badge--soft ax-badge--warning ax-badge--pill"><span class="ax-badge__dot"></span>Pending</span></td>
                  </tr>
                  <tr class="ax-table__row">
                    <td class="ax-table__td"><div class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;"><span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:color-mix(in oklab,#34D399 18%,transparent);color:#34D399;"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"/><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/></svg></span><div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Marcus Lee</div></div></td>
                    <td class="ax-table__td" style="color:var(--ax-text-muted);">Product Management 101</td>
                    <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);">Jun 10</td>
                    <td class="ax-table__td ax-table__td--num ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);">$59</td>
                    <td class="ax-table__td"><span class="ax-badge ax-badge--soft ax-badge--success ax-badge--pill"><span class="ax-badge__dot"></span>Paid</span></td>
                  </tr>
                  <tr class="ax-table__row">
                    <td class="ax-table__td"><div class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;"><span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:color-mix(in oklab,#FB7185 18%,transparent);color:#FB7185;"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"/><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/></svg></span><div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Hana Suzuki</div></div></td>
                    <td class="ax-table__td" style="color:var(--ax-text-muted);">Advanced React Patterns</td>
                    <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);">Jun 9</td>
                    <td class="ax-table__td ax-table__td--num ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);">$89</td>
                    <td class="ax-table__td"><span class="ax-badge ax-badge--soft ax-badge--danger ax-badge--pill"><span class="ax-badge__dot"></span>Refunded</span></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </section>

        </div>
{% endblock %}

{% block scripts %}
<script type="module">
    const { renderChart } = window.Vireo.charts;
          const cv = (n) => getComputedStyle(document.documentElement).getPropertyValue(n).trim();

          // Enrollments (column) + Revenue (line) mixed
          const er = document.getElementById('ax-enroll-rev');
          if (er) {
            renderChart(er, 'line', [
              { name: 'Enrollments', type: 'column', data: [820, 940, 880, 1120, 1240, 1180, 1380, 1290, 1460, 1520, 1610, 1740] },
              { name: 'Revenue ($K)', type: 'line', data: [32, 38, 35, 44, 48, 46, 52, 49, 55, 58, 61, 66] },
            ], {
              height: 300, legend: 'none', accent: true,
              apex: {
                colors: [cv('--ax-accent'), cv('--ax-viz-amber')],
                stroke: { width: [0, 3], curve: 'smooth' },
                plotOptions: { bar: { borderRadius: 4, columnWidth: '52%' } },
                yaxis: [
                  { labels: { formatter: (v) => Math.round(v) } },
                  { opposite: true, labels: { formatter: (v) => '$' + Math.round(v) + 'K' } },
                ],
              },
            });
          }

          // Students by category donut
          const cat = document.getElementById('ax-lms-cat');
          if (cat) {
            renderChart(cat, 'donut', [38, 24, 21, 17], {
              height: 220, legend: 'none',
              apex: {
                labels: ['Development', 'Design', 'Business', 'Marketing'],
                colors: [cv('--ax-viz-cyan'), cv('--ax-viz-violet'), cv('--ax-viz-pink'), cv('--ax-viz-amber')],
                stroke: { width: 0 },
                plotOptions: { pie: { donut: { size: '72%', labels: { show: true,
                  name: { fontFamily: cv('--ax-font-sans') },
                  value: { fontFamily: cv('--ax-font-mono'), fontWeight: 600 },
                  total: { show: true, label: 'Students', formatter: () => '18.4K' } } } } },
              },
            });
          }

          // Completion radial gauge
          const comp = document.getElementById('ax-completion-ring');
          if (comp) {
            renderChart(comp, 'radialBar', [64], {
              height: 160, legend: 'none', accent: true,
              apex: {
                colors: [cv('--ax-accent')],
                plotOptions: { radialBar: { hollow: { size: '58%' },
                  track: { background: cv('--ax-fill-hover') },
                  dataLabels: { name: { show: false }, value: { offsetY: 6, color: cv('--ax-text-strong'), fontSize: '20px', fontFamily: cv('--ax-font-mono'), fontWeight: 700, formatter: (v) => v + '%' } } } },
                fill: { type: 'solid' },
              },
            });
          }

          // Instructor rating gauge (4.7 / 5 = 94%)
          const rating = document.getElementById('ax-rating-ring');
          if (rating) {
            renderChart(rating, 'radialBar', [94], {
              height: 160, legend: 'none',
              apex: {
                colors: [cv('--ax-warning-500')],
                plotOptions: { radialBar: { hollow: { size: '58%' },
                  track: { background: cv('--ax-fill-hover') },
                  dataLabels: { name: { show: false }, value: { offsetY: 6, color: cv('--ax-text-strong'), fontSize: '20px', fontFamily: cv('--ax-font-mono'), fontWeight: 700, formatter: () => '4.7' } } } },
                fill: { type: 'solid' },
              },
            });
          }
        </script>
{% endblock %}