{{!
    This file is part of Moodle - http://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.

    @template block_mwa_dashboard/dashboard_page
    @copyright 2026 Bruno Porto
    @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
}}
<div id="block-mwa-dashboard-app"
     class="block-mwa-dashboard-app"
     data-courseid="{{courseid}}"
     data-region="mwa-dashboard">
<svg class="mwa-icon-sprite" aria-hidden="true">
  <symbol id="mwa-icon-target" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/></symbol>
  <symbol id="mwa-icon-bell" viewBox="0 0 24 24"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9"/><path d="M10 21h4"/></symbol>
  <symbol id="mwa-icon-users" viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></symbol>
  <symbol id="mwa-icon-user" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></symbol>
  <symbol id="mwa-icon-flame" viewBox="0 0 24 24"><path d="M12 22c4 0 7-3 7-7 0-3-1.5-5.5-4-8 .2 3-1 4-2 5-1-4-3-7-5-9 0 5-3 7-3 12 0 4 3 7 7 7z"/></symbol>
  <symbol id="mwa-icon-clipboard" viewBox="0 0 24 24"><rect x="5" y="4" width="14" height="17" rx="2"/><path d="M9 4V2h6v2M9 9h6M9 13h6M9 17h4"/></symbol>
  <symbol id="mwa-icon-file" viewBox="0 0 24 24"><path d="M6 2h8l4 4v16H6z"/><path d="M14 2v5h5M9 12h6M9 16h6"/></symbol>
  <symbol id="mwa-icon-lightbulb" viewBox="0 0 24 24"><path d="M9 18h6M10 22h4M8 14a7 7 0 1 1 8 0c-1 1-1 2-1 4H9c0-2 0-3-1-4z"/></symbol>
  <symbol id="mwa-icon-message" viewBox="0 0 24 24"><path d="M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></symbol>
  <symbol id="mwa-icon-chart" viewBox="0 0 24 24"><path d="M4 20V10M10 20V4M16 20v-7M22 20H2"/></symbol>
  <symbol id="mwa-icon-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/></symbol>
  <symbol id="mwa-icon-check" viewBox="0 0 24 24"><path d="m5 12 4 4L19 6"/></symbol>
  <symbol id="mwa-icon-hourglass" viewBox="0 0 24 24"><path d="M6 2h12M6 22h12M7 2c0 5 2 7 5 10-3 3-5 5-5 10M17 2c0 5-2 7-5 10 3 3 5 5 5 10"/></symbol>
  <symbol id="mwa-icon-circle" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></symbol>
  <symbol id="mwa-icon-star" viewBox="0 0 24 24"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9z"/></symbol>
  <symbol id="mwa-icon-eye" viewBox="0 0 24 24"><path d="M2 12s4-6 10-6 10 6 10 6-4 6-10 6S2 12 2 12z"/><circle cx="12" cy="12" r="2.5"/></symbol>
  <symbol id="mwa-icon-trend-down" viewBox="0 0 24 24"><path d="m3 6 6 6 4-4 8 8M16 16h5v-5"/></symbol>
  <symbol id="mwa-icon-bolt" viewBox="0 0 24 24"><path d="m13 2-8 12h7l-1 8 8-12h-7z"/></symbol>
  <symbol id="mwa-icon-ban" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="m6 6 12 12"/></symbol>
  <symbol id="mwa-icon-refresh" viewBox="0 0 24 24"><path d="M20 7v5h-5M4 17v-5h5"/><path d="M6.5 8a7 7 0 0 1 11.5-1l2 5M18 16a7 7 0 0 1-11.5 1l-2-5"/></symbol>
  <symbol id="mwa-icon-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v6l4 2"/></symbol>
  <symbol id="mwa-icon-mail" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m4 7 8 6 8-6"/></symbol>
  <symbol id="mwa-icon-edit" viewBox="0 0 24 24"><path d="M4 20h4L19 9l-4-4L4 16zM13 7l4 4"/></symbol>
  <symbol id="mwa-icon-close" viewBox="0 0 24 24"><path d="m6 6 12 12M18 6 6 18"/></symbol>
  <symbol id="mwa-icon-warning" viewBox="0 0 24 24"><path d="M12 3 2 21h20zM12 9v5M12 18h.01"/></symbol>
  <symbol id="mwa-icon-download" viewBox="0 0 24 24"><path d="M12 3v12M7 10l5 5 5-5M4 21h16"/></symbol>
  <symbol id="mwa-icon-puzzle" viewBox="0 0 24 24"><path d="M8 3h4a3 3 0 1 0 6 0h3v7a3 3 0 1 0 0 6v5h-7a3 3 0 1 0-6 0H3v-7a3 3 0 1 0 0-6V3z"/></symbol>
  <symbol id="mwa-icon-key" viewBox="0 0 24 24"><circle cx="8" cy="15" r="4"/><path d="m11 12 9-9M16 7l3 3"/></symbol>
  <symbol id="mwa-icon-pin" viewBox="0 0 24 24"><path d="M12 22v-7M7 3h10l-2 7 3 3H6l3-3z"/></symbol>
  <symbol id="mwa-icon-play" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="m10 8 6 4-6 4z"/></symbol>
  <symbol id="mwa-icon-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5 19 19M19 5l-1.5 1.5M6.5 17.5 5 19"/></symbol>
