<html>
  <head>
    <title>Graphlot</title>
    <script type="text/javascript" src="../content/js/jquery.js"></script>
    <script type="text/javascript" src="../content/js/jquery.flot.js"></script>
    <script type="text/javascript" src="../content/js/jquery.autocomplete.js"></script>
    <script type="text/javascript" src="../content/js/jquery.flot.selection.js"></script>
    <script type="text/javascript" src="../content/js/jquery.flot.crosshair.js"></script>
    <script type="text/javascript" src="../content/js/jquery.graphite.js"></script>

    <link rel="stylesheet" type="text/css" href="../content/css/jquery.autocomplete.css" />
    <link rel="stylesheet" type="text/css" href="../content/css/table.css" />
    
    <script type="text/javascript">

    $(document).ready(function () {
        $('.graphite').graphiteGraph();
    });

    </script>


    <style type="text/css">
    body {
        font-family: sans-serif;
        font-size: 16px;
        margin: 50px;
        max-width: 1200px;
    }

    .ajaxerror {
        background: #ff0000;
    }
    .ajaxworking {
        background: #0000ff;
    }
    </style>


    </head>
    <body>
        <div id="title" style="text-align:center">
            <h1>graphlot</h1>
        </div>
        <div class="graphite">
            <div id="main" >
                <div id="canvas" style="padding:15px">
                    <div id="graphcontainer" style=float:left;">
                        <div id="graph" style="width:600px;height:300px"></div>
                        <div id="overview" style="width:600px;height:66px"></div>
                    </div>
                    <div id="side" style="float:left">
                        <p id="legend" style="margin-left:10px"></p>
                    </div>
                    <p style="clear:left">&nbsp</p>
                </div>
                <br/>

                <table id="rowlist" class="styledtable"  style="float:left">
                <tr><th  style="width:750px">events</th></tr>
                <tr id="eventsrow"><td><input class="event_tags" style="width:600px" type="text" id="eventdesc" value="{{events}}"/></td></tr>
                </table>
                
                <table id="rowlist" class="styledtable"  style="float:left">
                <tr><th  style="width:750px">metric</th><th>y-axis</th></tr>
                {% for metric in metric_list %}
                    <tr class="metricrow">
                        <td><a href=#><span class="metricName">{{metric.name}}</span></a>
                        </td>
                        <td><a href=#><span class="yaxis">{{metric.yaxis}}</span></a>
                        </td>
                        <td class="killrow"><img src="../content/img/delete.png">
                        </td>
                    </tr>
                {% endfor %}
                
                <tr id="newmetricrow"><td><input style="width:600px" type="text" id="newmetric"/></td></tr>
                </table>

                 <table id="bounds" class="styledtable"  style="float:right">
                    <tr><th>From</th><th>To</th></tr>
                    <tr>
                        <td><a href=#><span id="from">{{fromtime}}</span></a></td>
                        <td><a href=#><span id="until">{{untiltime}}</span></a></td>
                    </tr>
                    <tr> <td colspan="2" style="text-align:center">
                        <a href=#><span id="update">update</span></a>
                    </td></tr>
                    <tr> <td colspan="2" style="text-align:center">
                        <a href=#><span id="clearzoom">clear zoom</span></a>
                    </td></tr>
                    <tr> <td colspan="2" style="text-align:center">
                        <a href=# id="graphurl">link to graph</a>
                    </td></tr>
                </table>
            </div>

        </div>
    </body>
</html>