battery-tracker-app/templates/home.html

{% extends "base.html" %}
{% block title %}Home — Battery Tracker{% endblock %}

{% block content %}
<h1>Battery Tracker</h1>

<h2 style="font-size:1rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;margin:0 0 0.6rem;">Batteries</h2>
<div style="display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem;">
  <a class="stat-link" href="{{ url_for('battery_list') }}?status=">
    <div class="card" style="text-align:center;">
      <div style="font-size:1.8rem;font-weight:700;">{{ total_batteries }}</div>
      <div class="text-muted">Total</div>
    </div>
  </a>
  <a class="stat-link" href="{{ url_for('battery_list') }}?status=available">
    <div class="card" style="text-align:center;">
      <div style="font-size:1.8rem;font-weight:700;color:var(--count-available);">{{ avail_count }}</div>
      <div class="text-muted">Available</div>
    </div>
  </a>
  <a class="stat-link" href="{{ url_for('battery_list') }}?status=installed">
    <div class="card" style="text-align:center;">
      <div style="font-size:1.8rem;font-weight:700;color:var(--count-installed);">{{ installed_count }}</div>
      <div class="text-muted">Installed</div>
    </div>
  </a>
  <a class="stat-link" href="{{ url_for('battery_list') }}?status=retired">
    <div class="card" style="text-align:center;">
      <div style="font-size:1.8rem;font-weight:700;color:var(--count-retired);">{{ retired_count }}</div>
      <div class="text-muted">Retired</div>
    </div>
  </a>
  {% if ha_enabled and needs_attention.low_pct %}
  <a href="#needs-attention"
     onclick="var d=document.getElementById('needs-attention');d.open=true;"
     style="flex:1;min-width:120px;text-decoration:none;">
    <div class="card" style="text-align:center;border:2px solid #f59e0b;cursor:pointer;">
      <div style="font-size:1.8rem;font-weight:700;color:#f59e0b;">{{ needs_attention.low_pct|length }}</div>
      <div class="text-muted">Low Battery</div>
    </div>
  </a>
  {% endif %}
</div>

<h2 style="font-size:1rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;margin:0 0 0.6rem;">Devices</h2>
<div style="display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem;">
  <a class="stat-link" href="{{ url_for('device_list') }}">
    <div class="card" style="text-align:center;">
      <div style="font-size:1.8rem;font-weight:700;">{{ total_devices }}</div>
      <div class="text-muted">Total</div>
    </div>
  </a>
  <a class="stat-link" href="{{ url_for('device_list') }}?fill=full">
    <div class="card" style="text-align:center;">
      <div style="font-size:1.8rem;font-weight:700;color:var(--count-installed);">{{ full_devices }}</div>
      <div class="text-muted">Full</div>
    </div>
  </a>
  <a class="stat-link" href="{{ url_for('device_list') }}?fill=partial">
    <div class="card" style="text-align:center;">
      <div style="font-size:1.8rem;font-weight:700;color:var(--count-available);">{{ partial_devices }}</div>
      <div class="text-muted">Partial</div>
    </div>
  </a>
  <a class="stat-link" href="{{ url_for('device_list') }}?fill=empty">
    <div class="card" style="text-align:center;{% if empty_devices > 0 %}border:2px solid #f59e0b;{% endif %}">
      <div style="font-size:1.8rem;font-weight:700;{% if empty_devices > 0 %}color:#f59e0b;{% else %}color:var(--count-retired);{% endif %}">{{ empty_devices }}</div>
      <div class="text-muted">Empty</div>
    </div>
  </a>
</div>

{% if total_charges %}
<div style="display:flex;gap:0.75rem;flex-wrap:wrap;margin-bottom:1rem;">
  <span class="badge" style="font-size:0.875rem;padding:0.35rem 0.75rem;">Charged <strong>{{ total_charges }}</strong>&times; total</span>
  <span class="badge" style="font-size:0.875rem;padding:0.35rem 0.75rem;"><strong>{{ charges_last_year }}</strong>&times; in last year</span>
</div>
{% endif %}

{% set na_low_cap = needs_attention.low_capacity %}
{% set na_low_pct = needs_attention.low_pct %}
{% if na_low_cap or na_low_pct %}
<details id="needs-attention" class="card" style="margin-bottom:1rem;">
  <summary style="cursor:pointer;font-weight:600;color:var(--text-warning);list-style:none;display:flex;align-items:center;gap:0.5rem;">
    <span>&#9888;</span>
    <span>Needs Attention &nbsp;<span class="badge badge-warning">{{ (na_low_cap|length) + (na_low_pct|length) }}</span></span>
  </summary>
  <div style="margin-top:0.75rem;display:flex;flex-wrap:wrap;gap:1.5rem;">
    {% if na_low_cap %}
    <div>
      <div style="font-size:0.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:0.4rem;">Low Capacity (&lt;80%)</div>
      {% for b in na_low_cap %}
      <div style="font-size:0.875rem;margin-bottom:0.25rem;">
        <a href="{{ url_for('battery_detail', battery_id=b.id) }}">{{ b.label }}</a>
        <span class="text-muted">— {{ (b.tested_capacity_mah / b.capacity_mah * 100)|int }}% of rated</span>
      </div>
      {% endfor %}
    </div>
    {% endif %}
    {% if na_low_pct %}
    <div>
      <div style="font-size:0.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:0.4rem;">Low Battery %</div>
      {% for b in na_low_pct %}
      <div style="font-size:0.875rem;margin-bottom:0.25rem;">
        <a href="{{ url_for('battery_detail', battery_id=b.id) }}">{{ b.label }}</a>
        <span class="text-muted">— {{ b.battery_percentage }}%</span>
      </div>
      {% endfor %}
    </div>
    {% endif %}
  </div>
</details>
{% endif %}

<div style="display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-top:0.5rem;max-width:480px;">
  <a class="btn btn-primary" style="text-align:center;" href="{{ url_for('battery_add') }}">+ Add Battery</a>
  <a class="btn btn-secondary" style="text-align:center;" href="{{ url_for('battery_list') }}">View All Batteries</a>
  <a class="btn btn-primary" style="text-align:center;" href="{{ url_for('device_add') }}">+ Add Device</a>
  <a class="btn btn-secondary" style="text-align:center;" href="{{ url_for('device_list') }}">View All Devices</a>
  <a class="btn btn-secondary" style="text-align:center;" href="{{ url_for('export_page') }}">Export Data</a>
  <a class="btn btn-secondary" style="text-align:center;" href="{{ url_for('import_page') }}">Import Data</a>
</div>

{% endblock %}