{% extends '@EasyAdmin/page/content.html.twig' %}

{% block content_header_wrapper %}
    <section class="content-header">
        <div class="content-header-title">
            <h1 class="title">Server Logs</h1>
        </div>
        {% if lines is not empty %}
        <div class="page-actions">
            <div class="global-actions">
                <form method="post" onsubmit="return confirm('Are you sure you want to clear the logs?')"
                      action="/admin?crudAction=clearServerLogs&crudControllerFqcn=App%5CController%5CAdmin%5CErrorLogCrudController">
                    <button type="submit" class="btn btn-primary">
                        Clear Logs
                    </button>
                </form>
            </div>
        </div>
        {% endif %}
    </section>
{% endblock %}

{% block main %}
    <!-- show placeholder in case no logs are available -->
    {% if lines is empty %}
        <p>No logs available.</p>
    {% endif %}
    <pre id="js-logs" style="color: rgb(212,212,212); max-width: var(--body-max-width); white-space: pre-line;">
    {% for line in lines %}
        <p>{{ loop.index }}: {{ line }}</p>{% endfor %}
    </pre>
    <!-- "load more" button centered -->
    <div style="display: flex; justify-content: center;">
        <button type="button" id="js-load-more" class="btn btn-primary">Load more</button>
    </div>
    <script>
        let offset = {{ lines|length }};
        const button = document.getElementById('js-load-more');
        const jsLogsPre = document.getElementById('js-logs');

        function hideLoadMoreButton() {
            button.style.display = 'none';
        }

        if (offset < 50) {
            hideLoadMoreButton();
        } else {
            button.addEventListener('click', function () {
                // disable button and set it to loading state using bootstrap
                button.classList.add('disabled');
                button.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...';

                fetch('/admin?crudAction=serverLogsPagination&crudControllerFqcn=App%5CController%5CAdmin%5CErrorLogCrudController&offset=' + offset)
                    // parse response that contains JSON with lines
                    .then(response => response.json())
                    .then(data => {
                        // append new lines to the end of the logs
                        data.lines.forEach(line => {
                            jsLogsPre.innerHTML += '<p>' + (offset + 1) + ': ' + line + '</p>';
                            offset++;
                        });

                        // hide the button if there are no more lines
                        if (data.lines.length < 50) {
                            hideLoadMoreButton();
                        }
                    })
                    .finally(() => {
                        // enable button and set it back to normal state
                        button.classList.remove('disabled');
                        button.innerHTML = 'Load more';
                    });
            });
        }
    </script>
{% endblock %}