{% if node.file.source %}
<div class="phpdocumentor-modal" id="source-view">
    <div class="phpdocumentor-modal-bg" data-exit-button></div>
    <div class="phpdocumentor-modal-container">
        <div class="phpdocumentor-modal-content">
        <pre style="max-height: 500px; overflow-y: scroll" data-src="{{ path('files/' ~ node.path ~ '.txt')|raw }}" class="language-php line-numbers linkable-line-numbers"></pre>
        </div>
        <button data-exit-button class="phpdocumentor-modal__close">X</button>
    </div>
</div>
{% endif %}

{% block javascripts %}
    <script type="text/javascript">
        function loadExternalCodeSnippets(line) {
            Array.prototype.slice.call(document.querySelectorAll('pre[data-src]')).forEach((pre) => {
                var src = pre.getAttribute('data-src').replace( /\\/g, '/');
                var extension = (src.match(/\.(\w+)$/) || [, ''])[1];
                var language = 'php';

                var code = document.createElement('code');
                code.className = 'language-' + language;

                pre.textContent = '';

                pre.setAttribute('data-line', line)
                code.textContent = 'Loading…';

                pre.appendChild(code);

                var xhr = new XMLHttpRequest();

                xhr.open('GET', src, true);

                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {

                        if (xhr.status < 400 && xhr.responseText) {
                            code.textContent = xhr.responseText;

                            Prism.highlightElement(code);
                        }
                        else if (xhr.status >= 400) {
                            code.textContent = '✖ Error ' + xhr.status + ' while fetching file: ' + xhr.statusText;
                        }
                        else {
                            code.textContent = '✖ Error: File does not exist, is empty or trying to view from localhost';
                        }
                    }
                };

                xhr.send(null);
            });
        }

        var modals = document.querySelectorAll("[data-modal]");

        modals.forEach(function (trigger) {
            trigger.addEventListener("click", function (event) {
                //event.preventDefault();
                const modal = document.getElementById(trigger.dataset.modal);
                modal.classList.add("phpdocumentor-modal__open");
                loadExternalCodeSnippets(trigger.dataset.line)
                const exits = modal.querySelectorAll("[data-exit-button]");
                exits.forEach(function (exit) {
                    exit.addEventListener("click", function (event) {
                        event.preventDefault();
                        modal.classList.remove("phpdocumentor-modal__open");
                    });
                });
            });
        });
    </script>
{% endblock %}