{{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"></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">
            <thead>
                <tr>
                    <th class="w-16"></th>
                    <th>Relay</th>
                    <th>Capabilities</th>
                    <th>Hold Status</th>
                    <th class="text-right">Actions</th>
                </tr>
            </thead>
            <tbody id="relay-tbody">
                {{range .Relays}}
                <tr hx-get="/admin/api/relay/status?url={{.URL}}&name={{.Name}}"
                    hx-trigger="load"
                    hx-swap="outerHTML">
                    <td>
                        <span class="loading loading-spinner loading-xs"></span>
                    </td>
                    <td>
                        <div>
                            <strong>{{.Name}}</strong><br>
                            <code class="text-xs text-base-content/50 font-mono">{{.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}}