{% macro donut(label, pct, subtitle) %}
{% set r = 22 %}
{% set c = 2 * 3.1415926 * r %}
{% set dash = (pct / 100.0) * c %}
<div style="border:1px solid #ddd; border-radius: 12px; padding: 12px; display:flex; gap: 12px; align-items:center;">
    <svg width="64" height="64" viewBox="0 0 64 64" aria-label="{{ label }}">
        <circle cx="32" cy="32" r="{{ r }}" fill="none" stroke="#eee" stroke-width="8" />
        <circle cx="32" cy="32" r="{{ r }}" fill="none" stroke="#111" stroke-width="8" stroke-linecap="round"
            stroke-dasharray="{{ dash }} {{ c - dash }}" transform="rotate(-90 32 32)" />
        <text x="32" y="36" text-anchor="middle" font-size="14" font-family="system-ui" fill="#111">{{ pct|round(0)
            }}%</text>
    </svg>
    <div>
        <div style="font-weight:700;">{{ label }}</div>
        <div class="muted">{{ subtitle }}</div>
    </div>
</div>
{% endmacro %}

<h2>Live usage</h2>
<div style="display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0 18px 0;">
    {{ donut("CPU (containers)", data.gauges.cpu_total_pct, "Sum of container CPU%") }}
    {{ donut("RAM (containers)", data.gauges.ram_pct, "Container RAM vs host total") }}
    {{ donut("Docker images", data.gauges.docker_images_pct, "Used vs total image store") }}
</div>

<h2>System</h2>
<div style="display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0 18px 0;">
    <div style="border:1px solid #ddd; border-radius: 10px; padding: 12px;">
        <div class="muted">Host</div>
        <div><strong>{{ data.system.name or "—" }}</strong></div>
        <div class="muted">{{ data.system.operating_system }} · {{ data.system.kernel_version }}</div>
    </div>

    <div style="border:1px solid #ddd; border-radius: 10px; padding: 12px;">
        <div class="muted">Compute</div>
        <div><strong>{{ data.system.cpus or "—" }}</strong> CPUs</div>
        <div><strong>{{ data.system.mem_total_h or "—" }}</strong> RAM</div>
    </div>

    <div style="border:1px solid #ddd; border-radius: 10px; padding: 12px;">
        <div class="muted">Docker</div>
        <div>Engine: <strong>{{ data.system.server_version or "—" }}</strong></div>
        <div>Images: <strong>{{ data.system.images or "—" }}</strong></div>
        <div>Containers: <strong>{{ data.system.containers_running or "—" }}</strong> running / <strong>{{
                data.system.containers_stopped or "—" }}</strong> stopped</div>
    </div>
</div>


<h3>Docker disk usage</h3>
<table>
    <thead>
        <tr>
            <th>Type</th>
            <th>Total</th>
            <th>Active</th>
            <th>Size</th>
            <th>Reclaimable</th>
        </tr>
    </thead>
    <tbody>
        {% for typ, r in data.system.system_df.items() %}
        <tr>
            <td><strong>{{ typ }}</strong></td>
            <td>{{ r.total }}</td>
            <td>{{ r.active }}</td>
            <td>{{ r.size }}</td>
            <td>{{ r.reclaimable }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<div class="muted">Generated at: {{ data.generated_at }}</div>

{% if data.warnings %}
<div style="margin: 10px 0; padding: 10px; border: 1px solid #f2c037; background: #fff7db; border-radius: 8px;">
    <strong>Warnings</strong>
    <ul>
        {% for w in data.warnings %}
        <li>{{ w }}</li>
        {% endfor %}
    </ul>
</div>
{% endif %}

<h2>Apps</h2>
<table>
    <thead>
        <tr>
            <th>App</th>
            <th>URL</th>
            <th>Status</th>
            <th>CPU</th>
            <th>RAM</th>
            <th>Restarts</th>
            <th>Image</th>
        </tr>
    </thead>
    <tbody>
        {% for r in data.apps %}
        <tr>
            <td><strong>{{ r.app }}</strong></td>
            <td><a href="{{ r.url }}">{{ r.url }}</a></td>
            <td class="muted">{{ r.status }}</td>
            <td>{{ r.cpu or "—" }}</td>
            <td>
                {% if r.mem_used %}
                {{ r.mem_used }} / {{ r.mem_limit }} ({{ r.mem_pct }})
                {% else %} — {% endif %}
            </td>
            <td>{{ r.restarts }}</td>
            <td class="muted">{{ r.image }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

{% if data.infra %}
<h2 style="margin-top: 24px;">Infra</h2>
<table>
    <thead>
        <tr>
            <th>Container</th>
            <th>Status</th>
            <th>CPU</th>
            <th>RAM</th>
            <th>Restarts</th>
            <th>Image</th>
        </tr>
    </thead>
    <tbody>
        {% for r in data.infra %}
        <tr>
            <td><strong>{{ r.container }}</strong></td>
            <td class="muted">{{ r.status }}</td>
            <td>{{ r.cpu or "—" }}</td>
            <td>
                {% if r.mem_used %}
                {{ r.mem_used }} / {{ r.mem_limit }} ({{ r.mem_pct }})
                {% else %} — {% endif %}
            </td>
            <td>{{ r.restarts }}</td>
            <td class="muted">{{ r.image }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endif %}