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

{% block title %}Vector Service Log{% endblock %}

{% block body %}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0"><i class="bi bi-terminal"></i> Vector Service Log Python</h1>

        {% if fileExists %}
            <input
                    type="text"
                    id="logSearch"
                    class="form-control form-control-sm"
                    placeholder="Search in log..."
                    style="max-width:300px;"
            >
        {% endif %}
    </div>

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

    {% if fileExists %}
        <script>
            (function () {

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

                if (!input || !logElement) {
                    return;
                }

                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');

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

                    logElement.innerHTML = highlighted;
                }

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

            })();
        </script>
    {% endif %}

{% endblock %}