{% extends "layout.html" %}

{% block body %}
<h2 style="text-align: center;">
    Anomalies
</h2>
<hr>
<h4>
    Point Selector
</h4>
<div id="anomaly-container">
    <form id="series-0" class="series">
        <span class="form-group">
            <label class="form-label">Building</label>
            <select class="building" multiple></select>
        </span>
        <span class="form-group">
            <label class="form-label">Floor</label>
            <select class="floor" multiple></select>
        </span>
        <span class="form-group">
            <label class="form-label">Room</label>
            <select class="room" multiple>
            </select>
        </span>
        <span class="form-group" style="display: none;">
            <label class="form-label">Device</label>
            <select class="device" multiple></select>
        </span>
        <span class="form-group">
            <label class="form-label">Point</label>
            <select class="point" multiple></select>
        </span>
        <span class="form-group">
            <label class="form-label">Tag</label>
            <select class="tag" multiple></select>
        </span>
        <span class="form-group">
            <label class="form-label">Type</label>
            <select class="type" multiple></select>
        </span>
        <span class="form-group">
            <label class="form-label">Unit</label>
            <select class="unit" multiple></select>
        </span>
        <span class="form-group">
            <label class="form-label">Measurement</label>
            <select class="measurement" multiple></select>
        </span>
        <p class="point-verification-text"></p>

        <p class="value-verification-text"></p>
        <br>
        <br>
    </form>
</div>
<div class="row">
    <div id="foobar" class="col-md-8 form-inline col-md-offset-2">
        <div class="col-md-3">
            <input id="value-query" type="text" class="value-query form-control" placeholder="Value Query (E.g: '~< 62')"
                   style="width: 100%;"/>
        </div>
        <div class=" form-group col-md-4">
            <div id="timepicker" class="input-group" style="width: 100%">
                <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                <input type="text" class="form-control" name="datetimes" id="daterange"
                       style="background-color: white; cursor: pointer" readonly/>
            </div>
        </div>
        <div class="form-group col-md-5">
            <button type="button" id="submit-search-query" type="button" class="btn btn-primary"
                    style="background-color: #563d7c">Graph
            </button>
            <button type="button" id="create-rule" class="btn btn-secondary">Create Alert Rule</button>
            <button id="reset-form" type="button" class="btn btn-danger">
                Reset
            </button>
        </div>
    </div>
    <div class="col-md-2">
        <p id="point-verification-text"></p>
    </div>
</div>
<hr>

<div id="graph">
    <div class="col-md-8 svg" id="visualization"></div>
    <div class="col-md-2" id="anomalous-points"></div>
</div>


<div id="result-table" hidden>
    <table class="table">
        <thead>
        <tr>
            <th>Point Name</th>
            <td>Timestamp</td>
            <td>Value</td>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<script>
    $("a").removeClass("active");
    $("#anomalies-link").addClass("active");
</script>

<script type="text/javascript" src="../static/js/anomaliesgraph.js"></script>
<script src="../static/js/anomalies.js"></script>
<script type="text/javascript" src="../static/js/search_engine.js"></script>
{% endblock %}