{{!
    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">
<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 active" data-page="overview" data-action-page="overview"><span>🎯</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>🔔</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>👥</span><span data-i18n="nav_class_list"></span></div>
    <div class="nav-item" data-page="studentprofile" data-action-page="studentprofile"><span>👤</span><span data-i18n="nav_student_profile"></span></div>

    <div class="nav-title" data-i18n="nav_content"></div>
    <div class="nav-item" data-page="activities" data-action-page="activities"><span>📋</span><span data-i18n="nav_activities"></span></div>
    <div class="nav-item" data-page="grades" data-action-page="grades"><span>📝</span><span data-i18n="nav_grades"></span></div>
    <div class="nav-item" data-page="contentanalysis" data-action-page="contentanalysis"><span>📖</span><span data-i18n="nav_content_analysis"></span><span class="nav-badge ia">IA</span></div>

    
    <div class="nav-title" data-i18n="nav_analysis"></div>
    <div class="nav-item" data-page="heatmap" data-action-page="heatmap"><span>🔥</span><span data-i18n="nav_access_heatmap"></span></div>
    <div class="nav-item" data-page="engagement" data-action-page="engagement"><span>🔮</span><span data-i18n="nav_engagement"></span><span class="nav-badge ia">IA</span></div>

    <div class="nav-title" data-i18n="nav_ai"></div>
    <div class="nav-item" data-page="personalised" data-action-page="personalised"><span>🎯</span><span data-i18n="nav_personalised_plan"></span></div>
    <div class="nav-item" data-page="chat" data-action-page="chat"><span>💡</span><span data-i18n="nav_chat"></span></div>

    <div class="nav-title" data-i18n="nav_report"></div>
    <div class="nav-item" data-page="interventions" data-action-page="interventions"><span>💬</span><span data-i18n="nav_interventions"></span></div>

  </aside><main class="main">
    <section id="page-overview" class="page active">
      <div class="hero ac-hero">
        <div>
          <div class="date" id="todayLabel"></div>
          <h1><span data-i18n="action_center_title"></span></h1>
          <p><span data-i18n="action_center_subtitle"></span></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>📈 <span data-i18n="weekly_retention_curve"></span></span>
          <span class="card-head-note" data-i18n="unique_active_students_week"></span>
        </div>
        <div class="card-body"><canvas id="retentionChart" height="154"></canvas></div>
      </div>

      <div class="grid2">
        <div class="card">
          <div class="card-head">📉 <span data-i18n="engagement_index"></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">
          <div class="card-head">📊 <span data-i18n="event_distribution"></span></div>
          <div class="card-body"><canvas id="eventChart" height="210"></canvas></div>
        </div>
      </div>

      <div class="grid2 ac-priority-grid">
        <div class="card ac-priority-card">
          <div class="card-head ac-list-head">
            <div>
              <strong data-i18n="students_need_attention"></strong>
              <div class="card-sub" data-i18n="ordered_by_urgency"></div>
            </div>
            <div class="attention-panel-tools">
              <button class="btn small" data-mwa-action="toggle-select-priority" data-i18n="select_all"></button>
              <button class="btn primary small" data-mwa-action="open-bulk-email" data-i18n="bulk_email"></button>
            </div>
          </div>
          <div class="card-body"><div id="actionFocusList"></div></div>
        </div>
        <div class="card ac-ai-card">
          <div class="card-head" data-i18n="ai_prediction_explanation"></div>
          <div class="card-body"><div id="aiPredictionPanel" class="ai-placeholder"></div></div>
        </div>
      </div>
    </section>
    <section id="page-alerts" class="page">
      <div class="hero">
        <div>
          <div class="date" data-i18n="alerts_page_title"></div>
          <h1 data-i18n="alerts_page_title"></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 data-i18n="class_list"></h1>
          <p data-i18n="class_list_subtitle"></p>
        </div>
      </div>
      <div class="card">
        <div class="cl-card-head">
          <span class="cl-card-title">👥 <span data-i18n="class_list"></span></span>
          <select id="clSort" class="cl-sort-select">
            <option value="interactions" data-i18n="cl_sort_interactions"></option>
            <option value="alpha"        data-i18n="cl_sort_alpha"></option>
            <option value="ago"          data-i18n="cl_sort_ago"></option>
            <option value="participation" data-i18n="cl_sort_participation"></option>
            <option value="time"         data-i18n="cl_sort_time"></option>
          </select>
          <button id="clToggleBtn" class="cl-toggle-btn" data-mwa-action="classlist-toggle">
            📋 <span data-i18n="cl_view_activities"></span>
          </button>
          <input id="clSearch" type="text" class="cl-search"
            data-i18n-attr="placeholder:cl_search_placeholder"
            placeholder="">
          <span id="clCount" class="cl-count"></span>
        </div>
        <div class="cl-tbl-wrap">
          <table class="cl-tbl" id="clTable">
            <thead>
              <tr>
                <th style="width:27%;" data-i18n="student"></th>
                <th style="width:14%;" data-i18n="cl_th_last_access"></th>
                <th style="width:8%;" class="center" data-i18n="cl_th_days_without"></th>
                <th style="width:22%;" id="clThPart" data-i18n="cl_th_participation"></th>
                <th style="width:10%;" class="center" data-i18n="cl_th_total_time"></th>
                <th style="width:8%;" class="center" data-i18n="interactions"></th>
                <th style="width:5%;"></th>
              </tr>
            </thead>
            <tbody id="clTableBody"></tbody>
          </table>
        </div>
      </div>
    </section>
    <section id="page-grades" class="page">
      <div class="hero">
        <div>
          <div class="date" data-i18n="grades_label"></div>
          <h1 data-i18n="grades_title"></h1>
          <p data-i18n="grades_subtitle"></p>
        </div>
      </div>
      <div id="gradesWrap">
        <div class="gr-empty"><div class="gr-empty-icon">🎓</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 data-i18n="activities_title"></h1>
          <p data-i18n="activities_subtitle"></p>
        </div>
      </div>
      <div class="kpis" id="actKpisRow"></div>
      <div class="act-filter-row" id="actFilterRow">
        <button class="act-tab active" id="actTabAll" data-mwa-action="activity-filter" data-filter="all"   data-i18n="act_filter_all"></button>
        <button class="act-tab"       id="actTabForum" data-mwa-action="activity-filter" data-filter="forum"  data-i18n="act_filter_forum"></button>
        <button class="act-tab"       id="actTabTask" data-mwa-action="activity-filter" data-filter="tarefa" data-i18n="act_filter_task"></button>
        <button class="act-tab"       id="actTabQuiz" data-mwa-action="activity-filter" data-filter="quiz"   data-i18n="act_filter_quiz"></button>
        <button class="act-tab"       id="actTabVideo" data-mwa-action="activity-filter" data-filter="video"  data-i18n="act_filter_video"></button>
      </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 class="hero-actions"><select id="heatmapStudentSel" class="btn" style="padding:10px 14px;font-size:.82rem;"></select><select id="heatmapModSel" class="btn" style="padding:10px 14px;font-size:.82rem;"></select><select id="heatmapModeSel" class="btn" style="padding:10px 14px;font-size:.82rem;"></select></div></div><div id="heatmapKpis" class="hm-kpis"></div><div class="hm-layout"><div class="card" style="flex:1;min-width:0;"><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 class="hm-side"><div class="card"><div class="card-head">💡 <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">📊 <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">⏰ <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 data-i18n="nav_student_profile"></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-selector-select">
          <option value="" data-i18n="sp_select_student"></option>
        </select>
      </div>
      <div id="spContent">
        <div class="sp-empty">
          <div class="sp-empty-icon">👤</div>
          <p data-i18n="sp_select_hint"></p>
        </div>
      </div>
    </section>
    <section id="page-contentanalysis" class="page"><div class="hero"><div><div class="date" data-i18n="nav_content"></div><h1>🧩 <span data-i18n="ct_page_title"></span></h1><p data-i18n="ct_page_sub"></p></div></div><div id="prescriptiveContent"><div class="empty"><div style="font-size:2rem;">📖</div><p data-i18n="ct_no_data"></p></div></div></section>
    <section id="page-engagement" class="page"><div class="hero"><div><div class="date" data-i18n="nav_analysis"></div><h1>🔮 <span data-i18n="nav_engagement"></span></h1><p data-i18n="placeholder_engagement"></p></div></div><div class="kpi-row" id="evKpis"></div><div class="grid-2" style="margin-bottom:1.4rem;"><div class="card"><div class="card-head"><span data-i18n="ev_dist_title"></span></div><div class="card-body"><div style="height:200px;position:relative;"><canvas id="cEvDist"></canvas></div></div></div><div class="card"><div class="card-head"><span data-i18n="ev_score_title"></span></div><div class="card-body"><div style="height:200px;position:relative;"><canvas id="cEvScore"></canvas></div></div></div></div><div class="filter-bar"><label data-i18n="ev_filter_label"></label><button class="btn-accent" id="evBtnAll"   onclick="window.MWAEngagement&&window.MWAEngagement.filter('all')"    style="font-size:.78rem;" data-i18n="ev_all"></button><button class="btn-ghost"  id="evBtnCrit"  onclick="window.MWAEngagement&&window.MWAEngagement.filter('critico')" style="font-size:.78rem;">🔴 <span data-i18n="ev_low_part"></span></button><button class="btn-ghost"  id="evBtnMedio" onclick="window.MWAEngagement&&window.MWAEngagement.filter('medio')"  style="font-size:.78rem;">🔵 <span data-i18n="ev_med_part"></span></button><button class="btn-ghost"  id="evBtnAlta"  onclick="window.MWAEngagement&&window.MWAEngagement.filter('baixo')"  style="font-size:.78rem;">🟢 <span data-i18n="ev_high_part"></span></button><span id="evFilterLabel" style="font-size:.75rem;color:var(--muted);margin-left:.5rem;"></span><select id="evSort" onchange="window.MWAEngagement&&window.MWAEngagement.applySort()" style="margin-left:auto;"><option value="score" data-i18n="ev_sort_score"></option><option value="ago"   data-i18n="ev_sort_ago"></option><option value="alpha" data-i18n="ev_sort_alpha"></option></select></div><div id="evList"></div><div id="evModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9000;align-items:center;justify-content:center;"     onclick="if(event.target===this)this.style.display='none'"><div style="background:var(--panel);border-radius:var(--radius-xl);padding:28px;max-width:700px;width:90%;max-height:82vh;overflow-y:auto;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.25);"><button onclick="document.getElementById('evModal').style.display='none'" title="{{#str}}act_modal_close, block_mwa_dashboard{{/str}}" aria-label="{{#str}}act_modal_close, block_mwa_dashboard{{/str}}" style="position:absolute;top:14px;right:14px;background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--muted);"><span aria-hidden="true">{{#str}}close_icon, block_mwa_dashboard{{/str}}</span></button><div style="font-size:1.1rem;font-weight:900;margin-bottom:4px;"><span data-i18n="ev_ai_class_title"></span></div><div style="font-size:.8rem;color:var(--muted);margin-bottom:20px;" data-i18n="ev_modal_sub"></div><div id="evModalBody"></div></div></div></section>
    <section id="page-personalised" class="page"><div class="hero"><div><div class="date" data-i18n="nav_analysis"></div><h1>🎯 <span data-i18n="pl_page_title"></span></h1><p data-i18n="pl_page_sub"></p></div></div><div class="pl-kpi-row" id="plKpis"></div><div class="pl-filter-row"><label style="font-size:.8rem;color:var(--muted);" data-i18n="ev_filter_label"></label><button class="btn-accent" id="plBtnAll"   data-pl-filter="all"     style="font-size:.76rem;" data-i18n="ev_all"></button><button class="btn-ghost"  id="plBtnCrit"  data-pl-filter="critico" style="font-size:.76rem;">🔴 <span data-i18n="pl_low_part"></span></button><button class="btn-ghost"  id="plBtnMedio" data-pl-filter="medio"   style="font-size:.76rem;">🔵 <span data-i18n="pl_med_part"></span></button><button class="btn-ghost"  id="plBtnAlto"  data-pl-filter="alto"    style="font-size:.76rem;">🟢 <span data-i18n="pl_high_part"></span></button><span id="plFilterLabel" style="font-size:.74rem;color:var(--muted);"></span><div style="margin-left:auto;display:flex;gap:.5rem;align-items:center;"><span id="plGenProgress" class="pl-progress"></span></div></div><div class="grid-2" style="margin-bottom:1.4rem;" id="plOverview"></div><div class="pl-student-grid" id="plStudentGrid"></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;">＋ <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;">✦</div><div><div style="font-size:.85rem;font-weight:700;" id="chatConvTitle" data-i18n="chat_assistant_name"></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">⬆</button></div></div></div></section>
    

    <section id="page-interventions" class="page">
      <div class="hero">
        <div>
          <div class="date">💬</div>
          <h1 data-i18n="int_page_title"></h1>
          <p data-i18n="int_page_subtitle"></p>
        </div>
        <div style="display:flex;align-items:center;gap:10px;flex-shrink:0;">
          <select id="intStudentSel" style="background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:9px 14px;font-family:inherit;font-size:.82rem;color:var(--text);min-width:200px;outline:none;">
            <option value="">{{#str}}msg_select_student, block_mwa_dashboard{{/str}}</option>
          </select>
          <button data-mwa-action="send-selected-intervention" style="background:linear-gradient(135deg,var(--blue2),var(--blue));color:#fff;border:none;border-radius:12px;padding:10px 18px;font-family:inherit;font-size:.84rem;font-weight:900;cursor:pointer;box-shadow:0 4px 14px rgba(91,155,213,.3);">
            ✉️ {{#str}}msg_new_message, block_mwa_dashboard{{/str}}
          </button>
        </div>
      </div>
      <div id="interventionsWrap">
        <div class="gr-empty"><div class="gr-empty-icon">💬</div><p data-i18n="int_no_data"></p></div>
      </div>
    </section>
  </main></div>
</div>
</div>
