%# Note that this file is not a valid *.html file!
%# It is intended to be a bottlepy - style template
%# used for the scripting part of TheOnionBox!

{{!header_row('Tor', 'Monitoring', 'monitor')}}

<div class="row">
    <div class="{{box_datum_grid}}">Charts</div>
    <div class="{{box_value_grid}} box_value_margin">
        <div class="btn-toolbar pull-left" role="group">
            <div class="btn-group btn-group-toggle" data-toggle="buttons" id="monitor_buttons">
                <label id="monitor_button_1s" class="btn btn-outline-secondary box_chart_button active"
                       role="button" onclick="monitor_goto_slide(0)">
                    <input type="radio" autocomplete="off" checked>Minutes
                </label>
            </div>
        </div>
    </div>
    <div class="col-1"></div>
</div>

<div class="row">
    <div class="{{box_datum_grid}}">Bandwidth</div>
    <div class="{{box_value_grid}} box_value_margin">

        <div id="monitor_glide" class="glide">

            <div class="glide__track" data-glide-el="track" id="monitor_track">
                <ul class="glide__slides" id="monitor_slides" style="margin: 0">
                    <li class="glide__slide glide__slide__monitor" id="monitor_glide_1s">
                        <canvas class="bw_chart box_canvas"
                                id="monitor_canvas_1s"
                                width="300" height="240"
                                style="vertical-align: middle">
                        </canvas>
                    </li>
                </ul>
            </div>


            <div class="glide__arrows" data-glide-el="controls">
                <button class="glide__arrow glide__arrow--left" data-glide-dir="<" style="font-family:'LatoLatinWebLight'; font-size: 14px">prev</button>
                <button class="glide__arrow glide__arrow--right" data-glide-dir=">" style="font-family:'LatoLatinWebLight'; font-size: 14px">next</button>
            </div>

            <div class="glide__bullets" data-glide-el="controls[nav]" id="monitor_bullets">
                <button class="glide__bullet" data-glide-dir="=0"></button>
            </div>

        </div>
    </div>
    <div class="{{box_right_grid}}"></div>
</div>
<!--<div class="row">
    <div class="{{box_datum_grid}}"></div>
    <div class="{{box_value_grid}} box_value_margin" style="color: lightgrey;" id="monitor_detail">
        Resolution: 1 Second | Source: Live from Tor.
    </div>
    <div class="{{box_right_grid}}"></div>
</div>-->

<div class="row">
    <div class="{{box_datum_grid}}" style="color: #64B22B">Upload</div>
    <div class="{{box_value_grid}} box_value_margin" id="bw_up">
        Total: 0 Bytes | Current: 0 Bytes/s
    </div>
    <div class="{{box_right_grid}}"></div>
</div>

<div class="row">
    <div class="{{box_datum_grid}}" style="color: rgb(132, 54, 187)">Download</div>
    <div class="{{box_value_grid}} box_value_margin" id="bw_down">
        Total: 0 Bytes | Current: 0 Bytes/s
    </div>
    <div class="{{box_right_grid}}"></div>
</div>

<!--<div class="row">
    <div class="{{box_datum_grid}}">Data Source</div>
    <div class="{{box_value_grid}}">
        <p id="bw_source">
            Live Chart monitoring Tor node
        </p>
    </div>
    <div class="col-1"></div>
</div>-->
<!--
<div class="row">
    <div class="{{box_datum_grid}}">Upload</div>
    <div class="{{box_value_grid}}">
        <p>
            <canvas class="bw_chart box_canvas" id="monitor-bw-written" width="300" height="150" style="vertical-align: middle"></canvas>
        </p>
    </div>
    <div class="col-1"></div>
</div>
-->
<hr>