<div class="mb-3">
    <input type="text" id="history-filter" class="form-control form-control-sm" placeholder="Filter history logs..." onkeyup="filterHistoryLogs()">
</div>

{% if statuses %}
    <ul id="history-log-list" class="list-unstyled mb-0">
        {% for status in statuses %}
            <li class="history-log-item py-1 border-bottom small">
                {{ status }}
            </li>
        {% endfor %}
    </ul>
{% else %}
    <div class="text-muted small">Nil recorded.</div>
{% endif %}

<script>
function filterHistoryLogs() {
    var input = document.getElementById('history-filter');
    var filter = input.value.toLowerCase();
    var list = document.getElementById('history-log-list');
    if (!list) return;
    var items = list.getElementsByClassName('history-log-item');
    for (var i = 0; i < items.length; i++) {
        var text = items[i].textContent || items[i].innerText;
        if (text.toLowerCase().indexOf(filter) > -1) {
            items[i].classList.remove("d-none");
        } else {
            items[i].classList.add("d-none");
        }
    }
}
</script>
