<div class="series-tags-fragment">
    <h6>Series DICOM tags (common across series)</h6>
    <div class="mb-2">
        <input id="series-tags-filter" class="form-control form-control-sm" type="search" placeholder="Filter tags (key or value)">
    </div>
    {% if common_tags %}
        <table class="table table-sm">
            <tbody>
                {% for k, v in common_tags.items %}
                    <tr>
                        <th style="width:35%">{{ k }}</th>
                        <td>{{ v }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% else %}
        <div class="text-muted">No consistent tags found across images in this series.</div>
    {% endif %}
</div>

<script>
    (function () {
        const input = document.getElementById('series-tags-filter');
        if (!input) return;
        input.addEventListener('input', function (e) {
            const q = (e.target.value || '').trim().toLowerCase();
            const table = document.querySelector('.series-tags-fragment table');
            if (!table) return;
            const rows = table.querySelectorAll('tbody tr');
            rows.forEach(row => {
                const key = (row.querySelector('th') && row.querySelector('th').textContent || '').toLowerCase();
                const val = (row.querySelector('td') && row.querySelector('td').textContent || '').toLowerCase();
                if (!q || key.indexOf(q) !== -1 || val.indexOf(q) !== -1) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        });
    })();
</script>
