<!DOCTYPE HTML>
<html>

<head>
    {% block meta %}
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% endblock %}

    <title>
        {%block title%}Falcon+{%endblock%}
    </title>

    {% block css %}
        <link href="{{url_for('static', filename='bootstrap3/css/bootstrap.min.css')}}" rel="stylesheet">
        <link href="{{url_for('static', filename='select2/select2.css')}}" rel="stylesheet">
        <link href="{{url_for('static', filename='layer/skin/layer.css')}}" rel="stylesheet">
        <link href="{{url_for('static', filename='css/select2-bootstrap.css')}}" rel="stylesheet">
        <link href="{{url_for('static', filename='bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css')}}" rel="stylesheet"> </link>
        <link rel="stylesheet" href="{{url_for('static', filename='bootstrap-tokenfield/css/bootstrap-tokenfield.min.css')}}">
        <link href="/static/css/base.css?v=0.1.0" rel="stylesheet">
        <link href="{{url_for('static', filename='css/g.css')}}" rel="stylesheet">
        <style>
            body {
                font-size:12px;
                font-family: 'verdana', 'Microsoft YaHei', 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono';
            }
            select {font-size:12px;}
            input {font-size:12px;}
        </style>
    {% endblock %}

    {% block head_js %}
        <script src="{{url_for('static', filename='js/jquery.min.js')}}"></script>
        <script src="{{url_for('static', filename='layer/layer.min.js')}}"></script>
        <script src="{{url_for('static', filename='js/g.js')}}"></script>
        <script type="text/javascript" src="{{ url_for('static', filename='layer/extend/layer.ext.js') }}"></script>
        <script src="{{url_for('static', filename='js/jquery.query.js')}}"></script>
        <script src="{{url_for('static', filename='bootstrap3/js/bootstrap.min.js')}}"></script>
        <script src="{{url_for('static', filename='js/moment.min.js')}}"></script>
        <script src="{{url_for('static', filename='select2/select2.min.js')}}"></script>
        <script src="{{url_for('static', filename='bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js')}}"></script>
        <script src="{{url_for('static', filename='bootstrap-tokenfield/bootstrap-tokenfield.min.js')}}"></script>
        <script type="text/javascript" src="{{ url_for('static', filename='js/moment-with-locales.js') }}"></script>
        <script>
            function readablizeBytes(size) {
                if (size <= 100000){
                    return '' + size;
                }

                var SizePrefixes = ' KMGTPEZYXWVU';
                if(size <= 0) return '0';
                var t2 = Math.min(Math.round(Math.log(size)/Math.log(1000)), 12);
                return (Math.round(size * 100 / Math.pow(1000, t2)) / 100) +
                      SizePrefixes.charAt(t2).replace(' ', '') + '';
            }

            function formatSize(size1, standard) {
                var size = parseFloat(size1);
                if (standard) {
                    standard = standard.toLowerCase();
                }
                if(size<=1){
                    return size.toFixed(3);
                }

                var n = 0,
                    base = standard == 'si' ? 1000 : 1024,
                    prefixes = ' KMGTPEZY';

                if (size >= base) {
                    n = Math.floor( Math.log(size) / Math.log(base) );

                    if (n >= prefixes.length) {
                        return 'N/A';
                    }

                    size = ( size / Math.pow(base, n) ).toFixed(3) * 1 + '';
                }else{
                    size = size.toFixed(3)
                }

                return size + prefixes[n] + ( n && standard == 'iec' ? 'i' : '' ) + '';
            }
        </script>

    {% endblock %}

    {% block more_head %}
    {% endblock %}
</head>

{%block body_head%}
<body style="height:100%; padding-top: 0px; padding-bottom: 40px; font-size:12px;">
{%endblock%}

    {%block navbar%} {%endblock%}
    {% block more_css%} {% endblock %}
    {% block more_js%} {% endblock %}
    {% block nav%} {% endblock %}

    {% block container_outer %}
    <div id="container" class="container-fluid" style="min-height:350px; width=100%">
        {% block container %} {% endblock %}
    </div>
    {% endblock %}
    <div id="tooltip" style="position: absolute; border: 1px solid rgb(215, 234, 252);z-index: 999; padding: 2px; opacity: 0.8; top: 511px; left: 362px; display: none; background-color: rgb(215, 234, 252);font-family:sans-serif;color:rgb(26,26,26);"></div>
    <div style="display: none;" id="loading-container" class="wrap-loading"><div class="loading2"></div></div>
    <div class="modal fade" id="editModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">{{ _('batch edit') }} Graph</h4>
                </div>
                <div class="modal-body">
                    <div class="edit-area">

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"> {{ _('Close') }}</button>
                    <button type="button" class="btn btn-primary editModalYes">{{ _('OK') }}</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/template" id="tpl-edit">
        <% _.each(charts, function(c) { %>
        <form class="form-horizontal" role="form">
            <h4 class="title"><%- c.title %></h4>
            <span class="id hide"><%- c.id %></span>
            <div class="form-group">
                 <label class="control-label col-md-2" for="hosts">Endpoints</label>
                 <div class="col-md-8">
                     <textarea class="form-control endpoints" name="" rows="5"><%- c.endpoints.join("\n") %></textarea>
                 </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-2" for="counters">Counters</label>
                <div class="col-md-8">
                    <textarea class="form-control counters" required="" rows="5"><%- c.counters.join("\n") %></textarea>
                </div>
            </div>
        </form>
        <% }); %>
    </script>
</body>

</html>
