{{define "partials/tab_relays.html"}}
<div class="flex justify-between items-center min-h-12 mb-6">
    <h1 class="text-2xl font-bold">Relays</h1>
    <button class="btn btn-primary gap-2"
            hx-post="/admin/relays/crawl-all"
            hx-target="#relay-tbody"
            hx-swap="innerHTML"
            hx-indicator="#crawl-loading">
        {{ icon "refresh-ccw" "size-4" }}
        Request Crawl All
    </button>
</div>

<div id="crawl-loading" class="htmx-indicator mb-4">
    <div class="flex items-center gap-3 p-4 bg-base-200 rounded-lg">
        <span class="loading loading-spinner loading-md text-primary" aria-hidden="true"></span>
        <div>
            <p class="font-medium">Requesting crawl from all relays...</p>
            <p class="text-sm text-base-content/50">This may take a few seconds.</p>
        </div>
    </div>
</div>

<div class="card bg-base-100 shadow-sm">
    <div class="overflow-x-auto">
        <table class="table table-fixed">
            <caption class="sr-only">Relay status</caption>
            <colgroup>
                <col style="width: 10%">
                <col style="width: 25%">
                <col style="width: 30%">
                <col style="width: 25%">
                <col style="width: 10%">
            </colgroup>
            <thead>
                <tr>
                    <th scope="col" class="w-16"><span class="sr-only">Status</span></th>
                    <th scope="col">Relay</th>
                    <th scope="col">Capabilities</th>
                    <th scope="col">Hold Status</th>
                    <th scope="col" class="text-right">Actions</th>
                </tr>
            </thead>
            <tbody id="relay-tbody" aria-live="polite">
                {{range .Relays}}
                <tr hx-get="/admin/api/relay/status?url={{.URL | urlquery}}&name={{.Name | urlquery}}"
                    hx-trigger="load"
                    hx-swap="outerHTML"
                    aria-busy="true">
                    <td>
                        <span class="loading loading-spinner loading-xs" aria-hidden="true"></span>
                    </td>
                    <td>
                        <div class="flex flex-col gap-0.5">
                            <strong class="truncate max-w-[20ch]" title="{{.Name}}">{{.Name}}</strong>
                            <code class="text-xs text-base-content/50 font-mono truncate max-w-[24ch]" title="{{.URL}}">{{.URL}}</code>
                        </div>
                    </td>
                    <td class="text-base-content/30 text-sm">...</td>
                    <td class="text-base-content/30 text-sm">...</td>
                    <td></td>
                </tr>
                {{end}}
            </tbody>
        </table>
    </div>
</div>
{{end}}