{{!
    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/student_profile
    @copyright 2026 Bruno Porto
    @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
}}
<div class="sp-header-card">
  <div class="sp-avatar{{#haspicture}} has-img{{/haspicture}}" style="background:{{avatarcolor}};">
    {{#haspicture}}<img src="{{pictureurl}}" alt="{{name}}" loading="lazy">{{/haspicture}}
    {{^haspicture}}{{initials}}{{/haspicture}}
  </div>
  <div class="sp-header-info">
    <h2 class="sp-header-name">{{name}}</h2>
    <div class="sp-header-email">{{email}}</div>
    <div class="sp-header-tags">
      <span class="sp-tag">&#128197; {{firstdate}} - {{lastdate}}</span>
      <span class="sp-tag">&#128161; {{totalinteractions}} {{interactionslabel}}</span>
    </div>
  </div>
  <div class="sp-header-actions">
    <button class="sp-btn-report" data-sname="{{name}}" onclick="window.MWATeacherFeedback&&window.MWATeacherFeedback.openIndividualReport(this.getAttribute('data-sname'))"><svg class="mwa-ui-icon" aria-hidden="true"><use href="#mwa-icon-chart"></use></svg> {{#str}}tf_ir_open, block_mwa_dashboard{{/str}}</button>
    <button class="sp-btn-email" data-sname="{{name}}" data-semail="{{rawemail}}" onclick="window.MWAInterventions&&window.MWAInterventions.openByEl(this)">&#9993; {{#str}}sp_btn_message, block_mwa_dashboard{{/str}}</button>
  </div>
</div>
<div class="sp-kpi-row">
  <div class="sp-kpi">
    <div class="sp-kpi-label">{{lastaccesslabel}}<span class="mwa-help-tip" tabindex="0" role="img" aria-label="{{#str}}sp_tip_last_access, block_mwa_dashboard{{/str}}" title="{{#str}}sp_tip_last_access, block_mwa_dashboard{{/str}}" data-tooltip="{{#str}}sp_tip_last_access, block_mwa_dashboard{{/str}}">?</span></div>
    <div class="sp-kpi-val" style="color:{{agocolor}};">{{ago}}{{agosuffix}}</div>
    <div class="sp-kpi-sub">{{lastdate}}</div>
  </div>
  <div class="sp-kpi">
    <div class="sp-kpi-label">{{activedayslabel}}<span class="mwa-help-tip" tabindex="0" role="img" aria-label="{{#str}}sp_tip_active_days, block_mwa_dashboard{{/str}}" title="{{#str}}sp_tip_active_days, block_mwa_dashboard{{/str}}" data-tooltip="{{#str}}sp_tip_active_days, block_mwa_dashboard{{/str}}">?</span></div>
    <div class="sp-kpi-val" style="color:var(--teal);">{{uniquedays}}</div>
    <div class="sp-kpi-sub">{{total}} {{interactionslabel}}</div>
  </div>
  <div class="sp-kpi">
    <div class="sp-kpi-label">{{gradelabel}}<span class="mwa-help-tip" tabindex="0" role="img" aria-label="{{#str}}sp_tip_grade, block_mwa_dashboard{{/str}}" title="{{#str}}sp_tip_grade, block_mwa_dashboard{{/str}}" data-tooltip="{{#str}}sp_tip_grade, block_mwa_dashboard{{/str}}">?</span></div>
    <div class="sp-kpi-val" style="color:{{gradecolor}};">{{gradevalue}}</div>
    <div class="sp-kpi-sub">{{gradesub}}</div>
  </div>
  <div class="sp-kpi">
    <div class="sp-kpi-label">{{engagementkpilabel}}<span class="mwa-help-tip" tabindex="0" role="img" aria-label="{{#str}}sp_tip_engagement, block_mwa_dashboard{{/str}}" title="{{#str}}sp_tip_engagement, block_mwa_dashboard{{/str}}" data-tooltip="{{#str}}sp_tip_engagement, block_mwa_dashboard{{/str}}">?</span></div>
    <div class="sp-kpi-val" style="color:{{engcolor}};font-size:1.1rem;">{{englabel}}</div>
    <div class="sp-kpi-sub">{{#str}}sp_score_format, block_mwa_dashboard, {{score}}{{/str}}</div>
  </div>
</div>
<div class="sp-progress-row">
  <div class="sp-progress-card">
    <h3>{{activityprogresslabel}}</h3>
    {{{activityprogresshtml}}}
  </div>
  <div class="sp-progress-card">
    <h3>{{resourceprogresslabel}}</h3>
    {{{resourceprogresshtml}}}
  </div>
</div>
<div class="sp-section">
  <div class="sp-section-head">
    &#128202; {{activity7d}}<span class="mwa-help-tip" tabindex="0" role="img" aria-label="{{#str}}sp_tip_activity_7d, block_mwa_dashboard{{/str}}" title="{{#str}}sp_tip_activity_7d, block_mwa_dashboard{{/str}}" data-tooltip="{{#str}}sp_tip_activity_7d, block_mwa_dashboard{{/str}}">?</span>
    <div class="sp-section-right">{{{trendhtml}}}</div>
  </div>
  <div class="sp-section-body">
    {{^hasweekdata}}
      <div class="sp-card-empty">{{nodatalabel}}</div>
    {{/hasweekdata}}
    {{#hasweekdata}}
    <div class="sp-sparkline-wrap">
      <svg width="70" height="36" viewBox="0 0 70 36" style="display:block;">{{{sparksvg}}}</svg>
      <span style="font-size:.78rem;color:var(--muted);padding-bottom:2px;">{{weekinteractions}} {{weeklabel}}</span>
    </div>
    {{/hasweekdata}}
  </div>
</div>
<div class="sp-section">
  <div class="sp-section-head">&#128197; {{#str}}sp_timeline_label, block_mwa_dashboard{{/str}}<span class="mwa-help-tip" tabindex="0" role="img" aria-label="{{#str}}sp_tip_timeline, block_mwa_dashboard{{/str}}" title="{{#str}}sp_tip_timeline, block_mwa_dashboard{{/str}}" data-tooltip="{{#str}}sp_tip_timeline, block_mwa_dashboard{{/str}}">?</span></div>
  <div class="sp-section-body"><div id="spTimeline_{{calendarid}}"><div class="sp-card-empty">{{nodatalabel}}</div></div></div>
</div>
<div class="sp-section">
  <div class="sp-section-head">&#128200; {{dailyjourney}}<span class="mwa-help-tip" tabindex="0" role="img" aria-label="{{#str}}sp_tip_daily_journey, block_mwa_dashboard{{/str}}" title="{{#str}}sp_tip_daily_journey, block_mwa_dashboard{{/str}}" data-tooltip="{{#str}}sp_tip_daily_journey, block_mwa_dashboard{{/str}}">?</span></div>
  <div class="sp-section-body">
    {{^hasdailydata}}<div class="sp-card-empty">{{nodatalabel}}</div>{{/hasdailydata}}
    {{#hasdailydata}}<div style="height:180px;"><canvas id="spDailyChart"></canvas></div>{{/hasdailydata}}
  </div>
</div>
<div class="sp-section" style="margin-top:18px;">
  <div class="sp-section-head">&#128197; {{activitycalendar}}<span class="mwa-help-tip" tabindex="0" role="img" aria-label="{{#str}}sp_tip_activity_calendar, block_mwa_dashboard{{/str}}" title="{{#str}}sp_tip_activity_calendar, block_mwa_dashboard{{/str}}" data-tooltip="{{#str}}sp_tip_activity_calendar, block_mwa_dashboard{{/str}}">?</span></div>
  <div class="sp-section-body"><div id="{{calendarid}}"><div class="sp-card-empty">{{nodatalabel}}</div></div></div>
</div>
