{{define "hx_monitoring"}}
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
  {{range .Groups}}
  <div class="bg-white rounded-lg shadow-md p-6">
    <div class="flex justify-between items-center mb-4">
      <h2 class="text-xl font-semibold">{{.Title}}</h2>
      <button hx-get="/hx/monitoring/group?group={{.Title}}" 
              hx-target="closest .bg-white" 
              hx-swap="outerHTML"
              class="text-blue-600 hover:text-blue-800 text-sm">
        🔄 Refresh
      </button>
    </div>
    
    {{if .Errors}}
    <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-4">
      <div class="flex">
        <div class="ml-3">
          <p class="text-sm text-yellow-700">
            <strong>Warnings:</strong>
            <ul class="list-disc list-inside mt-1">
              {{range .Errors}}
              <li>{{.}}</li>
              {{end}}
            </ul>
          </p>
        </div>
      </div>
    </div>
    {{end}}

    <div class="space-y-3">
      {{range .Metrics}}
      <div class="flex justify-between items-center p-3 {{if eq .Status "error"}}bg-red-50{{else if eq .Status "warning"}}bg-yellow-50{{else}}bg-gray-50{{end}} rounded">
        <div class="flex-1">
          <div class="font-medium text-sm">{{.Name}}</div>
          <div class="text-xs text-gray-500 mt-1">{{.Timestamp.Format "15:04:05"}}</div>
        </div>
        <div class="flex items-center space-x-2">
          <span class="text-lg font-semibold">{{.Value}}</span>
          {{if eq .Status "error"}}
            <span class="text-red-600">⚠️</span>
          {{else if eq .Status "warning"}}
            <span class="text-yellow-600">⚡</span>
          {{else}}
            <span class="text-green-600">✓</span>
          {{end}}
        </div>
      </div>
      {{else}}
      <div class="text-center text-gray-500 py-4">No metrics available</div>
      {{end}}
    </div>
  </div>
  {{else}}
  <div class="col-span-2 bg-yellow-50 border-l-4 border-yellow-400 p-4">
    <div class="flex">
      <div class="ml-3">
        <p class="text-sm text-yellow-700">
          <strong>Warning:</strong> No monitoring data available. Some collectors may have failed.
        </p>
      </div>
    </div>
  </div>
  {{end}}
</div>
{{end}}