{% extends 'admin/base.html.twig' %}

{% block title %}System Log - {{ filename }}{% endblock %}

{% block body %}

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h1 class="h5 mb-0">{{ filename }}</h1>

        <input type="text"
               id="logSearch"
               class="form-control form-control-sm"
               placeholder="Search..."
               style="max-width:300px;">
    </div>

    <div class="card bg-black border-secondary">
        <div class="card-body p-0">
        <pre id="logContent"
             style="margin:0;padding:15px;background:#000;color:#00ff88;
                    font-size:12px;line-height:1.4;
                    max-height:75vh;overflow:auto;white-space:pre-wrap;">
{{ content }}
        </pre>
        </div>
    </div>

    <script>
        (function () {

            const input = document.getElementById('logSearch');
            const logElement = document.getElementById('logContent');

            const originalText = logElement.textContent;

            function escapeRegExp(string) {
                return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
            }

            function highlight(term) {
                if (!term) {
                    logElement.innerHTML = originalText;
                    return;
                }

                const safeTerm = escapeRegExp(term);
                const regex = new RegExp('(' + safeTerm + ')', 'gi');

                logElement.innerHTML = originalText.replace(regex, function(match) {
                    return '<span style="background:#ffcc00;color:#000;">' + match + '</span>';
                });
            }

            input.addEventListener('input', function () {
                highlight(this.value.trim());
            });

        })();
    </script>

{% endblock %}