<h1>Odin - Backend CBR Bot</h1>
<p> Odin powers the CBR backend and has access so some powerful capabilities</p>

<script src="/assets/plugins/marked/marked.min.js"></script>
<script> {% include 'dev/odin/panels/odin-chat/odin-chat.js' %} </script>
<link type="text/css" rel="stylesheet" href="/assets/plugins/golden-layout/goldenlayout-base.css" />
<link type="text/css" rel="stylesheet" href="/assets/plugins/golden-layout/goldenlayout-dark-theme.css" />

<style>
h2 {
    font: 14px Arial, sans-serif;
    color: #fff;
    padding: 10px;
    text-align: center;
}
    .lm_popout {
        display: none; /* Hide popout buttons */
    }
</style>



<div id="layout" style="widxth: 100%; height: 100vh;"></div>

<script>
    function setup() {
        initial_question = 'Good morning how can you help me?'

        const prompts = [   "What is your current version"                                    ,
                            ('What are the methods you can call? please group them by area? ' +
                             "can you make the method name user friendly")                    ,
                            'What is your current IP address?'                                ,
                            "What are the details of IP Address "                             ,
                            "Who is attacking you"                                            ,
                            "Who is attacking you, Please add the exec debrief"               ,
                            "Can you block the IP "                                           ,
                            "What are the current EC2 instances?"                             ,
                            "Can you start a new instance"                                    ,
                            "Can you stop the instance"                                       ,];

        let selectHtml = '<select id="prompt-select" style="background-color: azure; font-size:12px;padding:15px; width:100%;" size="12">';
        prompts.forEach(prompt => {
            selectHtml += `<option value="${prompt}">${prompt}</option>`;
        });
        selectHtml += '</select>';
        var textAreaHtml = `<textarea id="prompt-text" style="font-size:20px;padding:10px; width:100%; height:100%;">${initial_question}</textarea>`;
        var buttonHtml = '<button id="ask-button" class="btn-primary" style="font-size:30px; width:100%; height:100%;" onclick="send_prompt_to_api()"> Ask Odin</button>';
        var outputHtml = '<div id="output-area" style="margin:0px; font-color=white;padding:20px; overflow-y: auto; width:100%; height:100%; background-color: #001f3f"></div>';


        component_0 = { type          : 'component'         ,
                        title         : 'Command examples'          ,
                        componentName : 'odin_examples' ,
                        componentState: { label: 'Athena 1' } ,
                        isClosable    : false               }

        component_1 = { type          : 'component'         ,
                        title         : 'Odin Command'          ,
                        componentName : 'odin_chat_element' ,
                        componentState: { label: 'Athena 1' } ,
                        isClosable    : false               }
        component_2 = { type          : 'component',
                        title         : 'Send',
                        componentName : 'execute_button',
                        componentState: { label: 'Athena 2' } ,
                        height        : 10                    ,
                        width         : 15}
        component_3 = { type: 'component',
                        title: 'Response',
                        componentName: 'output-area',
                        componentState: { label: 'Athena ' }}
        var config = {content: [{ type: 'column',
                                  content: [ { type: 'row',
                                               content: [component_1, component_2, component_0],
                                               height : 20                        },
                                             { type: 'row',
                                               content: [component_3] } ]}]};

        var myLayout = new GoldenLayout( config , "#layout");

        myLayout.registerComponent( 'odin_examples', function( container, componentState ){
            container.getElement().html(selectHtml);
        });

        myLayout.registerComponent( 'odin_chat_element', function( container, componentState ){
            container.getElement().html(textAreaHtml);
        });
        myLayout.registerComponent( 'execute_button', function( container, componentState ){
            container.getElement().html( buttonHtml);
        });


        myLayout.registerComponent( 'output-area', function( container, componentState ){
            container.getElement().html(outputHtml);
        });

        myLayout.init();
        $('#output-area').css({color:'white'})

        var textArea = document.getElementById('prompt-text');
        textArea.addEventListener('keydown', function(event) {
            if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
                event.preventDefault();
                document.getElementById('ask-button').click();
            }
        });

        var select = document.getElementById('prompt-select');

        select.addEventListener('change', function() {
            textArea.value = this.value;
        });
        $('#ask-button' ).click()
    };

    function install_golden_layout(callback) {
        if (typeof GoldenLayout !== 'function') {
            $.getScript('/assets/plugins/golden-layout/goldenlayout.min.js', function() {
                //console.log('GoldenLayout has been loaded successfully!');
                callback()
            })
        }
        else {
            //console.log('GoldenLayout was already loaded ');
            callback()
        }
    }

    install_golden_layout(setup)

</script>
