{% extends "base.html" %}
{% block title %}{{ super() }}{% endblock %}
{% block head %}
    {{ super() }}
{% endblock %}
{% block content %}
    <header class="w3-container">
        <h2>{{ title }}</h2>
    </header>
    <div class="w3-container">
        <object data="{{ img_data }}" type="image/svg+xml"></object>
        <h2 id="message_title">Message <button type="submit" class="w3-button w3-border w3-padding-small w3-small w3-round-large" id="reload"><i class="fa fa-repeat"></i></button></h2>        
        <table class="w3-codespan" style="display: inline-block; color: black">
            {% for item in msg_items %}
            {% if item['id'] != 'msg' %}
            <tr>
                <td>{{ item['description'] }}</td>
                <td class="w3-right-align" style="padding-left: 40px" id="{{ item['id'] }}">{{ item['value'] }}</td>
            </tr>
            {% endif %}
            {% endfor %}
        </table>
        <br />
        <pre style="display: inline-block"><code class="w3-codespan yaml" id="msg">{{ msg }}</code></pre><br/>
        <h2>Publish Message</h2>
        <button class="w3-button w3-border w3-padding-small w3-small w3-round-large" id="copy_from_above">Copy last Message</button> <button class="w3-button w3-border w3-padding-small w3-small w3-round-large" id="reset">Reset</button><br />
        <form>
            <textarea class="w3-input w3-codespan" style="display: inline-block; width: 600px; color: black" rows="20" name="msg_pub" id="msg_pub">{{ msg_template }}</textarea><br />
            <button type="submit" class="w3-button w3-border w3-padding-small w3-small w3-round-large" id="publish">Publish</button>
        </form>
        <br />
        <script type=text/javascript>
            // Reload message
            $(function() {
                $('button#reload').bind('click', function() {
                    console.log('Requesting JSON');
                    $.getJSON('{{ url }}', {
                        get: 'json'
                    }, function(data) {
                        console.log('Got JSON result');
                        jQuery.each(data, function() {
                            $('#' + this['id']).html(this['value']);
                            if(this['id'] == 'msg') {
                                hljs.highlightBlock($('#' + this['id']).get(0));
                            }
                        });
                });
                return false;
                });
            });

            // Copy received message to "publish message" field
            $(function() {
                $('button#copy_from_above').bind('click', function() {
                    val = $('code#msg').text();
                    console.log('Copying message');
                    $('textarea#msg_pub').val(val);
                });
            });

            // Post request
            $(document).ready(function(){
                $("form").submit(function(event){
                    // Stop form from submitting normally
                    event.preventDefault();
                    
                    // Serialize the submitted form control values to be sent to the web server with the request
                    var formValues = $(this).serialize();
                    
                    // Send the form data using post
                    $.post("{{ url }}", formValues, function(data){
                        if(data['success'] == true)
                        {
                            alert('Message published');
                        }
                        else
                        {
                            alert('Failed sending message:\n' + data['error_msg']);
                        }
                    });
                });
            }); 

            // Reset
            orig_msg = $('textarea#msg_pub').val();
            $(function() {
                $('button#reset').bind('click', function() {
                    console.log('Copying message');
                    $('textarea#msg_pub').val(orig_msg);
                });
            });            
        </script>
    </div>
{% endblock %}
