{% macro usage_bar(s) -%}
  <div class="bar" title="used {{ s.used }} · idle {{ s.idle }} · reserved {{ s.reserved }} · free {{ s.free }} / {{ s.size }}">
    <span class="used" style="width: {{ s.pct(s.used) }}%"></span>
    <span class="idle" style="width: {{ s.pct(s.idle) }}%"></span>
    <span class="reserved" style="width: {{ s.pct(s.reserved) }}%"></span>
  </div>
{%- endmacro %}
{# Import "with context": needs active_account, active_label and csrf_token. #}
{% macro no_data() -%}
  {% if active_account %}
  <form class="card no-data" method="post" action="{{ url_for('refresh') }}" data-job="refresh">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <input type="hidden" name="account_id" value="{{ active_account.id }}">
    No data yet for <b>{{ active_label }}</b> —
    <button type="submit">Refresh</button>
    <span class="muted">(read-only AWS calls; other accounts' data is never shown here)</span>
  </form>
  {% else %}
  <div class="card no-data">No AWS account yet — add one in <a href="{{ url_for('settings_page') }}">Settings</a>.</div>
  {% endif %}
{%- endmacro %}
{% macro legend() -%}
  <div class="legend">
    <span><i style="background: var(--used)"></i>used</span>
    <span><i style="background: var(--idle)"></i>idle ENI</span>
    <span><i style="background: var(--reserved)"></i>reserved (AWS)</span>
    <span><i style="background: var(--free)"></i>free</span>
  </div>
{%- endmacro %}