<layout name="admin" />

<div class="section">
    <h2>Registrierte Dienste</h2>

    <div style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;">
        <input type="text" id="serviceFilter" placeholder="Dienste filtern..."
               style="padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: 6px; width: 300px;">
        <span class="services-count" style="color: var(--gray-600);">{{ servicesCount }} Dienste insgesamt</span>
    </div>

    <div class="stats-grid" id="serviceList">
        <for var="service" in="services">
            <div class="stat-card service-item">
                <h3>{{ service.name }}</h3>
                <p><strong>Kategorie:</strong> {{ service.category }}</p>
                <if condition="{{ service.subCategory }}">
                    <p><strong>Unterkategorie:</strong> {{ service.subCategory }}</p>
                </if>
            </div>
        </for>
    </div>
</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 {{ servicesCount }} Diensten';
});
</script>