{{define "sync_status"}}
<div class="flex items-center gap-2">
    {{if .IsOffline}}
    <span class="flex items-center gap-1 text-red-600" title="Offline">
        <span class="w-2 h-2 bg-red-500 rounded-full"></span>
        <span class="text-xs">Offline</span>
    </span>
    {{else}}
    <span class="flex items-center gap-1 text-green-600" title="Online">
        <span class="w-2 h-2 bg-green-500 rounded-full"></span>
        <span class="text-xs">Online</span>
    </span>
    {{end}}

    {{if gt .PendingCount 0}}
    <span class="bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded-full text-xs font-medium">
        {{.PendingCount}} pending
    </span>
    <button hx-post="/api/sync/push"
            hx-swap="none"
            hx-on::after-request="
                if(event.detail.successful) {
                    const resp = JSON.parse(event.detail.xhr.response);
                    if(resp.success) {
                        showToast('Синхронизировано: ' + resp.synced + ' изменений', 'success');
                    } else {
                        showToast('Ошибка: ' + (resp.error || 'неизвестная ошибка'), 'error');
                    }
                    htmx.trigger('#sync-status', 'refresh');
                }
            "
            class="text-blue-600 hover:text-blue-800 text-xs underline cursor-pointer">
        Sync
    </button>
    {{end}}
</div>
{{end}}