<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8"/>
    <title>Simple Environment Monitor System</title>

    <link rel="stylesheet" href="{{ static_url("bootstrap.css") }}" type="text/css" />
    <link rel="stylesheet" href="{{ static_url("bootstrap-theme.css") }}" type="text/css" />
    <link rel="stylesheet" href="{{ static_url("dashboard.css") }}" type="text/css" />
</head>

<body>

    <div id="container">

        <div class="row" id="commands">
            <div class="col-md-12">
                <h1>Simple Environment Monitor System</h1>

                 <div id="commands-wrap">
                    <a href="#" id="new-monitor" class="btn btn-primary pull-right">Add New Monitor</a>
                    <div class="clear"></div>
                    <div id="form-wrap-monitor" class="wrap-monitor hidden">
                        <form id="form-monitor" action="/api/monitors" method="post">
                            <div class="form-group">
                                <label for="monitor-type">Type:</label>
                                <select name="monitor-type" id="monitor-type" class="form-control">
                                    {% for monitor_type in monitor_types %}
                                        <option value="{{monitor_type[1]}}">{{monitor_type[0]}}</option>
                                    {% end %}
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="monitor-group">Group:</label>
                                <input type="text" name="group" id="monitor-group" class="form-control" />
                            </div>

                            <div class="form-group">
                                <label for="monitor-label">Label:</label>
                                <input type="text" name="label" id="monitor-label" class="form-control" />
                            </div>

                            <div class="form-group">
                                <label for="monitor-url">Url or Host:</label>
                                <input type="text" name="url" id="monitor-url" class="form-control" />
                            </div>

                            <div id="custom-fields" class="form-group"></div>

                            <input type="submit" value="Save" class="btn btn-primary pull-right" />
                            <div class="clear"></div>
                        </form>
                    </div>
                 </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div id="groups-wrap">
                    <ul class="nav nav-tabs">
                        {% if "" in groups_monitors %}
                            <li><a href="#" data-group="">Default</a></li>
                        {% end %}

                        {% for group in groups %}
                            {% if group %}
                                <li><a href="#" data-group="{{group}}">{{group}}</a></li>
                            {% end %}
                        {% end %}
                    </ul>
                </div>
                <div id="monitors">
                    {% for group in groups_monitors %}
                        <div class="group-wrapper hidden" data-container-group="{{group}}">
                            {% for monitor in groups_monitors[group] %}
                                <div class="monitor-entry alert alert-success">
                                    <h2>
                                        <a class="monitor-label" href="{{monitor.url}}" target="_blank">{{monitor.label}}</a>
                                    </h2>
                                    <hr />
                                    <p>
                                        <span class="monitor-url">{{monitor.url}}</span>
                                    </p>
                                    <p>
                                        <span class="monitor-status"></span>
                                    </p>
                                    <a href="#" class="monitor-remove btn btn-xs btn-danger pull-right">remover</a>
                                </div>
                            {% end %}
                        </div>

                    {% end %}
                </div>
            </div>

        </div>

    </div>

    <script src="/static/rest_client.js"></script>
    <script src="/static/monitor_form.js"></script>
    <script src="/static/monitor.js"></script>
    <script src="/static/sortable.min.js"></script>
    <script src="/static/dashboard.js"></script>
</body>

</html>