</svg>
<div id="loading" class="loading"><div><div class="spinner"></div><h2 data-i18n="loading_title"></h2><p class="muted" id="loadStatus" data-i18n="loading_waiting"></p></div></div>
<div class="app">
  <div class="topbar"><div class="brand"><div class="brand-inner"><img src="{{wwwroot}}/blocks/mwa_dashboard/pix/logo.png" data-i18n-attr="alt:brand_logo_alt" alt="" class="brand-logo"><div class="brand-text"><span data-i18n="brand_name"></span><br><small data-i18n="brand_subtitle"></small></div></div></div><div class="top-actions"><input id="search" class="search" placeholder="" data-i18n-attr="placeholder:search_student" style="display:none"></div></div>
  <div class="layout"><aside class="sidebar">
    <div class="nav-title" data-i18n="nav_today"></div>
    <div class="nav-item" data-page="ac" data-action-page="ac"><span><svg class="mwa-ui-icon"><use href="#mwa-icon-target"></use></svg></span><span data-i18n="nav_action_center"></span><span class="nav-badge" id="navActionBadge">0</span></div>
    <div class="nav-item" data-page="alerts" data-action-page="alerts"><span><svg class="mwa-ui-icon"><use href="#mwa-icon-bell"></use></svg></span><span data-i18n="nav_alerts"></span><span class="nav-badge amber" id="navAlertBadge">0</span></div>

    <div class="nav-title" data-i18n="nav_students"></div>
    <div class="nav-item" data-page="classlist" data-action-page="classlist"><span><svg class="mwa-ui-icon"><use href="#mwa-icon-users"></use></svg></span><span data-i18n="nav_class_list"></span><span class="nav-badge ia">IA</span></div>
    <div class="nav-item" data-page="studentprofile" data-action-page="studentprofile"><span><svg class="mwa-ui-icon"><use href="#mwa-icon-user"></use></svg></span><span data-i18n="nav_student_profile"></span></div>
    <div class="nav-item" data-page="heatmap" data-action-page="heatmap"><span><svg class="mwa-ui-icon"><use href="#mwa-icon-flame"></use></svg></span><span data-i18n="nav_access_heatmap"></span></div>

    <div class="nav-title" data-i18n="nav_content"></div>
    <div class="nav-item" data-page="activities" data-action-page="activities"><span><svg class="mwa-ui-icon"><use href="#mwa-icon-clipboard"></use></svg></span><span data-i18n="nav_activities"></span><span class="nav-badge ia">IA</span></div>
    <div class="nav-item" data-page="grades" data-action-page="grades"><span><svg class="mwa-ui-icon"><use href="#mwa-icon-file"></use></svg></span><span data-i18n="nav_grades"></span></div>

    <div class="nav-title" data-i18n="nav_ai"></div>
    <div class="nav-item" data-page="chat" data-action-page="chat"><span><svg class="mwa-ui-icon"><use href="#mwa-icon-lightbulb"></use></svg></span><span data-i18n="nav_chat"></span><span class="nav-badge ia">IA</span></div>

    <div class="nav-title" data-i18n="nav_report"></div>
    <div class="nav-item" data-page="interventions" data-action-page="interventions"><span><svg class="mwa-ui-icon"><use href="#mwa-icon-message"></use></svg></span><span data-i18n="nav_interventions"></span></div>
    <div class="nav-item" data-page="teacherfeedback" data-action-page="teacherfeedback"><span><svg class="mwa-ui-icon"><use href="#mwa-icon-chart"></use></svg></span><span data-i18n="tf_nav"></span><span class="nav-badge ia">IA</span></div>

  </aside><button type="button" id="mwaSidebarToggle" class="mwa-sidebar-toggle" aria-expanded="true" aria-label="{{#str}}sidebar_collapse, block_mwa_dashboard{{/str}}" title="{{#str}}sidebar_collapse, block_mwa_dashboard{{/str}}"><span class="mwa-sidebar-toggle-icon" aria-hidden="true">&#8249;</span></button><main class="main">
    <section id="page-ac" class="page">
      <div class="hero ac-hero">
        <div>
          <div class="date" id="todayLabel"></div>
          <h1 class="mwa-page-title"><span class="mwa-page-title-icon" aria-hidden="true"><svg class="mwa-ui-icon"><use href="#mwa-icon-target"></use></svg></span><span data-i18n="action_center_title"></span></h1>
          <p id="actionGreeting"></p>
        </div>

      </div>

      <div id="actionCardsRow" class="action-cards-row"></div>
      <div id="kpis" class="kpis"></div>

      <div class="card ac-retention-card">
        <div class="card-head">
          <span>&#128200; <span data-i18n="weekly_retention_curve"></span></span><span class="mwa-help-tip" tabindex="0" role="img" aria-label="{{#str}}ac_tip_retention_curve, block_mwa_dashboard{{/str}}" title="{{#str}}ac_tip_retention_curve, block_mwa_dashboard{{/str}}" data-tooltip="{{#str}}ac_tip_retention_curve, block_mwa_dashboard{{/str}}">?</span>
        </div>
        <div class="card-body"><canvas id="retentionChart" height="154"></canvas></div>
      </div>

      <div class="grid2">
        <div class="card ac-click-card" data-action-page="classlist" data-cl-filter-target="engaged" role="button" tabindex="0">
          <div class="card-head">&#128201; <span data-i18n="engagement_index"></span><span class="mwa-help-tip" tabindex="0" role="img" aria-label="{{#str}}ac_tip_engagement_index, block_mwa_dashboard{{/str}}" title="{{#str}}ac_tip_engagement_index, block_mwa_dashboard{{/str}}" data-tooltip="{{#str}}ac_tip_engagement_index, block_mwa_dashboard{{/str}}">?</span></div>
          <div class="card-body"><div class="engage"><div class="gauge" id="gauge" style="--p:0"><div class="gauge-inner"><div><div id="engPct" class="gauge-num">0%</div><div id="engLabel" class="gauge-label" data-i18n="no_data"></div></div></div></div><div><p class="muted" data-i18n="engagement_desc"></p><div class="legend"><span><i class="dot" style="background:var(--red)"></i><span data-i18n="legend_low"></span></span><span><i class="dot" style="background:var(--blue)"></i><span data-i18n="legend_average"></span></span><span><i class="dot" style="background:var(--green)"></i><span data-i18n="legend_high"></span></span></div></div></div></div>
        </div>
        <div class="card ac-event-card">
          <div class="card-head"><svg class="mwa-ui-icon" aria-hidden="true"><use href="#mwa-icon-chart"></use></svg> <span data-i18n="event_distribution"></span><span class="mwa-help-tip" tabindex="0" role="img" aria-label="{{#str}}ac_tip_event_distribution, block_mwa_dashboard{{/str}}" title="{{#str}}ac_tip_event_distribution, block_mwa_dashboard{{/str}}" data-tooltip="{{#str}}ac_tip_event_distribution, block_mwa_dashboard{{/str}}">?</span></div>
          <div class="card-body"><p class="muted ac-event-description" data-i18n="event_distribution_desc"></p><canvas id="eventChart" height="210"></canvas></div>
        </div>
      </div>

    </section>
    <section id="page-alerts" class="page">
      <div class="hero">
        <div>
          <div class="date" data-i18n="alerts_page_title"></div>
          <h1 class="mwa-page-title"><span class="mwa-page-title-icon" aria-hidden="true"><svg class="mwa-ui-icon"><use href="#mwa-icon-bell"></use></svg></span><span data-i18n="alerts_page_title"></span></h1>
          <p data-i18n="alerts_page_subtitle"></p>
        </div>
      </div>
      <div class="sa-kpi-row" id="saKpisRow"></div>
      <div id="saAlertList"></div>
    </section>
    <section id="page-classlist" class="page">
      <div class="hero">
        <div>
          <div class="date" data-i18n="students_label"></div>
          <h1 class="mwa-page-title"><span class="mwa-page-title-icon" aria-hidden="true"><svg class="mwa-ui-icon"><use href="#mwa-icon-users"></use></svg></span><span data-i18n="class_list"></span></h1>
          <p data-i18n="class_list_subtitle"></p>
        </div>
      </div>
      <div id="clKpiRow" class="cl-kpi-row"></div>
      <div class="cl-filter-panel">
        <div class="cl-filter-grid">
          <div class="cl-filter-group cl-filter-group-main">
            <label class="cl-filter-label" for="clFilterBar" data-i18n="cl_filter_participation_label"></label>
            <select id="clFilterBar" class="cl-sort-select cl-participation-select"></select>
          </div>
          <div class="cl-filter-group cl-filter-sort-group">
            <label class="cl-filter-label" for="clSort" data-i18n="cl_filter_sort_label"></label>
            <select id="clSort" class="cl-sort-select">
              <option value="risk"         data-i18n="cl_sort_risk"></option>
              <option value="interactions" data-i18n="cl_sort_interactions"></option>
              <option value="alpha"        data-i18n="cl_sort_alpha"></option>
              <option value="participation" data-i18n="cl_sort_participation"></option>
              <option value="time"         data-i18n="cl_sort_time"></option>
            </select>
          </div>
          <div class="cl-filter-group cl-filter-search-group">
            <label class="cl-filter-label" for="clSearch" data-i18n="cl_filter_search_label"></label>
            <label class="cl-search-wrap" for="clSearch">
              <span aria-hidden="true"><svg class="mwa-ui-icon"><use href="#mwa-icon-search"></use></svg></span>
              <input id="clSearch" type="text" class="cl-search"
                data-i18n-attr="placeholder:cl_search_placeholder"
                placeholder="">
            </label>
          </div>
          <div class="cl-filter-group cl-filter-clear-group">
            <span class="cl-filter-label" aria-hidden="true">&nbsp;</span>
            <button type="button" class="cl-filter-clear-btn" data-mwa-action="classlist-clear-filters">&#128465; <span data-i18n="clearfilters"></span></button>
          </div>
        </div>
        <div class="cl-filter-context"><span id="clCount" class="cl-count"></span></div>
      </div>
      <div class="card">
        <div class="cl-card-head">
          <span class="cl-card-title">&#128101; <span data-i18n="class_list"></span><span class="mwa-help-tip" tabindex="0" role="img" aria-label="{{#str}}cl_tip_class_list, block_mwa_dashboard{{/str}}" title="{{#str}}cl_tip_class_list, block_mwa_dashboard{{/str}}" data-tooltip="{{#str}}cl_tip_class_list, block_mwa_dashboard{{/str}}">?</span></span>
        </div>
        <div class="cl-tbl-wrap">
          <table class="cl-tbl" id="clTable">
            <thead>
              <tr>
                <th style="width:10%;" class="center cl-engagement-head" data-i18n="cl_th_participation"></th>
                <th style="width:16%;" data-i18n="student"></th>
                <th style="width:14%;" aria-label="{{#str}}cl_th_situation, block_mwa_dashboard{{/str}}"></th>
                <th style="width:18%;" data-i18n="cl_th_activity_progress"></th>
                <th style="width:18%;" data-i18n="cl_th_resource_progress"></th>
                <th style="width:7%;" class="center" data-i18n="interactions"></th>
                <th style="width:10%;" class="center" data-i18n="cl_th_total_time"></th>
                <th style="width:5%;"></th>
              </tr>
            </thead>
            <tbody id="clTableBody"></tbody>
          </table>
        </div>
        <div class="cl-progress-legend">
          <span><i class="cl-legend-dot done"></i><span data-i18n="cl_legend_done"></span></span>
          <span><i class="cl-legend-dot missing"></i><span data-i18n="cl_legend_missing"></span></span>
        </div>
        <div id="clPagination" class="cl-pagination"></div>
      </div>
    </section>
    <section id="page-grades" class="page">
      <div class="hero">
        <div>
          <div class="date" data-i18n="grades_label"></div>
          <h1 class="mwa-page-title"><span class="mwa-page-title-icon" aria-hidden="true"><svg class="mwa-ui-icon"><use href="#mwa-icon-file"></use></svg></span><span data-i18n="grades_title"></span></h1>
          <p data-i18n="grades_subtitle"></p>
        </div>
        <button type="button" class="gr-header-export-btn" onclick="window.MWAGrades&amp;&amp;window.MWAGrades.exportXLSX()">
          <span aria-hidden="true">&#8595;</span><span data-i18n="gr_export"></span>
        </button>
      </div>
      <div id="gradesWrap">
        <div class="gr-empty"><div class="gr-empty-icon">&#127891;</div><p data-i18n="gr_no_grades_loaded"></p></div>
      </div>
    </section>
    <section id="page-activities" class="page">
      <div class="hero">
        <div>
          <div class="date" data-i18n="content_label"></div>
          <h1 class="mwa-page-title"><span class="mwa-page-title-icon" aria-hidden="true"><svg class="mwa-ui-icon"><use href="#mwa-icon-clipboard"></use></svg></span><span data-i18n="activities_title"></span></h1>
          <p data-i18n="activities_subtitle"></p>
        </div>
      </div>
      <div class="kpis" id="actKpisRow"></div>
      <div class="act-filter-panel">
        <div class="act-filter-row" id="actFilterRow">
          <div class="act-filter-group">
            <label class="act-filter-label" for="actTypeFilter" data-i18n="act_filter_type_label"></label>
            <select id="actTypeFilter" class="act-standard-select">
              <option value="all" data-i18n="act_filter_all"></option>
              <option value="activity" data-i18n="act_filter_activity"></option>
              <option value="video" data-i18n="act_filter_video"></option>
              <option value="low" data-i18n="act_filter_low"></option>
              <option value="ignored" data-i18n="act_filter_ignored"></option>
            </select>
          </div>
          <div class="act-filter-group">
            <label class="act-filter-label" for="actAvailabilityFilter" data-i18n="act_filter_period_label"></label>
            <select id="actAvailabilityFilter" class="act-availability-select">
              <option value="all" data-i18n="act_availability_all"></option>
              <option value="open" data-i18n="act_availability_open"></option>
              <option value="today" data-i18n="act_availability_today"></option>
              <option value="closed" data-i18n="act_availability_closed"></option>
              <option value="future" data-i18n="act_availability_future"></option>
            </select>
          </div>
          <div class="act-filter-group act-filter-search-group">
            <label class="act-filter-label" for="actSearchInput" data-i18n="act_filter_search_label"></label>
            <label class="act-search-wrap">
              <span aria-hidden="true">&#128269;</span>
              <input id="actSearchInput" type="search" autocomplete="off" data-i18n-attr="placeholder:act_search_placeholder" placeholder="">
            </label>
          </div>
          <div class="act-filter-group act-filter-clear-group">
            <span class="act-filter-label" aria-hidden="true">&nbsp;</span>
            <button type="button" id="actClearFilters" class="act-clear-btn">&#128465; <span data-i18n="clearfilters"></span></button>
          </div>
        </div>
      </div>
      <div id="actAvailabilityLegend" class="act-availability-legend"></div>
      <div class="act-resource-grid" id="actResourceGrid"></div>
    </section>
    <section id="page-heatmap" class="page"><div class="hero"><div><div class="date" data-i18n="analysis_label"></div><h1 data-i18n="heatmap_title"></h1><p data-i18n="heatmap_subtitle"></p></div></div><div class="hm-filter-panel"><div class="hm-filter-title"><span aria-hidden="true">&#128269;</span><span data-i18n="hm_filters_title"></span></div><div class="hm-filter-grid"><div class="hm-filter-group hm-filter-search-group"><label class="hm-filter-label" for="heatmapSearchInput" data-i18n="hm_filter_search_label"></label><label class="hm-search-wrap"><span aria-hidden="true">&#128269;</span><input id="heatmapSearchInput" type="search" data-i18n-attr="placeholder:hm_search_placeholder" placeholder=""></label></div><div class="hm-filter-group"><label class="hm-filter-label" for="heatmapStudentSel" data-i18n="hm_filter_student_label"></label><select id="heatmapStudentSel" class="hm-filter-select"></select></div><div class="hm-filter-group"><label class="hm-filter-label" for="heatmapModSel" data-i18n="hm_filter_resource_label"></label><select id="heatmapModSel" class="hm-filter-select"></select></div><div class="hm-filter-group"><label class="hm-filter-label" for="heatmapModeSel" data-i18n="hm_filter_mode_label"></label><select id="heatmapModeSel" class="hm-filter-select"></select></div></div><div class="hm-filter-group hm-filter-period-group"><div class="hm-filter-label" data-i18n="hm_filter_period_label"></div><div id="heatmapDateFilters" class="hm-date-filters"><button type="button" class="btn-accent" data-hm-range="7" data-i18n="hm_range_7d"></button><button type="button" class="btn-ghost" data-hm-range="today" data-i18n="hm_range_today"></button><button type="button" class="btn-ghost" data-hm-range="30" data-i18n="hm_range_30d"></button><button type="button" class="btn-ghost" data-hm-range="month" data-i18n="hm_range_month"></button><button type="button" class="btn-ghost" data-hm-range="custom" data-i18n="hm_range_custom"></button><input id="heatmapStartDate" type="date" class="hm-date-input"><input id="heatmapEndDate" type="date" class="hm-date-input"></div></div></div><div id="heatmapKpis" class="hm-kpis"></div><div class="hm-layout"><div class="hm-main"><div class="card"><div class="card-head"><span data-i18n="day_hour"></span><span id="heatmapLegend" class="hm-legend-row"></span></div><div class="card-body" style="overflow:auto;padding:12px 8px;"><div id="heatmap" class="heat"></div><div id="heatmapTooltip" class="hm-tooltip" style="display:none;"></div></div></div><div id="heatmapDetail" class="card hm-detail-card"></div></div><div class="hm-side"><div class="card"><div class="card-head">&#128161; <span data-i18n="hm_insights_title"></span></div><div class="card-body" id="heatmapInsights" style="padding:14px 16px;"></div></div><div class="card" style="margin-top:0;"><div class="card-head">&#128202; <span data-i18n="hm_grades_title"></span></div><div class="card-body" id="heatmapGradeCorr" style="padding:14px 16px;"></div></div><div class="card" style="margin-top:0;"><div class="card-head">&#9200; <span data-i18n="hm_besttime_title"></span></div><div class="card-body" id="heatmapBestTime" style="padding:14px 16px;"></div></div></div></div></section>
    <section id="page-studentprofile" class="page">
      <div class="hero">
        <div>
          <div class="date" data-i18n="nav_student_profile"></div>
          <h1 class="mwa-page-title"><span class="mwa-page-title-icon" aria-hidden="true"><svg class="mwa-ui-icon"><use href="#mwa-icon-user"></use></svg></span><span data-i18n="nav_student_profile"></span></h1>
          <p data-i18n="sp_page_subtitle"></p>
        </div>
      </div>
      <div class="sp-selector-bar">
        <span class="sp-selector-label" data-i18n="sp_select_label"></span>
        <select id="spStudentSel" class="sp-student-select">
          <option value="" data-i18n="sp_select_placeholder"></option>
        </select>
      </div>
      <div id="spContent">
        <div class="sp-empty">
          <div class="sp-empty-icon">&#128100;</div>
          <p data-i18n="sp_select_hint"></p>
        </div>
      </div>
    </section>
    <section id="page-chat" class="page" style="padding:0;"><div style="display:flex;height:calc(100vh - 68px);gap:0;"><div id="chatSidebar" style="width:210px;flex-shrink:0;display:flex;flex-direction:column;gap:.3rem;border-right:1px solid var(--line);padding:.75rem .6rem;background:var(--panel);"><div style="font-size:.62rem;font-weight:700;color:var(--muted);letter-spacing:.07em;text-transform:uppercase;padding:.25rem .5rem .4rem;" data-i18n="chat_history"></div><div id="chatHistoryList" style="display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto;"></div><button class="btn-ghost" id="chatNewBtn" data-chat-new="1" style="font-size:.75rem;margin-top:.5rem;">&#65291; <span data-i18n="chat_new_conv"></span></button></div><div style="flex:1;display:flex;flex-direction:column;background:var(--panel2);"><div style="display:flex;align-items:center;gap:.65rem;padding:.75rem 1rem;border-bottom:1px solid var(--line);flex-shrink:0;background:var(--panel);"><div style="width:30px;height:30px;border-radius:9px;background:var(--blue-dim);display:flex;align-items:center;justify-content:center;font-size:.9rem;">&#10022;</div><div><div style="font-size:.85rem;font-weight:700;display:flex;align-items:center;gap:6px;"><span id="chatConvTitle" data-i18n="chat_assistant_name"></span><span class="mwa-help-tip chat-help-tip" tabindex="0" role="img" aria-label="{{#str}}chat_assistant_tip, block_mwa_dashboard{{/str}}" title="{{#str}}chat_assistant_tip, block_mwa_dashboard{{/str}}" data-tooltip="{{#str}}chat_assistant_tip, block_mwa_dashboard{{/str}}">?</span></div><div style="font-size:.68rem;color:var(--muted);" id="chatConvSub" data-i18n="chat_no_data_sub"></div></div><div style="margin-left:auto;display:flex;gap:.35rem;" id="chatContextChips"></div></div><div id="chatMessages" style="flex:1;overflow-y:auto;padding:.85rem 1rem;display:flex;flex-direction:column;gap:.65rem;"></div><div id="chatSuggestions" style="padding:0 1rem .5rem;display:flex;flex-wrap:wrap;gap:.3rem;"></div><div style="padding:.65rem .85rem;border-top:1px solid var(--line);display:flex;gap:.5rem;align-items:flex-end;flex-shrink:0;background:var(--panel);"><textarea id="chatInput" rows="1" style="flex:1;resize:none;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--radius-xl);padding:.5rem .85rem;font-family:inherit;font-size:.82rem;color:var(--text);outline:none;line-height:1.5;"></textarea><button class="btn-accent" style="font-size:.8rem;padding:.5rem .9rem;flex-shrink:0;" id="chatSendBtn">&#11014;</button></div></div></div></section>
    

    <section id="page-interventions" class="page">
      <div class="hero">
        <div>
          <h1 class="mwa-page-title"><span class="mwa-page-title-icon" aria-hidden="true"><svg class="mwa-ui-icon"><use href="#mwa-icon-message"></use></svg></span><span data-i18n="int_page_title"></span></h1>
          <p data-i18n="int_page_subtitle"></p>
        </div>
      </div>
      <div id="interventionsWrap">
        <div class="gr-empty"><div class="gr-empty-icon">&#128172;</div><p data-i18n="int_no_data"></p></div>
      </div>
    </section>
    <section id="page-teacherfeedback" class="page">
      <div class="hero fr-page-hero">
        <div>
          <h1 class="mwa-page-title"><span class="mwa-page-title-icon" aria-hidden="true"><svg class="mwa-ui-icon"><use href="#mwa-icon-chart"></use></svg></span><span data-i18n="tf_page_title"></span></h1>
          <p data-i18n="tf_page_subtitle"></p>
        </div>
      </div>
      <div id="teacherFeedbackWrap">
        <div class="gr-empty"><div class="gr-empty-icon">&#128200;</div><p data-i18n="tf_no_data"></p></div>
      </div>
    </section>
    <footer class="mwa-global-updated-footer" aria-live="polite">
      <span id="mwaGlobalUpdatedAt"></span>
    </footer>
  </main></div>
</div>
</div>
