{% extends "template.html" %}


{% block "content" %}

<h3>Category <u>{{event_category.name}}</u>
    <small>from project {{project.name}}</small>
</h3>


<h3>General stats</h3>
<p><strong>Total events: </strong>{{event_count}}</p>
<p><strong>Last event submitted: </strong>{{last_submit_time}}</p>
<p><strong>Last event's source: </strong>{{last_submit_source}}</p>

<hr>

<a href="/events?query=select%20%22{{event_category.name}}%22%20where%20__timestamp__%20%3E%3D%201h">
    <button class="btn btn-default">View from last hour</button>
</a>
<a href="/events?query=select%20%22{{event_category.name}}%22%20where%20__timestamp__%20%3E%3D%2024h">
    <button class="btn btn-default">View from last 24h</button>
</a>
<a href="/events?query=select%20%22{{event_category.name}}%22%20where%20__timestamp__%20%3E%3D%2072h">
    <button class="btn btn-default">View from last three days</button>
</a>

<hr>


<div class="col-sm-12 col-xs-12">
    <h3><a href="#" onclick="$('#usage-info').toggle();">Submitting events</a></h3>
    <div class="section" hidden id="usage-info">
        <div class="section-body">
            <div role="tabpanel">
                        <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#raw_http" aria-controls="home" role="tab"
                                                              data-toggle="tab" aria-expanded="true">Raw HTTP requests</a>
                    </li>
                    <li role="presentation"><a href="#python" aria-controls="home" role="tab"
                                                       data-toggle="tab" aria-expanded="true">Using Python</a>
                    </li>

                        </ul>
                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="raw_http">
                                <p>
                                    Make raw HTTP <code>POST</code> requests to <code>/api</code> with the body:
                                </p>
<pre><code id="html_code_snippet">
</code></pre>


                            </div>
                            <div role="tabpanel" class="tab-pane" id="python">
                                <p>You will need the <code>eventer-client</code> library.</p>

<pre><code class="python">
from eventer_client import Event

event = Event(category="{{event_category.id}}", url="http://host:port/api")

{% for fieldspec in event_category.fields %}event.{{fieldspec.name}} = "{{fieldspec.type}} value"<br>{% end %}

event.submit()

</code></pre>
                            </div>
                        </div>
                    </div>
    </div>
</div>



<script>
    $(document).ready(function () {
        var htmlSnippet = {
            "jsonrpc": "2.0",
            "method": "submit_event",
            "params": {
                "source": "Your name",
                "category": "{{ event_category.id }}",
                "values": {}
            }
        };
        {% for fieldspec in event_category.fields %}
        htmlSnippet["params"]["values"]["{{fieldspec.name}}"] = "{{fieldspec.type}} value";
        {% end %}

        $("#html_code_snippet").html(JSON.stringify(htmlSnippet, null, 4));
    })
</script>
{% end %}