{% extends "layouts/default_ext.html" %}

{% block title %} Case Graph Timeline {% endblock title %}

{% block stylesheets %}
<link rel="stylesheet" href="/static/assets/css/bootstrap-datetime.css">
<link rel="stylesheet" href="/static/assets/css/suggestags.css">
<link rel="stylesheet" href="/static/assets/css/bootstrap-select.min.css">
<link rel="stylesheet" href="/static/assets/css/select2.css">
<link rel="stylesheet" href="/static/assets/css/vis.graph.css">

{% endblock stylesheets %}

{% block content %}

{% include 'includes/navigation_ext.html' %}


{% include 'includes/sidenav.html' %}
<div class="main-panel">
    <div class="content">
        <nav class="navbar navbar-header navbar-expand-lg bg-primary-gradient">
            <ul class="container-fluid mt-3 mb--2">
                <ul class="navbar-nav">
                    <li class="nav-item hidden-caret">
                        <a class="menu-title btn btn-dark btn-sm" href="visualize?cid={{session['current_case'].case_id}}">No group</a>
                    </li>
                    <li class="nav-item hidden-caret">
                        <a class="menu-title btn btn-dark btn-sm" href="visualize?cid={{session['current_case'].case_id}}&group-by=asset"><span class="text-decoration-none">Group by asset</span></a>
                    </li>
                    <li class="nav-item hidden-caret">
                        <a class="menu-title btn btn-dark btn-sm" href="visualize?cid={{session['current_case'].case_id}}&group-by=category">Group by category</a>
                    </li>
                 </ul>
                <ul class="navbar-nav topbar-nav ml-md-auto align-items-center page-navigation page-navigation-style-2 page-navigation-secondary">
                    <li class="nav-item ml-2">
                            <span class="text-white text-sm mr-2" id="last_resfresh">Loading</span>
                    </li>
                    <li class="nav-item hidden-caret">
                        <button class="btn btn-primary btn-sm" onclick="refresh_timeline_graph();">
                            <span class="menu-title">Refresh</span>
                        </button>
                    </li>
                </ul>
            </ul>
        </nav>

        <div class="loader1 text-center ml-mr-auto" id="loading_msg">Loading...</div>
        <div class="page-inner">
            <div class="row">
                <div class="col-12">

                     <div class="card" id="card_main_load" style="display:none;">
                            <div class="card-body">
                                <div id='visualization'></div>
                            </div>
                     </div>
                </div>
            </div>
        </div>
    </div>
        {% include 'includes/footer.html' %}
</div>

{% endblock content %}

{% block javascripts %}

<script src="/static/assets/js/core/moments.min.js"></script>

<script src="/static/assets/js/plugin/tagsinput/suggesttag.js"></script>
<script src="/static/assets/js/plugin/select/select2.js"></script>
<script src="/static/assets/js/plugin/select/bootstrap-select.min.js"></script>

<script src="/static/assets/js/iris/case.common.js"></script>
<script src="/static/assets/js/iris/case.timeline.visu.js"></script>
<script src="/static/assets/js/plugin/vis/vis.graph.js"></script>
<script>
$(document).ready(function(){
   show_loader();
   refresh_timeline_graph();
});
</script>

{% endblock javascripts %}