<%
  var _percent        = locals.percent        || 0;
  var _status         = (locals.status || 'UNKNOWN').toUpperCase();
  var _runtimeMinutes = locals.runtimeMinutes || 0;
  var _size           = locals.size           || 'md';

  var barColor = _percent > 50 ? 'bg-success' : _percent > 20 ? 'bg-warning' : 'bg-error';
  var textColor = _percent > 50 ? 'text-success' : _percent > 20 ? 'text-warning' : 'text-error';

  var statusIcon = _status === 'CHARGING' ? 'fa-bolt' : _status === 'DISCHARGING' ? 'fa-battery-half' : _status === 'FULL' ? 'fa-battery-full' : 'fa-battery-quarter';
  var statusLabel = _status === 'CHARGING' ? 'Charging' : _status === 'DISCHARGING' ? 'Discharging' : _status === 'FULL' ? 'Full' : 'Unknown';

  var runtimeH = Math.floor(_runtimeMinutes / 60);
  var runtimeM = _runtimeMinutes % 60;
  var runtimeStr = runtimeH > 0 ? runtimeH + 'h ' + runtimeM + 'm' : runtimeM + 'm';

  var barH = _size === 'sm' ? 'h-1.5' : _size === 'lg' ? 'h-3' : 'h-2';
  var textSz = _size === 'lg' ? 'text-3xl' : _size === 'sm' ? 'text-sm' : 'text-xl';
%>

  

    

      <%= _percent %>%
      battery
    
    

      
      <%= statusLabel %>
    
  

  

    

  

  <% if (_runtimeMinutes > 0) { %>
  
<%= runtimeStr %> remaining
  <% } %>