{{@include("header", it)/}}


<style>
    .pre-log-content{
        height: calc(100vh - 270px); /* -251px */
        margin-bottom: 0;
        font-size: 100%;
    }
    .nui-height{
        height: calc(100vh - 170px);
    }

    .event-source{
        font-weight: 900 !important;
        text-decoration: none !important;
        cursor: pointer;
    }

    /* Experimental */
    .highlight-player{
        background-color: #ffeaa7;
        color: rgb(27, 27, 27) !important;
    }
</style>


<div class="text-center" style="margin-bottom: 5px">
    <h3>Server Log</h3>
    <span>You can log custom commands like <code>/car</code>. Read the <a href="https://github.com/tabarra/txAdmin/blob/master/docs/extra_logging.md" target="_blank">docs</a> for more information.</span>
</div>
<div class="card border-primary">
    <div class="card-body">
        <pre id="console" class="thin-scroll pre-log-content {{[(it.isWebInterface), '', 'nui-height']|ternary}}">{{it.log|safe}}</pre>
    </div>
</div>


{{@include("footer", it)/}}


<script>
    $(document).ready(function () {
        scrollToBottom();
        setupHovers();
    });

    setInterval(getNewData, 5000);

    let currOffset = '{{it.offset}}';
    function getNewData(){
        txAdminAPI({
            type: "GET",
            url: `serverLog/${currOffset}`,
            success: function (data) {
                //FIXME: temporary before database
                //NOTE: /\ that was a lie :)
                if(typeof data.offset !== 'undefined') currOffset = data.offset;
                if(typeof data.log !== 'undefined' && data.log !== false && data.log.length){
                    const consoleElement = document.getElementById("console");
                    let _tempContent = consoleElement.innerHTML + data.log;
                    _tempContent = (_tempContent.length > BUFFER_TRIM_SIZE)
                        ? _tempContent.slice(-0.5 * BUFFER_TRIM_SIZE)
                        : _tempContent;
                    consoleElement.innerHTML = _tempContent.substr(_tempContent.indexOf("\n"));
                    scrollToBottom();
                    setupHovers();
                }
            },
            error: function (xmlhttprequest, textstatus, message) {
                console.log(`Error refreshing server log: ${message}`)
            }
        });
    }

    function scrollToBottom(){
        try {
            $("#console").scrollTop($("#console")[0].scrollHeight);
        } catch (error) {}
    }

    //Player name click function
    function setupHovers(){
        $('.event-source').click(function(e){
            const ids = $(this).data('player-identifiers');
            if(!ids) return;
            const name = $(this).data('player-name') || 'unknown';
            const license = ids.split(';').find(x => x.substring(0,8) == 'license:').substring(8);
            showPlayer(license, name, ids);
        });
    }
</script>
