<layout name="admin" />

<div class="section">
    <h2>Umgebungsvariablen</h2>

    <div class="admin-tools">
        <input type="text" id="envFilter" placeholder="Variablen filtern..." style="padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: 6px; width: 300px;">
        <div style="margin-top: 10px;">
            <button class="filter-tag" data-prefix="APP_" style="margin: 2px; padding: 4px 8px; border: 1px solid var(--gray-300); border-radius: 4px; cursor: pointer;">APP_</button>
            <button class="filter-tag" data-prefix="DB_" style="margin: 2px; padding: 4px 8px; border: 1px solid var(--gray-300); border-radius: 4px; cursor: pointer;">DB_</button>
            <button class="filter-tag" data-prefix="REDIS_" style="margin: 2px; padding: 4px 8px; border: 1px solid var(--gray-300); border-radius: 4px; cursor: pointer;">REDIS_</button>
            <button class="filter-tag" data-prefix="RATE_LIMIT_" style="margin: 2px; padding: 4px 8px; border: 1px solid var(--gray-300); border-radius: 4px; cursor: pointer;">RATE_LIMIT_</button>
            <button class="filter-tag" data-prefix="PHP_" style="margin: 2px; padding: 4px 8px; border: 1px solid var(--gray-300); border-radius: 4px; cursor: pointer;">PHP_</button>
            <button class="filter-tag active" data-prefix="" style="margin: 2px; padding: 4px 8px; border: 1px solid var(--primary); background: var(--primary); color: white; border-radius: 4px; cursor: pointer;">Alle</button>
        </div>
    </div>

    <table-data source="env" type="environment" container-class="admin-card" id="envTable" />
</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.style.background = '';
            t.style.color = '';
            t.style.borderColor = 'var(--gray-300)';
            t.classList.remove('active');
        });
        this.classList.add('active');
        this.style.background = 'var(--primary)';
        this.style.color = 'white';
        this.style.borderColor = 'var(--primary)';

        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>