{{template "head" "Services"}}
{{template "nav" "services"}}

<h2 class="section-title">Internal Services</h2>

<style>
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-bottom:2rem}
.svc-card{padding:1rem 1.25rem;border:1px solid var(--border);border-radius:8px;background:var(--surface);display:flex;align-items:center;gap:1rem;transition:border-color .2s}
.svc-card:hover{border-color:var(--accent-dim)}
.svc-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.svc-dot.ok{background:var(--green)}
.svc-dot.degraded{background:var(--yellow)}
.svc-dot.unavailable{background:var(--red)}
.svc-dot.unchecked{background:var(--muted)}
.svc-info{flex:1;min-width:0}
.svc-name{font-weight:600;font-size:.875rem}
.svc-name a{color:var(--text)}
.svc-name a:hover{color:var(--accent)}
.svc-meta{font-size:.75rem;color:var(--muted)}
.svc-cat-title{font-size:.875rem;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem;padding-bottom:.375rem;border-bottom:1px solid var(--border)}
.svc-section{margin-bottom:1.5rem}
.svc-summary{display:flex;gap:1.5rem;margin-bottom:1.5rem;flex-wrap:wrap}
.svc-stat{font-size:.8125rem;color:var(--muted)}
.svc-stat strong{font-size:1.25rem;color:var(--text);display:block}
</style>

{{$services := .Services}}

<div class="svc-summary">
  <div class="svc-stat">
    <strong>{{len $services}}</strong>
    Total Services
  </div>
  <div class="svc-stat">
    <strong style="color:var(--green)">{{countStatus $services "ok"}}</strong>
    Online
  </div>
  <div class="svc-stat">
    <strong style="color:var(--yellow)">{{countStatus $services "degraded"}}</strong>
    Degraded
  </div>
  <div class="svc-stat">
    <strong style="color:var(--red)">{{countStatus $services "unavailable"}}</strong>
    Offline
  </div>
</div>

{{range categories $services}}
<div class="svc-section">
  <div class="svc-cat-title">{{.}}</div>
  <div class="svc-grid">
    {{range filterCat $services .}}
    <div class="svc-card">
      <div class="svc-dot {{.Status}}"></div>
      <div class="svc-info">
        <div class="svc-name"><a href="{{.URL}}" target="_blank">{{.Name}}</a></div>
        <div class="svc-meta">{{.Machine}} &middot; {{.URL}}</div>
      </div>
    </div>
    {{end}}
  </div>
</div>
{{end}}

{{template "footer"}}