{{define "hx_monitoring_group"}}
<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">{{.Group.Title}}</h2>
    <button hx-get="/hx/monitoring/group?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 .Group.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 .Group.Errors}}
            <li>{{.}}</li>
            {{end}}
          </ul>
        </p>
      </div>
    </div>
  </div>
  {{end}}

  <div class="space-y-3">
    {{range .Group.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>
{{end}}