{% extends 'settings.html' %}

{% block tab_actions %}active{% end %}

{% block section_active %}actions{% end %}

{% block extra_head %}
    <script type="text/javascript" src="{{ static_url('libs/ace/src-min-noconflict/ace.js') }}"></script>
    <script>
        $(function(){
            var editor = ace.edit("data");
            editor.setTheme("ace/theme/monokai");
            editor.renderer.setShowGutter(false);
            editor.setShowPrintMargin(false);
            editor.setFontSize(12);
            editor.getSession().setMode('ace/mode/json');
            editor.getSession().setUseSoftTabs(true);
            editor.getSession().setUseWrapMode(true);
            editor.getSession().setMode("ace/mode/json");

            $('form').on('submit', function(){
                var val = editor.getSession().getValue();
                alert(val);
                alert(JSON.parse(val));
                alert(JSON.stringify(JSON.parse(val)));
            });
        })
    </script>
{% end %}

{% block section %}

    <legend>{{_("Admin API actions")}}</legend>
    <div class="row-fluid">
        <ul class="pagination">
            <li class="active" data-form-element="data">
                <a href="#" title="Send new JSON message into specific channel">
                    Publish
                </a>
            </li>
            <li>
                <a href="#">
                    History
                </a>
            </li>
            <li>
                <a href="#">
                    Presence
                </a>
            </li>
            <li data-form-element="user">
                <a href="#">
                    Unsubscribe
                </a>
            </li>
        </ul>
    </div>
    <div class="row-fluid">
        <div class="col-lg-6">
            <form role="form">
                <div class="form-group">
                    <label for="namespace">Namespace</label>
                    <select class="form-control" style="width: 100%;" id="namespace">
                        {% for namespace in namespaces %}
                            <option value="{{ namespace['name'] }}">{{ namespace['name'] }}</option>
                        {% end %}
                    </select>
                </div>
                <div class="form-group">
                    <label for="channel">Channel</label>
                    <input type="text" class="form-control"  style="width: 100%;" id="channel">
                </div>
                <div class="form-group form-optional">
                    <label for="user">User ID</label>
                    <input type="text" class="form-control"  style="width: 100%;" id="user">
                </div>
                <div class="form-group form-optional">
                    <label for="data">Data</label>
                    <div style="width: 100%; height: 100px;" id="data"></div>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
        <div class="col-lg-6">
            <h3 class="text-muted">Result will be here</h3>
        </div>
    </div>
{% end %}