{% extends "base.html" %}

{% block navbar %}
  {% module Template("navbar.html", active_tab="monitor", absolute_url=absolute_url) %}
{% end %}

{% block container %}

<div class="container-fluid">
    <a name="succeeded"></a>
    <div class="row-fluid spacer">
        <div class="graph content">
            <div class="span2">
                <form class="side-panel">
                    <a href="#succeeded"><h3>Succeeded tasks</h3></a>
                    <section><div id="legend-succeeded" class="legend"></div></section>
                </form>
            </div>
            <div class="chart-container">
                <div id="chart-succeeded" class="chart"></div>
                <div id="timeline-succeeded" class="timeline"></div>
                <div id="slider-succeeded" class="slide"></div>
            </div>
        </div>
    </div>
    <a name="failed"></a>
    <div class="row-fluid spacer">
        <div class="graph content">
            <div class="span2">
                <form class="side-panel">
                    <a href="#failed"><h3>Failed tasks</h3></a>
                    <section><div id="legend-failed" class="legend"></div></section>
                </form>
            </div>
            <div class="chart-container">
                <div id="chart-failed" class="chart"></div>
                <div id="timeline-failed" class="timeline"></div>
                <div id="slider-failed" class="slider"></div>
            </div>
        </div>
    </div>
    <a name="times"></a>
    <div class="row-fluid spacer">
        <div class="graph content">
            <div class="span2">
                <form class="side-panel">
                    <a href="#times"><h3>Task times</h3></a>
                    <section><div id="legend-time" class="legend"></div></section>
                </form>
            </div>
            <div class="chart-container">
                <div id="chart-time" class="chart"></div>
                <div id="timeline-time" class="timeline"></div>
                <div id="slider-time" class="slider"></div>
            </div>
        </div>
    </div>
    <a name="broker"></a>
    <div class="row-fluid spacer">
        <div class="graph content">
            <div class="span2">
                <form class="side-panel">
                    <a href="#broker"><h3>Broker</h3></a>
                    <section><div id="legend-broker" class="legend"></div></section>
                </form>
            </div>
            <div class="chart-container">
                <div id="chart-broker" class="chart"></div>
                <div id="timeline-broker" class="timeline"></div>
                <div id="slider-broker" class="slide"></div>
            </div>
        </div>
    </div>
</div>

{% end %}