{{define "dhcp.html"}}
{{template "base" .}}
{{end}}

{{define "content"}}
{{if .Error}}
<div class="alert alert-error">{{.Error}}</div>
{{end}}

{{if .DHCP}}
<section class="info-card">
  <h2>DHCP Server</h2>
  <table class="info-table">
    <tr>
      <th>Status</th>
      <td>
        <span class="status-dot {{if .DHCP.Enabled}}status-up{{else}}status-down{{end}}"></span>
        {{if .DHCP.Enabled}}Enabled{{else}}Disabled{{end}}
      </td>
    </tr>
  </table>

  <div class="stats-row">
    <span class="zone-badge"><span class="zone-badge-label">Discovers</span><span class="zone-badge-value">{{.DHCP.Stats.InDiscoveries}}</span></span>
    <span class="zone-badge"><span class="zone-badge-label">Requests</span><span class="zone-badge-value">{{.DHCP.Stats.InRequests}}</span></span>
    <span class="zone-badge"><span class="zone-badge-label">Releases</span><span class="zone-badge-value">{{.DHCP.Stats.InReleases}}</span></span>
    <span class="zone-badge"><span class="zone-badge-label">Offers</span><span class="zone-badge-value">{{.DHCP.Stats.OutOffers}}</span></span>
    <span class="zone-badge"><span class="zone-badge-label">Acks</span><span class="zone-badge-value">{{.DHCP.Stats.OutAcks}}</span></span>
    <span class="zone-badge"><span class="zone-badge-label">Naks</span><span class="zone-badge-value">{{.DHCP.Stats.OutNaks}}</span></span>
  </div>

  {{if .DHCP.Leases}}
  <h3 class="section-subtitle">Active Leases</h3>
  <div class="data-table-wrap">
    <table class="data-table">
      <thead>
        <tr>
          <th>IP Address</th>
          <th>MAC Address</th>
          <th>Hostname</th>
          <th>Expires</th>
          <th>Client ID</th>
        </tr>
      </thead>
      <tbody>
        {{range .DHCP.Leases}}
        <tr>
          <td class="num">{{.Address}}</td>
          <td class="num">{{.MAC}}</td>
          <td>{{if .Hostname}}{{.Hostname}}{{else}}<span class="text-muted">—</span>{{end}}</td>
          <td>{{.Expires}}</td>
          <td>{{if .ClientID}}{{.ClientID}}{{else}}<span class="text-muted">—</span>{{end}}</td>
        </tr>
        {{end}}
      </tbody>
    </table>
  </div>
  {{else}}
  <p class="text-muted">No active leases.</p>
  {{end}}
</section>
{{else if not .Error}}
<section class="info-card">
  <p class="text-muted">DHCP server data not available.</p>
</section>
{{end}}
{{end}}