<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="{% module LocalCopy('/css/app.css') %}" />
        <script type="text/javascript"
        src="{% module LocalCopy('/js/sockjs.js') %}"></script>
        <script type="text/javascript"
        src="{% module LocalCopy('/js/jquery.min.js') %}"></script>
        <script type="text/javascript"
        src="{% module LocalCopy('/js/jquery.tmpl.js') %}"></script>
        <script type="text/javascript" 
        src="{% module LocalCopy('/js/jquery.isotope.js') %}"></script>
        <script type="text/javascript"
        src="{% module LocalCopy('/js/knockout-1.2.1.js') %}"></script>
        <script type="text/javascript" 
        src="{% module LocalCopy('/js/knockout.mapping.js') %}"></script>
        <link rel="icon" type="image/png" href="/static/favicon.ico" />
    </head>
    <script type="text/javascript">
        settings = {
            io: {
                host: 'http://' + window.location.hostname + ':{{ socket_port }}/{{ socket_handler }}'
            }
        };
    </script>
    <body>
        
        <div id="wrapper" class="cf">
            <!-- main actions menu -->
            <ul id="mainActions">
                <li>
                    <a href="#" id="showAddForm">Add log</a>
                </li>
                <li>
                    <a href="#" data-bind="click: app.clearAll">Clear all saved data</a>
                </li>
            </ul>
            <!-- end main actions menu -->
            
            
            <!-- contain screens -->
            <aside>
                
                <ul class="screens" data-bind="template: { name: 'window-inactive-list', foreach:screens}"></ul>
                <a href="#" id="showAddScreen">Add New Screen</a>

                <!-- screen item template -->
                <script id="window-inactive-list" type="text/html">
                    {% raw '{{' %}if  $data.isActive(){% raw '}}' %}
                    <li class="active">
                        <a href="#" data-bind="text: $data.name()"></a>
                    </li>
                    {% raw '{{' %}else{% raw '}}' %}
                    <li>
                        <a class="delete" href="#" class="remove" data-bind="visible: $data.isNotDefault(), click: $data.remove">X</a>
                        <a href="#" data-bind="text: $data.name(), click: $data.setActive"></a>
                    </li>
                    {% raw '{{' %}/if{% raw '}}' %}
                </script>
                <!-- end screen item -->
                
            </aside>
            <!-- end aside -->
            
            <section id="log-holder" class="cf" data-bind="template: { name:'window', foreach:logs}"></section>

            <!-- log item template -->
            <script id="window" type="text/html">
                <div class="item ${$data.setErrorClass()}" data-bind="visible: $data.isActiveScreenLog()">
                    <h5 data-bind="text: $data.name"></h5>
                    <a href="#" class="delete" data-bind="click: $data.remove">X</a>
                    <div class="body" data-bind="template: { name: 'message-item', foreach: $data.messages }"></div>
                    <div class="status-bar" data-bind="text: $data.error"></div>
                </div>
            </script>
            <!-- end log item template -->
            
            <!-- message template for item -->
            <script id="message-item" type="text/html">
                <span data-bind="text: $data"></span>
            </script>
            <!-- end message template -->
            
            <!-- -------------------  -->
            <!--      overlays        -->
            <!-- -------------------  -->
            <div id="log-form-holder" class="overlay" data-bind="template: 'addLog'"></div>

            <!-- add log form template  -->
            <script id="addLog" type="text/html">
                <div class="holder greeting">
                    <a href="#" class="close">X</a>
                    <form  data-bind="submit: app.addLog">
                        <p data-bind="text: staticText.addLogMessage, visible: !app.data.isFirstLog()"></p>
                        <p data-bind="text: staticText.greeting, visible: app.data.isFirstLog()"></p>
                        <p>
                            <label for="screen-select">Choose screen:</label>
                            <select id="screen-select" multiple="multiple" data-bind="options: screens, optionsText: 'name', optionsValue: 'name'"></select>
                        </p>
                        <p>
                            <label for="log-name">Enter log name:</label>
                            <input  type="text" id="log-name" />
                        </p>
                        <p>
                            <label for="log-source">Enter log source:</label>
                            <input  type="text" id="log-source" />
                        </p>
                        <p style="text-align: right">
                            <input type="submit" value="Add" />						
                        </p>
                    </form>
                </div>
            </script>
            <!-- end add log form template  -->

            <div id="screen-form-holder" class="overlay" data-bind="template: 'add-screen'"></div>

            <!-- add screen form template  -->
            <script id="add-screen" type="text/html">
                <div class="holder screen">
                    <a href="#" class="close">X</a>
                    <form  data-bind="submit: app.addScreen">
                        <p data-bind="text: staticText.addScreenMessage"></p>
                        <p>
                            <label for="screen-name">Choose name:</label>
                            <input type="text" id="screen-name" />
                        </p>
                        <p style="text-align: right">
                            <input type="submit" value="Add" />						
                        </p>
                    </form>
                </div>
            </script>
            <!-- end add screen form template  -->

        </div>

        <script type="text/javascript" src="/static/js/app.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                app.init();
            });
        </script>
    </body>
</html>
