{# plugins/ups/templates/ups/widget.html #}
{% if not latest %}
<p style="color:var(--text-muted);font-size:0.85rem;">No UPS data yet.</p>
{% else %}

{# On-battery alert #}
{% if latest.on_battery %}
<div style="background:var(--red-dim);border:1px solid var(--red);border-radius:5px;padding:0.5rem 0.75rem;margin-bottom:0.75rem;display:flex;align-items:center;justify-content:space-between;gap:0.5rem;">
  <span style="color:var(--red);font-weight:600;font-size:0.85rem;">
    &#9888; On Battery
    {% if on_battery_since %}
    — {{ ((latest.scraped_at - on_battery_since).total_seconds() / 60) | int }}m
    {% endif %}
  </span>
  {% if shutdown_triggered %}
  <span style="color:var(--red);font-size:0.78rem;font-weight:600;">Shutdown triggered</span>
  {% elif latest.low_battery %}
  <span style="color:var(--red);font-size:0.78rem;">Low battery</span>
  {% endif %}
</div>
{% endif %}

<div style="display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;font-size:0.83rem;margin-bottom:0.5rem;">
  <div>
    <div style="color:var(--text-muted);font-size:0.75rem;">Status</div>
    <div style="font-weight:600;">
      <span style="padding:0.15rem 0.5rem;border-radius:4px;font-size:0.8rem;
        {% if latest.on_battery %}background:var(--red-dim);color:var(--red);
        {% else %}background:var(--green-dim);color:var(--green);{% endif %}">
        {% if latest.on_battery %}Battery{% else %}Online{% endif %}
      </span>
    </div>
  </div>
  {% if latest.battery_runtime_secs is not none %}
  <div>
    <div style="color:var(--text-muted);font-size:0.75rem;">Runtime</div>
    <div style="font-weight:600;">
      {% set mins = latest.battery_runtime_secs // 60 %}
      {% if mins >= 60 %}{{ mins // 60 }}h {{ mins % 60 }}m
      {% else %}{{ mins }}m{% endif %}
    </div>
  </div>
  {% endif %}
  {% if latest.load_pct is not none %}
  <div>
    <div style="color:var(--text-muted);font-size:0.75rem;">Load</div>
    <div style="font-weight:600;color:
      {% if latest.load_pct >= 80 %}var(--red)
      {% elif latest.load_pct >= 60 %}var(--yellow)
      {% else %}var(--text){% endif %};">
      {{ "%.0f"|format(latest.load_pct) }}%
    </div>
  </div>
  {% endif %}
  {% if latest.input_voltage is not none %}
  <div>
    <div style="color:var(--text-muted);font-size:0.75rem;">Input V</div>
    <div>{{ "%.0f"|format(latest.input_voltage) }}V</div>
  </div>
  {% endif %}
</div>

{# Battery charge bar #}
{% if latest.battery_charge_pct is not none %}
<div>
  <div style="display:flex;justify-content:space-between;font-size:0.75rem;margin-bottom:0.2rem;">
    <span style="color:var(--text-muted);">Battery</span>
    <span style="font-weight:600;color:
      {% if latest.battery_charge_pct >= 80 %}var(--green)
      {% elif latest.battery_charge_pct >= 40 %}var(--yellow)
      {% else %}var(--red){% endif %};">
      {{ "%.0f"|format(latest.battery_charge_pct) }}%
    </span>
  </div>
  <div style="background:var(--border);border-radius:3px;height:6px;overflow:hidden;">
    <div style="height:100%;border-radius:3px;width:{{ "%.1f"|format(latest.battery_charge_pct) }}%;background:
      {% if latest.battery_charge_pct >= 80 %}var(--green)
      {% elif latest.battery_charge_pct >= 40 %}var(--yellow)
      {% else %}var(--red){% endif %};transition:width 0.3s;"></div>
  </div>
</div>
{% endif %}

<div style="margin-top:0.5rem;color:var(--text-dim);font-size:0.73rem;">
  {% if latest.manufacturer or latest.model %}
  {{ latest.manufacturer or "" }} {{ latest.model or "" }} &middot;
  {% endif %}
  {{ latest.scraped_at.strftime("%H:%M:%S") }} UTC
</div>
{% endif %}