{{define "partials/top_users.html"}}
{{if .Users}}
<div class="overflow-x-auto">
    <table class="table table-zebra table-sm table-fixed">
        <caption class="sr-only">Top users by storage</caption>
        <colgroup>
            <col style="width: 55%">
            <col style="width: 25%">
            <col style="width: 20%">
        </colgroup>
        <thead>
            <tr>
                <th scope="col">Member</th>
                <th scope="col">Usage</th>
                <th scope="col">Blobs</th>
            </tr>
        </thead>
        <tbody>
            {{range .Users}}
            <tr>
                <td>
                    <div class="flex flex-col gap-0.5">
                        {{if .Handle}}<strong class="text-base-content truncate max-w-full" title="{{.Handle}}">{{.Handle}}</strong>{{end}}
                        <code class="text-xs text-base-content/50 font-mono truncate max-w-[20ch] block" title="{{.DID}}">{{.DID}}</code>
                    </div>
                </td>
                <td>{{.UsageHuman}}</td>
                <td>{{.BlobCount}}</td>
            </tr>
            {{end}}
        </tbody>
    </table>
</div>
{{else}}
<p class="text-center py-6 text-base-content/60">No usage data yet.</p>
{{end}}
{{end}}