{% extends "tesm_core/base.html" %}
{% from "tesm_core/macros.html" import field, checkbox, pill, empty_state, alert, search_box %}

{% block page_title %}DHCP-Server{% endblock %}
{% block page_sub %}
  Kea · {{ subnets | length }} Subnetze · {{ reservations | length }} Reservierungen
{% endblock %}

{% block content %}
{# Der wichtigste Satz der Seite, wenn er zutrifft: was hier steht, ist nicht,
   womit der Dienst arbeitet. Lehnt Kea eine Datei ab, bleibt der alte Stand
   aktiv -- die Oberflaeche zeigte bisher trotzdem den neuen Wert, und man
   sucht den Fehler beim Client. #}
{% if konfig_stand == 'abweichend' %}
  <div class="alert alert--danger">
    {{ icon('alert', size=18) }}
    <div class="alert__body flex-1">
      <div class="alert__title">Der Dienst arbeitet nicht mit dieser Konfiguration</div>
      Auf der Platte liegt ein anderer Stand als der hier gezeigte &ndash; entweder wurde
      die Datei zuletzt abgelehnt oder seither nichts geschrieben. Änderungen an Optionen
      und Reservierungen sind gespeichert, aber <strong>nicht wirksam</strong>.
      {% if current_user.has('dhcp_config.execute') %}
        <form method="post" action="{{ url_for('dhcp.write_config') }}" class="mt-2" data-no-guard>
          <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
          <button class="btn btn--sm btn--primary" type="submit" data-busy-label="Schreibt ...">
            Jetzt schreiben und Fehler anzeigen
          </button>
        </form>
      {% endif %}
    </div>
  </div>
{% endif %}
{% for warning in warnings %}{{ alert(warning, 'warning') }}{% endfor %}
{% if not sysops_available %}
  {{ alert('Systemhelfer nicht verfügbar -- Konfiguration und Dienstzustand können hier nur
  angezeigt, nicht geschrieben werden.', 'warning') }}
{% endif %}

<div class="grid grid--4">
  <div class="stat {{ 'stat--ok' if service.get('active') == 'active' else 'stat--warning' }}">
    <span class="stat__label">Dienst</span>
    <span class="stat__value fs-lg">{{ service.get('active', 'unbekannt') }}</span>
    <span class="stat__hint">Autostart: {{ service.get('enabled', '?') }}</span>
  </div>
  <div class="stat">
    <span class="stat__label">Programm</span>
    {# Die Fassung statt nur "vorhanden": zwischen Kea 2.4 (Ubuntu 24.04) und
       3.0 (26.04) liegen Aenderungen, und wer eine Konfiguration beurteilt,
       will wissen, wogegen. #}
    <span class="stat__value fs-lg">{{ service.get('version') or service.get('binary', '?') }}</span>
    <span class="stat__hint">
      kea-dhcp4{% if service.get('version') %} &middot; {{ service.get('binary', '?') }}{% endif %}
    </span>
  </div>
  <div class="stat">
    <span class="stat__label">Reservierungen</span>
    <span class="stat__value">{{ reservations | length }}</span>
    <span class="stat__hint">automatisch + manuell</span>
  </div>
  <div class="stat">
    <span class="stat__label">Leases</span>
    <span class="stat__value">{{ leases | rejectattr('is_expired') | list | length }}</span>
    <span class="stat__hint">
      gültig{% if leases | selectattr('is_expired') | list %},
      {{ leases | selectattr('is_expired') | list | length }} abgelaufen{% endif %}
    </span>
  </div>
</div>

{# Dienst und Grundeinstellungen sind beides Kleinkram, den man selten
   anfasst -- nebeneinander statt untereinander, damit die Seite mit dem
   anfaengt, worum es geht: den Subnetzen und Optionen. #}
<div class="grid grid--2">
{% if current_user.has('dhcp_service.execute') %}
  <section class="card">
    <div class="card__header">
      <div class="flex-1">
        <div class="card__title">{{ icon('power', size=17) }} Dienst</div>
        <div class="card__sub">
          Bewusst getrennt vom Speichern: eine abgelegte Konfiguration startet keinen Dienst.
        </div>
      </div>
    </div>
    <div class="card__body row row--tight">
      {% for action, label, style, question in [
          ('install', 'Kea installieren', '', 'Kea-DHCP-Server per apt installieren?'),
          ('start', 'Aktivieren und starten', 'primary', 'Dienst aktivieren und starten? Er verteilt danach IP-Adressen im Netz.'),
          ('stop', 'Stoppen und deaktivieren', 'danger', 'Dienst stoppen und deaktivieren? Clients erhalten danach keine Adressen mehr.')] %}
        <form method="post" action="{{ url_for('dhcp.service_action', action=action) }}" data-no-guard>
          <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
          <button class="btn btn--sm {{ 'btn--' ~ style if style }}" type="submit"
                  data-busy-label="Arbeitet ..." data-confirm="{{ question }}"
                  data-confirm-title="{{ label }}" data-confirm-ok="Ausführen"
                  data-confirm-style="{{ style or 'primary' }}">{{ label }}</button>
        </form>
      {% endfor %}
    </div>
  </section>
{% endif %}

{% if current_user.has('dhcp_subnets.write') %}
  <section class="card">
    <div class="card__header">
      <div class="flex-1"><div class="card__title">{{ icon('sliders', size=17) }} Globale Einstellungen</div></div>
    </div>
    <form method="post" action="{{ url_for('dhcp.save_settings') }}">
      <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
      <div class="card__body">
        <div class="form-grid">
          {{ field('dhcp_domain', 'Domainname', value=values.dhcp_domain) }}
          {{ field('dhcp_lease_default', 'Lease-Dauer (s)', value=values.dhcp_lease_default, type='number') }}
          {{ field('dhcp_lease_max', 'Maximale Lease-Dauer (s)', value=values.dhcp_lease_max, type='number') }}
          {{ field('dhcp_output_path', 'Zielpfad der Konfiguration', value=values.dhcp_output_path,
                   extra_class='field--full') }}
        </div>
      </div>
      <div class="card__footer">
        <button class="btn btn--primary" type="submit">Speichern und schreiben</button>
      </div>
    </form>
  </section>
{% endif %}

</div>

{# -- Subnetze ---------------------------------------------------------- #}
<section class="card">
  <div class="card__header">
    <div class="flex-1">
      <div class="card__title">{{ icon('network', size=17) }} Subnetze</div>
      <div class="card__sub">
        Subnetz und Maske kommen vom laufenden System – eingegeben wird nur der Adressbereich.
      </div>
    </div>
  </div>
  {% if subnets %}
    <div class="table-wrap">
      <table class="table table--compact">
        <thead><tr><th>Interface</th><th>Bereich</th><th>Gateway</th><th>DNS</th><th>Aktiv</th><th class="actions"></th></tr></thead>
        <tbody>
          {% for subnet in subnets %}
            <tr>
              <td class="mono fs-sm">{{ subnet.interface }}</td>
              <td class="mono fs-sm">{{ subnet.range_start }} &ndash; {{ subnet.range_end }}</td>
              <td class="mono fs-sm">{{ subnet.gateway or '&ndash;' | safe }}</td>
              <td class="mono fs-sm">{{ subnet.dns or '&ndash;' | safe }}</td>
              <td>{% if subnet.enabled %}{{ pill('aktiv', 'online') }}{% else %}{{ pill('pausiert', '') }}{% endif %}</td>
              <td class="actions">
                {% if current_user.has('dhcp_subnets.write') %}
                  <form method="post" action="{{ url_for('dhcp.delete_subnet', subnet_id=subnet.id) }}"
                        style="display:inline" data-no-guard>
                    <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
                    <button class="btn btn--sm btn--ghost danger-text" type="submit"
                            data-confirm="Subnetz {{ subnet.range_start }}-{{ subnet.range_end }} entfernen?"
                            data-confirm-title="Subnetz entfernen" data-confirm-ok="Entfernen">
                      {{ icon('trash', size=15) }}</button>
                  </form>
                {% endif %}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% else %}
    {{ empty_state('Kein Subnetz', 'Ohne Subnetz startet Kea nicht.', 'network') }}
  {% endif %}

  {% if current_user.has('dhcp_subnets.create') %}
    <form method="post" action="{{ url_for('dhcp.add_subnet') }}">
      <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
      <div class="card__body">
        <div class="form-grid">
          <label class="field">
            <span class="field__label">Interface</span>
            <select class="select" name="interface" required>
              {% for network in networks %}
                <option value="{{ network.interface }}">{{ network.interface }} ({{ network.cidr }})</option>
              {% endfor %}
            </select>
          </label>
          {{ field('range_start', 'Von', required=True, placeholder='192.168.1.100') }}
          {{ field('range_end', 'Bis', required=True, placeholder='192.168.1.200') }}
          {{ field('gateway', 'Gateway', value=default_gateway) }}
          {{ field('dns', 'DNS-Server', placeholder='192.168.1.1, 9.9.9.9') }}
          {{ field('comment', 'Kommentar') }}
        </div>
      </div>
      <div class="card__footer"><button class="btn btn--primary" type="submit">Subnetz anlegen</button></div>
    </form>
  {% endif %}
</section>

{# -- Optionen ---------------------------------------------------------- #}

{# Zwei Makros, weil dieselbe Zeile zweimal vorkommt: einmal in der kurzen
   Liste dessen, was wirklich gesendet wird, und einmal im vollen Katalog. #}
{% macro optionswert(option) %}
  {% if current_user.has('dhcp_options.write') %}
    <form method="post" action="{{ url_for('dhcp.set_option_value') }}"
          class="row row--tight" style="flex-wrap:nowrap" data-no-guard>
      <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
      <input type="hidden" name="option_id" value="{{ option.id }}">
      {# min-width:0 und flex:1 statt einer festen Mindestbreite: sonst passte
         das Feld nicht in die Spalte, die Zeile brach um, und der Haken stand
         allein darunter -- es sah aus wie ein Bedienfehler der Seite. #}
      <input class="input input--mono" type="text" name="value"
             value="{{ option.value or '' }}" style="min-width:0;flex:1"
             placeholder="leer = nicht senden">
      <button class="btn btn--sm" type="submit" title="Wert übernehmen">
        {{ icon('check', size=14) }}
      </button>
    </form>
  {% else %}
    <span class="mono fs-sm">{{ option.value or '&ndash;' | safe }}</span>
  {% endif %}
{% endmacro %}

{% macro optionsloeschen(option) %}
  {% if current_user.has('dhcp_options.write') and not option.is_standard %}
    <form method="post" action="{{ url_for('dhcp.delete_custom_option', option_id=option.id) }}"
          data-no-guard>
      <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
      <button class="btn btn--sm btn--ghost danger-text" type="submit"
              data-confirm="Eigene Option {{ option.name }} löschen?"
              data-confirm-title="Option löschen" data-confirm-ok="Löschen">
        {{ icon('trash', size=14) }}
      </button>
    </form>
  {% endif %}
{% endmacro %}

{% set gesetzte = options | selectattr('value') | list %}

<section class="card">
  <div class="card__header">
    <div class="flex-1">
      <div class="card__title">{{ icon('puzzle', size=17) }} Gesendete Optionen</div>
      <div class="card__sub">
        {% if gesetzte %}
          <strong>{{ gesetzte | length }}</strong> von {{ options | length }} Optionen tragen
          einen Wert. Was leer ist, wird nicht gesendet.
        {% else %}
          Derzeit trägt keine Option einen Wert – es wird also nichts über die
          Grundangaben hinaus gesendet.
        {% endif %}
      </div>
    </div>
  </div>

  {% if gesetzte %}
    <div class="table-wrap">
      <table class="table table--compact">
        <thead><tr>
          <th class="numeric">Code</th><th>Name</th><th>Typ</th>
          <th style="width:42%">Wert</th><th class="actions"></th>
        </tr></thead>
        <tbody>
          {% for option in gesetzte %}
            <tr>
              <td class="numeric fs-sm">{{ option.code }}</td>
              <td class="fs-sm">
                <div class="mono">{{ option.name }}</div>
                <div class="fs-xs faint">{{ option.description }}</div>
              </td>
              <td class="fs-xs mono">{{ option.type }}</td>
              <td>{{ optionswert(option) }}</td>
              <td class="actions">{{ optionsloeschen(option) }}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% else %}
    {{ empty_state('Nichts gesetzt', 'Tragen Sie unten im Katalog einen Wert ein.', 'puzzle') }}
  {% endif %}
</section>

{# Der Katalog hat 57 Zeilen. Er stand vorher ganz oben, in einem eigenen
   Rollbereich innerhalb der scrollenden Seite -- und das Gesuchte ging darin
   unter. Jetzt liegt er hinter einem Klick, mit eigener Suche. #}
<details class="card" data-persist="dhcp-katalog">
  <summary class="card__header">
    <div class="flex-1">
      <div class="card__title">{{ icon('list', size=17) }} Optionskatalog</div>
      <div class="card__sub">
        Alle {{ options | length }} bekannten Optionen. Standardoptionen sind nicht löschbar,
        ihr Wert lässt sich leeren.
      </div>
    </div>
  </summary>
  <div class="card__body pt-0">{{ search_box('options-table', 'Option suchen ...') }}</div>
  <div class="table-wrap">
    <table class="table table--compact" id="options-table">
      <thead><tr>
        <th class="numeric">Code</th><th>Name</th><th>Typ</th>
        <th style="width:42%">Wert</th><th class="actions"></th>
      </tr></thead>
      <tbody>
        {% for option in options %}
          <tr data-filter-text="{{ option.code }} {{ option.name }} {{ option.description }}">
            <td class="numeric fs-sm">{{ option.code }}</td>
            <td class="fs-sm">
              <div class="mono">{{ option.name }}</div>
              <div class="fs-xs faint">{{ option.description }}</div>
            </td>
            <td class="fs-xs mono">{{ option.type }}</td>
            <td>{{ optionswert(option) }}</td>
            <td class="actions">{{ optionsloeschen(option) }}</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</details>

{% if current_user.has('dhcp_options.write') %}
  <section class="card">
    <div class="card__header">
      <div class="flex-1">
        <div class="card__title">{{ icon('plus', size=17) }} Eigene Option anlegen</div>
        <div class="card__sub">
          Für alles jenseits des Katalogs – etwa eine URL, die der Client beim Start öffnet.
        </div>
      </div>
    </div>
    <form method="post" action="{{ url_for('dhcp.add_custom_option') }}">
      <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
      <div class="card__body">
        <div class="form-grid">
          {{ field('code', 'Code', type='number', required=True, placeholder='225') }}
          {{ field('name', 'Name', required=True, placeholder='meine-option') }}
          <label class="field">
            <span class="field__label">Typ</span>
            <select class="select" name="type">
              {% for option_type in option_types %}<option value="{{ option_type }}">{{ option_type }}</option>{% endfor %}
            </select>
          </label>
          {{ field('description', 'Beschreibung') }}
        </div>
      </div>
      <div class="card__footer"><button class="btn" type="submit">Eigene Option anlegen</button></div>
    </form>
  </section>

  {# Der Wert einer Option gilt sonst für alle. Genau dafür gibt es
     ``dhcp_option_values.device_id``: ein eigener Wert je Gerät, der in dessen
     Reservierung geschrieben wird -- etwa eine Terminal-URL, die je Gerät
     anders lautet. Auswertbar war das von Anfang an, eingeben liess es sich
     nicht. #}
  <section class="card">
    <div class="card__header">
      <div class="flex-1">
        <div class="card__title">{{ icon('sliders', size=17) }} Option nur für ein Gerät</div>
        <div class="card__sub">
          Der Wert landet in der Reservierung dieses Geräts und überschreibt dort den
          globalen Wert. Leeres Feld entfernt ihn wieder.
        </div>
      </div>
    </div>
    <form method="post" action="{{ url_for('dhcp.set_device_option_value') }}">
      <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
      <div class="card__body">
        <div class="form-grid">
          <label class="field">
            <span class="field__label">Gerät<span class="req" aria-hidden="true">*</span></span>
            <select class="select" name="device_id" required>
              {% for reservation in reservations if reservation.device_id %}
                <option value="{{ reservation.device_id }}">
                  {{ reservation.name or reservation.hostname }} &mdash; {{ reservation.ip }}
                </option>
              {% endfor %}
            </select>
          </label>
          <label class="field">
            <span class="field__label">Option<span class="req" aria-hidden="true">*</span></span>
            <select class="select" name="option_id" required>
              {% for option in options %}
                <option value="{{ option.id }}">{{ option.code }} &mdash; {{ option.name }}</option>
              {% endfor %}
            </select>
          </label>
          {{ field('value', 'Wert', extra_class='field--full',
                   hint_text='Leer = Wert für dieses Gerät entfernen') }}
        </div>
      </div>
      <div class="card__footer">
        <button class="btn" type="submit">Für dieses Gerät speichern</button>
      </div>
    </form>
  </section>
{% endif %}

{# -- Was der Client dafür braucht -------------------------------------- #}
{#
   Ein DHCP-Client bekommt nur, wonach er fragt. Gateway, DNS und Domain
   fragt er von sich aus; alles darüber hinaus -- und dazu gehört jede eigene
   Option -- muss er ausdrücklich anfordern. Ohne diese Zeilen sendet der
   Server brav, und der Client wirft es weg, ohne dass irgendwo etwas
   danebengeht. Genau deshalb steht das hier und nicht in einer Anleitung.
#}
<section class="card">
  <div class="card__header">
    <div class="flex-1">
      <div class="card__title">{{ icon('terminal', size=17) }} Konfiguration für Linux-Clients</div>
      <div class="card__sub">
        Ein Client erhält nur die Optionen, die er anfordert. Diese Zeilen sorgen dafür –
        erzeugt aus dem, was dieser Server tatsächlich sendet.
      </div>
    </div>
  </div>

  {% set beispiel = client_konfig.get('networkd') %}
  {% if not beispiel or not beispiel.optionen %}
    <div class="card__body">
      {{ alert('Dieser Server sendet derzeit keine Option, die ein Client eigens anfordern
      müsste. Sobald eine eigene Option einen Wert trägt, steht hier die passende
      Konfiguration.', 'info') }}
    </div>
  {% else %}
    <div class="card__body pt-0">
      <p class="fs-sm faint">
        Betrifft
        {% for eintrag in beispiel.optionen %}
          <code>{{ eintrag.code }} {{ eintrag.name }}</code>{% if not loop.last %}, {% endif %}
        {% endfor %}.
        Welcher Abschnitt gilt, entscheidet die Distribution des Clients.
      </p>
    </div>

    {% for stil, bezeichnung, pfad in client_stile %}
      {% set konfig = client_konfig.get(stil) %}
      <details class="card__body pt-0">
        <summary class="row row--tight">
          <strong class="fs-sm">{{ bezeichnung }}</strong>
          <span class="fs-xs faint mono">{{ pfad }}</span>
        </summary>
        <div class="stack stack--tight mt-2">
          <div class="row row--tight">
            <span class="fs-xs faint flex-1">Inhalt der Datei</span>
            <button class="btn btn--sm btn--ghost" type="button" data-copy="#konfig-{{ stil }}"
                    data-copy-message="Konfiguration kopiert.">
              {{ icon('copy', size=14) }} Kopieren
            </button>
          </div>
          <pre class="code-block code-block--wrap" id="konfig-{{ stil }}">{{ konfig.inhalt }}</pre>
          <div class="fs-xs faint">Danach: <code>{{ konfig.nachher }}</code></div>
          {% if konfig.auslesen.einfach %}
            {# Ohne diese Zeile kann niemand pruefen, ob es angekommen ist --
               und ein RMM-Agent braucht genau sie. #}
            <div class="fs-xs faint">
              Auslesen auf dem Client:
              <code class="break-all">{{ konfig.auslesen.einfach }}</code>
            </div>
            {% if konfig.auslesen.roh %}
              <div class="fs-xs faint">
                systemd legt fremde Optionen unter ihrer Nummer und hexkodiert ab – den
                Klartext schreibt ein kleiner Übersetzer, den der SSH-Push mitinstalliert
                (<code>/run/tesm-dhcp-options.env</code>, nach jeder Lease erneuert).
                Direkt aus der Lease:
                <code class="break-all">{{ konfig.auslesen.roh }}</code>
              </div>
            {% endif %}
          {% endif %}

          {% if current_user.has('servicing_command.execute') %}
            <form method="post" action="{{ url_for('dhcp.push_client_config') }}">
              <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
              <input type="hidden" name="stil" value="{{ stil }}">
              <div class="divider"></div>
              <div class="fs-xs faint mb-2">
                Oder direkt schreiben lassen – über SSH, mit den hinterlegten Zugangsdaten.
                Jeder Client bekommt einen eigenen Auftrag; die Ausgabe steht unter Wartung.
              </div>
              <div class="row row--tight" style="flex-wrap:wrap">
                {% for reservation in reservations if reservation.device_id %}
                  <label class="check">
                    <input type="checkbox" name="device_ids" value="{{ reservation.device_id }}">
                    <span>{{ reservation.name or reservation.hostname }}</span>
                  </label>
                {% endfor %}
              </div>
              <div class="mt-2">
                <button class="btn btn--sm btn--primary" type="submit"
                        data-confirm="Die Konfiguration für {{ bezeichnung }} auf die ausgewählten Clients schreiben ({{ pfad }})? Der DHCP-Client wird dort anschließend neu gestartet."
                        data-confirm-title="Konfiguration verteilen" data-confirm-ok="Verteilen">
                  {{ icon('upload', size=15) }} An ausgewählte Clients senden
                </button>
              </div>
            </form>
          {% endif %}
        </div>
      </details>
    {% endfor %}
  {% endif %}
</section>

{# -- Reservierungen und Leases ----------------------------------------- #}
<div class="grid grid--2">
  <section class="card">
    <div class="card__header">
      <div class="flex-1">
        <div class="card__title">{{ icon('credit-card', size=17) }} Reservierungen</div>
        <div class="card__sub">
          Automatisch aus dem Gerätebestand; bei MAC-Kollision gewinnt der Gerätebestand.
          Nur Adressen aus eingerichteten Bereichen.
        </div>
      </div>
    </div>
    {% if skipped_reservations %}
      {# Nicht verschweigen, sondern benennen: vorher standen diese Einträge in
         der Liste, obwohl Kea sie nie ausgeliefert hat. #}
      <div class="card__body pt-0">
        {{ alert(skipped_reservations | length ~ ' Gerät(e) liegen in keinem eingerichteten
        Bereich und bekommen keine Reservierung. Legen Sie den passenden Bereich an, wenn sie
        eine bekommen sollen.', 'warning') }}
        <details class="fs-xs faint">
          <summary>Welche?</summary>
          <ul class="mt-1">
            {% for entry in skipped_reservations %}
              <li><span class="mono">{{ entry.ip }}</span> &ndash; {{ entry.name }}
                ({{ entry.source }})</li>
            {% endfor %}
          </ul>
        </details>
      </div>
    {% endif %}
    <div class="table-wrap" style="max-height:360px;overflow:auto">
      <table class="table table--compact">
        <thead><tr><th>MAC</th><th>IP</th><th>Hostname</th><th>Zustand</th><th>Quelle</th>
                   <th>Eigene Optionen</th><th class="actions"></th></tr></thead>
        <tbody>
          {% for reservation in reservations %}
            <tr>
              <td class="mono fs-sm">{{ reservation.mac }}</td>
              <td class="mono fs-sm">{{ reservation.ip }}</td>
              <td class="fs-sm">{{ reservation.hostname }}</td>
              <td title="{{ reservation.state_hint }}">
                {{ pill(reservation.state | replace('_', ' '), reservation.state_style) }}
                {% if reservation.state == 'andere_adresse' and reservation.lease %}
                  <div class="fs-xs faint mono">jetzt {{ reservation.lease.address }}</div>
                {% elif reservation.state == 'aktiv' and reservation.lease %}
                  <div class="fs-xs faint">{{ reservation.lease.remaining_text }}</div>
                {% endif %}
              </td>
              <td>{{ pill(reservation.source, 'accent' if reservation.source == 'auto' else '') }}</td>
              <td class="fs-xs">
                {% set eigene = device_option_values.get(reservation.device_id) if reservation.device_id else none %}
                {% if eigene %}
                  {% for wert in eigene %}
                    <div class="mono break-all">{{ wert.code }} {{ wert.name }} = {{ wert.value }}</div>
                  {% endfor %}
                {% else %}
                  <span class="faint">&ndash;</span>
                {% endif %}
              </td>
              <td class="actions">
                {% if reservation.source == 'manuell' and current_user.has('dhcp_reservations.delete') %}
                  <form method="post" data-no-guard
                        action="{{ url_for('dhcp.delete_reservation', reservation_id=reservation.reservation_id) }}">
                    <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
                    <button class="btn btn--sm btn--ghost danger-text" type="submit"
                            data-confirm="Reservierung {{ reservation.mac }} entfernen?"
                            data-confirm-title="Reservierung entfernen" data-confirm-ok="Entfernen">
                      {{ icon('trash', size=14) }}</button>
                  </form>
                {% endif %}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% if current_user.has('dhcp_reservations.create') %}
      <form method="post" action="{{ url_for('dhcp.add_reservation') }}">
        <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
        <div class="card__body">
          <div class="form-grid">
            {{ field('mac', 'MAC', required=True, placeholder='aa:bb:cc:dd:ee:ff') }}
            {{ field('ip', 'IP', required=True) }}
            {{ field('hostname', 'Hostname') }}
            {{ field('comment', 'Kommentar') }}
          </div>
        </div>
        <div class="card__footer"><button class="btn" type="submit">Reservierung speichern</button></div>
      </form>
    {% endif %}
  </section>

  <section class="card">
    <div class="card__header">
      <div class="flex-1">
        <div class="card__title">{{ icon('clock', size=17) }} Leases</div>
        <div class="card__sub">
          Direkt aus {{ lease_file }} gelesen &ndash; je Adresse gilt der letzte Eintrag.
          {% if current_user.has('dhcp_lease_adopt.read') and current_user.has('devices.create') %}
            Eine <strong>dynamische</strong> Lease lässt sich als Client übernehmen; sie bekommt
            damit eine feste Adresse und wird überwacht.
          {% endif %}
        </div>
      </div>
    </div>
    {% if leases and service.get('active') != 'active' %}
      {# Sonst sieht man alte Einträge und hält sie für den aktüllen Stand:
         ohne laufenden Dienst wird keine Lease erneuert, und die Datei
         veraltet still. #}
      <div class="card__body pt-0">
        {{ alert('Der DHCP-Dienst läuft nicht (' ~ service.get('active', 'unbekannt') ~ ').
        Es wird keine Lease erneuert -- die Liste zeigt den letzten Stand der Datei, nicht die
        aktülle Lage. Der Grund steht im Kea-Protokoll.', 'warning') }}
      </div>
    {% endif %}
    {% if leases %}
      <div class="table-wrap" style="max-height:420px;overflow:auto">
        <table class="table table--compact">
          <thead><tr><th>IP</th><th>MAC</th><th>Hostname</th><th>Art</th><th>Zustand</th>
                     <th>Läuft ab</th><th></th></tr></thead>
          <tbody>
            {% for lease in leases %}
              <tr>
                <td class="mono fs-sm">{{ lease.address }}</td>
                <td class="mono fs-sm">{{ lease.mac }}</td>
                <td class="fs-sm">{{ lease.hostname or '&ndash;' | safe }}</td>
                <td>
                  {% if lease.address in reserved_ips %}{{ pill('Reservierung', 'accent') }}
                  {% else %}{{ pill('dynamisch', '') }}{% endif %}
                </td>
                <td>
                  {% if lease.is_expired %}{{ pill('abgelaufen', 'warning') }}
                  {% elif lease.is_active %}{{ pill('gültig', 'online') }}
                  {% else %}{{ pill('inaktiv', '') }}{% endif %}
                </td>
                <td class="fs-sm">{{ lease.expires_text }}
                  <div class="fs-xs faint">{{ lease.remaining_text }}</div>
                </td>
                <td class="nowrap">
                  {# Übernehmen gibt es nur für dynamische Leases: was reserviert
                     ist, gehört schon zu einem gepflegten Datensatz. Und nur,
                     wenn beide Rechte stehen -- hier entsteht ein Client. #}
                  {% if lease.address not in reserved_ips
                        and current_user.has('dhcp_lease_adopt.read')
                        and current_user.has('devices.create') %}
                    {% if lease.mac in bekannte_macs %}
                      <span class="faint fs-xs" title="Zu dieser MAC gibt es bereits einen Client">
                        bereits Client
                      </span>
                    {% else %}
                      <form method="post" action="{{ url_for('dhcp.adopt_lease') }}">
                        <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
                        <input type="hidden" name="mac" value="{{ lease.mac }}">
                        {# Kein Geisterknopf mehr: die Uebernahme ist die eine
                           Handlung in dieser Tabelle, und sie war als
                           "btn--ghost" kaum von der Zeile zu unterscheiden. #}
                        <button class="btn btn--sm btn--primary" type="submit"
                                data-confirm="{{ lease.hostname or lease.address }} als überwachten Client anlegen? Switch, Port und Zugangsdaten tragen Sie danach nach."
                                data-confirm-title="Als Client übernehmen"
                                data-confirm-ok="Übernehmen">
                          {{ icon('plus', size=14) }} Als Client
                        </button>
                      </form>
                    {% endif %}
                  {% endif %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% else %}
      {{ empty_state('Keine Leases', 'Es sind keine vergebenen Adressen bekannt.', 'clock') }}
    {% endif %}
  </section>
</div>

{# -- Vorschau ---------------------------------------------------------- #}
<details class="card" data-persist="dhcp-preview">
  <summary class="card__header">
    <div class="flex-1">
      <div class="card__title">{{ icon('file-text', size=17) }} Erzeugte Kea-Konfiguration</div>
      <div class="card__sub">Vorschau &ndash; so würde die Datei geschrieben</div>
    </div>
  </summary>
  <pre class="log-view">{{ preview }}</pre>
  {% if current_user.has('dhcp_config.execute') %}
    <div class="card__footer">
      <form method="post" action="{{ url_for('dhcp.write_config') }}" data-no-guard>
        <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
        <button class="btn btn--primary" type="submit">Datei jetzt schreiben</button>
      </form>
    </div>
  {% endif %}
</details>
{% endblock %}