{% extends "admin/base_site.html" %}
{% load i18n admin_urls static admin_list %}

{% block content %}

<style>
    body {
        overflow: hidden;
    }

    .logs {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 110px);
        max-width: 99%;
        margin: 0;
        resize: horizontal;
        position: relative;
        padding-bottom: 10px; /* Add spacing to the bottom */
        box-sizing: border-box;
    }

    .ansi {
        font-family: 'Cascadia Code', sans-serif;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        overflow-y: auto;
        height: 100%;
        margin-bottom: 10px;
    }

    .logline {
        background-color: #edeff5;
        font-size: 18px;
        border-radius: 2px;
        margin: 4px 8px 4px 2px;
        padding: 2px 8px 2px 4px;
        white-space: pre-wrap;
        box-shadow: 1px 1px 0px 2px #bbd1fc;
    }

    .logline:hover {
        background-color: #ffffff;
        box-shadow: 1px 1px 0px 2px #699bff;
    }

    .log_title {
        text-shadow: 1px 1px 3px rgba(0, 0, 0, .25);
        font-family: 'Roboto', sans-serif;
        font-size: 25px;
        text-decoration: underline;
        margin-bottom: 6px;
    }


    .resize_handle {
        position: absolute;
        right: -6px;
        top: 0;
        bottom: 0;
        width: 2px;
        cursor: ew-resize;
        background: linear-gradient(to bottom, #fff 0%, #699bff 18%, #699bff 82%, #fff 100%);
        transition: width 0.2s, right 0.2s;
    }

    .resize_handle:hover {
        width: 6px;
        right: -8px;
    }
</style>

<script src="https://cdn.jsdelivr.net/npm/ansi_up@4.0.3"></script>

<script>
    // Cascadia Code font
    var link1 = document.createElement('link');
    link1.href = 'https://fonts.cdnfonts.com/css/cascadia-code';
    link1.rel = 'stylesheet';
    document.head.appendChild(link1);

    // Preconnect for Google Fonts
    var link2 = document.createElement('link');
    link2.href = 'https://fonts.googleapis.com';
    link2.rel = 'preconnect';
    document.head.appendChild(link2);

    // Preconnect for Google Gstatic
    let link3 = document.createElement('link');
    link3.href = 'https://fonts.gstatic.com';
    link3.rel = 'preconnect';
    link3.crossOrigin = 'anonymous';
    document.head.appendChild(link3);

    // Roboto font
    var link4 = document.createElement('link');
    link4.href = 'https://fonts.googleapis.com/css2?family=Roboto:wght@500';
    link4.rel = 'stylesheet';
    document.head.appendChild(link4);

    // ansi_up script
    var script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/ansi_up@4.0.3';
    document.head.appendChild(script);

    

    function parse_logs() {
        var ansi_up = new AnsiUp;
        var ansiElements = document.getElementsByClassName('ansi');
        // Loop through all elements with the class 'ansi'
        for (let i = 0; i < ansiElements.length; i++) {

            // Get the contents of the span, split it by new lines
            let rawTextArr = ansiElements[i].textContent.split('\n');
            rawTextArr = rawTextArr.map((el, index) => index !== 0 ? '' + el : el);
            // Empty the span¤
            ansiElements[i].textContent = '';


            let exclude_tokens = ["celery.redirected",];
            let exit = false;
            // Loop through each of the lines
            for (let j = 0; j < rawTextArr.length; j++) {
                // filtering lines that contain one of the excluded_tokens
                exit = false;
                for (let k = 0; k < exclude_tokens.length; k++) {
                    if (rawTextArr[j].includes(exclude_tokens[k])) {
                        exit = true;
                        break;
                    }
                }
                if (exit) {
                    continue;
                }

                // Create a new span for each line
                let newSpan = document.createElement('p');
                newSpan.className = 'logline';
                // Convert ANSI codes to HTML and add it to the span
                newSpan.innerHTML = ansi_up.ansi_to_html(rawTextArr[j]);
                // Append the new span to the original span element
                ansiElements[i].appendChild(newSpan);
            }
        }
    }

    function hangle_draggables() {
        let startWidth, startX;

        const draggable = document.querySelector('.logs');
        const resizeHandle = draggable.querySelector('.resize_handle');

        resizeHandle.addEventListener('mousedown', function (e) {
            startX = e.pageX;
            startWidth = parseFloat(window.getComputedStyle(draggable, null).width.replace("px", ""));
            e.preventDefault();
        }, false);

        document.addEventListener('mousemove', function (e) {
            if (startX !== undefined) {
                const pxMoved = e.pageX - startX;
                draggable.style.width = startWidth + pxMoved + 'px';
            }
        }, false);

        document.addEventListener('mouseup', function () {
            startX = undefined;
        }, false);
    }

    document.addEventListener('DOMContentLoaded', parse_logs);
    document.addEventListener('DOMContentLoaded', hangle_draggables);


</script>

<div class="logs">
    <div class="resize_handle"></div>
    <div class="log_title">Logs for worker <b><a href={{task_change_url}}>{{task_id}}</a></b></div>
    <div class="ansi">{{ ansi_logging_content }}</div>
</div>

{% endblock %}

{% block title %}
{{ title|striptags }}
{% endblock %}