{{define "content"}}
<h2 class="text-2xl font-bold mb-4">Home</h2>
<div style="display:flex; align-items:center; gap:2em; margin-bottom:2em;">
  <div style="display:flex; align-items:center; gap:0.5em;">
    <span style="font-size:2.2em; vertical-align:middle;">
      {{if eq .StatusDot "green"}}
        <span style="display:inline-block; width:1em; height:1em; background:#2ecc40; border-radius:50%;"></span>
      {{else if eq .StatusDot "yellow"}}
        <span style="display:inline-block; width:1em; height:1em; background:#ffcc00; border-radius:50%;"></span>
      {{else}}
        <span style="display:inline-block; width:1em; height:1em; background:#ff4136; border-radius:50%;"></span>
      {{end}}
    </span>
    <span style="font-size:1.2em; font-weight:bold;">Status</span>
  </div>
  <div style="font-size:1.1em;">Services: <b>{{.ServiceCount}}</b></div>
  <div style="font-size:1.1em; color:#2ecc40;">Running: <b>{{.RunningCount}}</b></div>
  <div style="font-size:1.1em; color:#ff4136;">Stopped: <b>{{.StoppedCount}}</b></div>
</div>

{{if .Services}}
<h3 style="margin-top:1.5em; margin-bottom:0.8em;">Services</h3>
<table>
  <thead>
    <tr><th>Name</th><th></th></tr>
  </thead>
  <tbody>
    {{range .Services}}
    <tr>
      <td><a href="/{{.}}" class="micro-link" style="font-weight:500;">{{.}}</a></td>
      <td style="text-align:right;">
        <a href="/api#{{.}}" class="micro-link" style="font-size:0.92em; color:#888;">API</a>
      </td>
    </tr>
    {{end}}
  </tbody>
</table>
{{else}}
<p style="color:#888; margin-top:1.5em;">No services registered yet. Start a service and it will appear here.</p>
{{end}}
{{end}}