<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $title ?></title>
    <link rel="stylesheet" href="/css/admin.css">
</head>
<body class="admin-page">
    <div class="admin-header">
        <h1>Routen-Übersicht</h1>
    </div>

    <div class="admin-nav">
        <a href="/admin">Dashboard</a>
        <a href="/admin/routes" class="active">Routen</a>
        <a href="/admin/services">Dienste</a>
        <a href="/admin/environment">Umgebung</a>
        <a href="/admin/performance">Performance</a>
        <a href="/admin/redis">Redis</a>
        <a href="/admin/phpinfo">PHP Info</a>
    </div>

    <div class="admin-content">
        <div class="admin-tools">
            <input type="text" id="routeFilter" placeholder="Routen filtern..." class="search-input">
        </div>

        <table class="admin-table" id="routesTable">
            <thead>
                <tr>
                    <th>Pfad</th>
                    <th>Methode</th>
                    <th>Controller</th>
                    <th>Aktion</th>
                    <th>Name</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach($routes as $route): ?>
                <tr>
                    <td><?= $route->path ?></td>
                    <td><?= $route->method ?></td>
                    <td><?= $route->controllerClass ?></td>
                    <td><?= $route->methodName ?></td>
                    <td><?= $route->name ?? '-' ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>

    <div class="admin-footer">
        <p>&copy; <?= date('Y') ?> Framework Admin</p>
    </div>

    <script>
        document.getElementById('routeFilter').addEventListener('input', function() {
            const filterValue = this.value.toLowerCase();
            const rows = document.querySelectorAll('#routesTable tbody tr');

            rows.forEach(row => {
                const text = row.textContent.toLowerCase();
                row.style.display = text.includes(filterValue) ? '' : 'none';
            });
        });
    </script>
</body>
</html>
