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

    <div class="admin-nav">
        <a href="/admin">Dashboard</a>
        <a href="/admin/routes">Routen</a>
        <a href="/admin/services" class="active">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="serviceFilter" placeholder="Dienste filtern..." class="search-input">
            <span class="services-count"><?= count($services) ?> Dienste insgesamt</span>
        </div>

        <div class="service-list" id="serviceList">
            <?php foreach($services as $service): ?>
            <div class="service-item">
                <div class="service-name"><?= $service ?></div>
                <?php
                $parts = explode('\\', $service);
                $category = $parts[1] ?? 'Unknown';
                $subCategory = $parts[2] ?? '';
                ?>
                <div class="service-category">
                    <span class="category-badge"><?= $category ?></span>
                    <?php if ($subCategory): ?>
                    <span class="subcategory-badge"><?= $subCategory ?></span>
                    <?php endif; ?>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>

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

    <script>
        document.getElementById('serviceFilter').addEventListener('input', function() {
            const filterValue = this.value.toLowerCase();
            const items = document.querySelectorAll('#serviceList .service-item');
            let visibleCount = 0;

            items.forEach(item => {
                const text = item.textContent.toLowerCase();
                const isVisible = text.includes(filterValue);
                item.style.display = isVisible ? '' : 'none';
                if (isVisible) visibleCount++;
            });

            document.querySelector('.services-count').textContent =
                visibleCount + ' von ' + <?= count($services) ?> + ' Diensten';
        });
    </script>
</body>
</html>
