<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Service-Logs</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>

<nav class="navbar navbar-dark bg-dark position-relative px-3">

    <!-- 🟢 ZENTRIERTER TITEL -->
    <div class="position-absolute top-50 start-50 translate-middle
                d-flex align-items-center gap-2 text-white">
        <span style="font-size:1.3rem;">📜</span>
        <span class="fw-semibold fs-5">Service-Änderungsprotokoll</span>
    </div>

    <!-- 🔵 RECHTS: DASHBOARD -->
    <div class="ms-auto">
        <a href="/dashboard" class="btn btn-outline-light btn-sm">
            ⬅️ Dashboard
        </a>
    </div>

</nav>


<div class="container mt-4">

<table class="table table-sm table-bordered">
    <thead class="table-light">
        <tr>
            <th>Datum</th>
            <th>User</th>
            <th>Aktion</th>
            <th>Vorher</th>
            <th>Nachher</th>
        </tr>
    </thead>
    <tbody>

    <% logs.forEach(l => { %>
        <tr>
            <td><%= new Date(l.created_at).toLocaleString("de-DE") %></td>
            <td><%= l.username %></td>
            <td><%= l.action %></td>
            <td><pre><%= l.old_value || "-" %></pre></td>
            <td><pre><%= l.new_value || "-" %></pre></td>
        </tr>
    <% }) %>

    </tbody>
</table>

</div>
</body>
</html>
