{#
Phase 4 Polish: Dark Mode Toggle, Toasts, Skeleton Loaders
Snippets for:
- Dark mode toggle button (include in navbar)
- Toast notification templates
- Skeleton loader rows for table placeholders
- Print-aware layout
#}
{# === DARK MODE TOGGLE ===
Include this in base.html navbar (far right, before utility dropdown)
Requires: Alpine.js, phase4.js, phase4.css
#}
{# === TOAST NOTIFICATION CONTAINER ===
Include this once at the end of base.html
Toasts appear in the top-right and auto-dismiss after 4s
#}
{# Toasts are injected here dynamically #}
{# === TOAST TEMPLATE ===
Use this to generate individual toast HTML.
Data attributes: message (string), type ('success'|'info'|'warning'|'error')
#}
{# === SKELETON LOADER ROW ===
For table placeholders during slow loads.
Use with hx-swap="innerHTML swap:500ms" so real rows replace after 500ms.
#}
{% for i in range(3) %}
{% endfor %}
{# === PRINT-AWARE FILTER SUMMARY ===
Display active filters as plain text for print (hides in screen view).
Render after filter chips in transactions.html
#}
Filters applied:
{% if chips %}
{% for chip in chips %}{{ chip.label }}{% if not loop.last %}, {% endif %}{% endfor %}
{% else %}
None
{% endif %}
Report generated {{ now.strftime('%Y-%m-%d %H:%M') }}