{% extends "apps/base.html" %}
{% load staticfiles %}

{% block extra_css %}
<style>
h1 {
    display: inline-block;
}

.graph-container .graph {
        width: 100%;
        height: 500px;
}
</style>
{% endblock %}

{% block navbar %}
    {% include "apps/navbar.html" with active="metrics" %}
{% endblock %}

{% block app-content %}
	<div class="row">
		<div class="col-md-12">
			<form method="GET">
				<div class="col-md-2">
				<label>Time range:</label>
				<select name="from">
					<option value="1h">last hour</option>
					<option value="3h">last 3 hours</option>
					<option value="6h">last 6 hours</option>
					<option value="12h">last 12 hours</option>
					<option value="1d">last 24 hours</option>
					<option value="3d">last 3 days</option>
					<option value="1w">last 1 week</option>
					<option value="2w">last 2 weeks</option>
				</select>
				</div>
				<div class="col-md-2">
				<label>Period:</label> 
				<select name="serie">
					<option value="1m">1 minute</option>
					<option value="5m">5 minutes</option>
					<option value="15m">15 minutes</option>
					<option value="1h">1 hour</option>
					<option value="6h">6 hours</option>
					<option value="1d">1 day</option>
				</select>
				</div>
				<div class="col-md-1">
				<input type="hidden" name="kind">
				<input type="submit" value="filter">
				</div>
			</form>
		</div>
	</div>

<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
            <div class="content">
                <div class="row">
                    <div class="col-md-12" id="metrics">
               		</div>
                </div>
            </div>
		</div>
	</div>
</div>

<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
            <div class="content">
                <div class="row">
                    <div class="col-md-12" id="top-slow">
                    </div>
                </div>
            </div>
		</div>
	</div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot.tooltip/0.8.5/jquery.flot.tooltip.js"></script>
<script src="{% static "js/metric.js" %}"></script>
<script src="{% static "js/top-slow.js" %}"></script>
{% endblock %}