{% extends '_layout/navbar.html' %}
{% load staticfiles %}
{% load crispy_forms_tags %}

{% block nav-events %}class="active"{% endblock %}
{% block title-extra %}Events{% endblock %}

{% block meta-extra %}
    <meta http-equiv="Content-Security-Policy" content="connect-src *">
{% endblock %}

{% block post-script %}
    <script>
        var host = "{{ tornado_host }}";
        var port = "{{ tornado_port }}";
        var token = "{{ request.session.salt_tornado_token }}";
    </script>
    <script src="{% static 'js/events.min.js' %}"></script>
{% endblock %}

{% block content %}
    <div class="page-header">
        <h1>Event streams <small id="conn_status"><i class="fa fa-fw fa-spin fa-circle-o-notch"></i> Connecting ...</small></h1>
    </div>

    <div class="row">
        <div class="col-md-6">
            <h2>Events</h2>

            <div id="eventholder">

                <!-- provide an template to copy events from -->
                <div id="event-template" class="event">
                    <div class="media">
                        <div class="media-left icon">
                            <!-- font awesome icon here please -->
                        </div>
                        <div class="media-body">
                            <p class="collapse-link"><a href="#" data-toggle="collapse"><i class="fa fa-fw fa-chevron-right"></i> <span class="title"></span></a></p>
                            <div class="collapse message"></div>
                        </div>
                    </div>
                    <span class="meta tag"></span>
                    <span class="meta timestamp"></span>
                    <span class="meta minion-id"></span>
                </div>
                <!-- end template -->
            </div>
        </div>
        <div class="col-md-6">
            <h2>Jobs</h2>
            <div id="jobholder">

                <!-- provide an template to copy jobs from -->
                <div id="job-template" class="job">
                    <p>
                        <strong class="timestamp"></strong>: <span class="tag"></span>
                    </p>
                </div>
                <!-- end template -->
            </div>
        </div>
    </div>
{% endblock %}