<!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>Umgebungsvariablen</h1>
    </div>

    <div class="admin-nav">
        <a href="/admin">Dashboard</a>
        <a href="/admin/routes">Routen</a>
        <a href="/admin/services">Dienste</a>
        <a href="/admin/environment" class="active">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="envFilter" placeholder="Variablen filtern..." class="search-input">
            <div class="filter-tags">
                <button class="filter-tag" data-prefix="APP_">APP_</button>
                <button class="filter-tag" data-prefix="DB_">DB_</button>
                <button class="filter-tag" data-prefix="REDIS_">REDIS_</button>
                <button class="filter-tag" data-prefix="RATE_LIMIT_">RATE_LIMIT_</button>
                <button class="filter-tag" data-prefix="PHP_">PHP_</button>
                <button class="filter-tag active" data-prefix="">Alle</button>
            </div>
        </div>

        <table class="admin-table" id="envTable">
            <thead>
                <tr>
                    <th>Variable</th>
                    <th>Wert</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach($env as $key => $value): ?>
                <tr>
                    <td><?= $key ?></td>
                    <td><?= is_array($value) ? json_encode($value) : $value ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>

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

    <script>
        // Filterung der Umgebungsvariablen
        document.getElementById('envFilter').addEventListener('input', filterTable);

        // Tag-Filter
        document.querySelectorAll('.filter-tag').forEach(tag => {
            tag.addEventListener('click', function() {
                document.querySelectorAll('.filter-tag').forEach(t => t.classList.remove('active'));
                this.classList.add('active');

                const prefix = this.getAttribute('data-prefix');
                document.getElementById('envFilter').value = prefix;
                filterTable();
            });
        });

        function filterTable() {
            const filterValue = document.getElementById('envFilter').value.toLowerCase();
            const rows = document.querySelectorAll('#envTable tbody tr');

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