{{ define "body" }}
            <h3></h3>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-3 col-md-6">
            <div class="panel panel-primary">
               <div class="panel-heading">
                   <div class="row">
                      <div class="col-xs-3">
                          <i class="fa fa-list-alt fa-5x"></i>
                      </div>
                      <div class="col-xs-9 text-right">
                          <div class="huge">{{ .NumAccounts }}</div>
                          <div>Accounts</div>
                      </div>
                   </div>
               </div>
               <a href="{{ .RequestBase }}/accounts">
                   <div class="panel-footer">
                       <span class="pull-left">View Details</span>
                       <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                       <div class="clearfix"></div>
                   </div>
                </a>
            </div>
        </div>


        <div class="col-lg-3 col-md-6">
            <div class="panel panel-green">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-3">
                            <i class="fa fa-lock fa-5x"></i>
                        </div>
                        <div class="col-xs-9 text-right">
                            <div class="huge">{{ .NumCerts }}</div>
                            <div>Certificates</div>
                        </div>
                    </div>
                </div>
                <a href="{{ .RequestBase }}/certificates?active=1">
                    <div class="panel-footer">
                        <span class="pull-left">View Details</span>
                        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                        <div class="clearfix"></div>
                    </div>
                </a>
            </div>
        </div>

        <div class="col-lg-3 col-md-6">
            <div class="panel panel-yellow">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-3">
                            <i class="fa fa-clock-o fa-5x"></i>
                        </div>
                        <div class="col-xs-9 text-right">
                            <div class="huge">{{ .NumExpired }}</div>
                            <div>Expired Certs</div>
                        </div>
                    </div>
                </div>
                <a href="{{ .RequestBase }}/certificates?expired=1">
                    <div class="panel-footer">
                        <span class="pull-left">View Details</span>
                        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                        <div class="clearfix"></div>
                    </div>
                </a>
            </div>
        </div>

        <div class="col-lg-3 col-md-6">
            <div class="panel panel-red">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-3">
                            <i class="fa fa-times fa-5x"></i>
                        </div>
                        <div class="col-xs-9 text-right">
                            <div class="huge">{{ .NumRevoked }}</div>
                            <div>Revoked Certs</div>
                        </div>
                    </div>
                </div>
                <a href="{{ .RequestBase }}/certificates?revoked=1">
                    <div class="panel-footer">
                        <span class="pull-left">View Details</span>
                        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                        <div class="clearfix"></div>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            {{ if ne .Standalone true }}
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-fw fa-tasks"></i> Boulder (ACME) Activity
                </div>
                <div class="panel-body">
                    <div class="list-group mb0">
                    {{ range $item := .Activity }}
                        <div class="list-group-item{{ if $item.Class }} {{ $item.Class }}{{ end }} hide-overflow" title="{{ $item.Title }}">
                            {{ $item.Message }}
                            <span class="pull-right text-muted small" title="{{ $item.Timestamp }}"><em>{{ $item.TimestampRel }}</em></span>
                        </div>
                    {{ end }}
                    </div>
                </div>
                <a href="{{ .RequestBase }}/logs/audit">
                    <div class="panel-footer">
                        <span class="pull-left">View Details</span>
                        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                        <div class="clearfix"></div>
                    </div>
                </a>
            </div>
            {{ end }}
        </div>

        <div class="col-lg-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <span class="pull-left"><i class="fa fa-fw fa-desktop"></i> System Overview</span>
                    {{ if .UpdateAvailable }}
                    <span class="pull-right">
                        <a class="update" href="{{ .RequestBase }}/manage"><i class="fa fa-fw fa-rocket"></i> <i>update available!</i></a>
                    </span>
                    {{ end }}
                    <div class="clearfix"></div>
                </div>
                <div class="panel-body">
                    <div class="table-responsive" id="dashboard-stats">
                        {{ if .Components }}
                        <table class="table table-bordered mb15">
                            <tbody>
                            {{ range $item := .Components }}
                                <tr>
                                    <td rowspan="3">{{ $item.Name }}</td>
                                    <td class="pad-low-bottom">Uptime</td>
                                    <td class="pad-low-bottom" title="{{ $item.Timestamp }}">
                                        <span class="pull-right{{ if $item.Class }} {{ $item.Class }}{{ end }}">{{ $item.TimestampRel }}
                                            {{ if $item.Class }}<i class="fa fa-fw fa-warning"></i>{{ end }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="pad-low">Memory</td>
                                    <td class="pad-low"><span class="pull-right"><img height="12px" src="static/img/spinner.gif"></span></td>
                                </tr>
                                <tr>
                                    <td class="pad-low-top">Processes</td>
                                    <td class="pad-low-top"><span class="pull-right"><img height="12px" src="static/img/spinner.gif"></span></td>
                                </tr>
                            {{ end }}
                            </tbody>
                        </table>
                        {{ end }}

                        <table class="table table-bordered mb0">
                            <tbody>
                            {{ range $item := .Stats }}
                                <tr>
                                    <td>{{ $item.Name }}</td>
                                    <td{{ if $item.Hint }} title="{{ $item.Hint }}"{{ end }}>
                                        <span class="pull-right{{ if $item.Class }} {{ $item.Class }}{{ end }}">
                                            {{ if $item.Value }}{{ $item.Value }}{{ else }}<img height="12px" src="static/img/spinner.gif">{{ end }}
                                            {{ if $item.Class }}<i class="fa fa-fw fa-warning"></i>{{ end }}
                                        </span>
                                    </td>
                                </tr>
                            {{ end }}
                            </tbody>
                        </table>
                    </div>
                </div>
                <a href="{{ .RequestBase }}/manage">
                    <div class="panel-footer">
                        <span class="pull-left">Manage</span>
                        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                        <div class="clearfix"></div>
                    </div>
                </a>
            </div>

{{ end }}

{{ define "tail" }}
    <script>
        {{ if ne .Standalone true }}
        (function() {
            $.ajax(window.location.href + "/stats", {
                timeout: 30000
            })
            .done(function(data) {
                for (var i = 0; i < data.length; i++) {
                    children = $("#dashboard-stats td").filter(function() {
                        return $(this).text() == data[i].Name;
                    }).parent().children();

                    if (children.length == 2) {
                        // a .Stats table row
                        td = children[1];
                        $(td).prop('title', data[i].Hint);
                        span = $(td).children()[0];
                        $(span).attr("class","pull-right");
                        val = data[i].Value
                        if (data[i].Class != "") {
                            $(span).addClass(data[i].Class);
                            val += '<i class="fa fa-fw fa-warning"></i>';
                        }
                        $(span).html(val);
                    } else {
                        // a .Components table row
                        nextRows = $(children).parent().nextAll("tr");

                        memSpan = $($(nextRows[0]).children()[1]).children()[0];
                        $(memSpan).text(data[i].MemoryUsed + " (" + data[i].MemoryPerc + ")");

                        procSpan = $($(nextRows[1]).children()[1]).children()[0];
                        $(procSpan).text(data[i].NumPids);
                    }
                }

                // Delete any remaining spinners when one or more dockers is down
                $('img').each(function() {
                    if ($(this).attr('height') == '12px' && $(this).attr('src') == 'static/img/spinner.gif') {
                        $(this).remove();
                    }
                });
            })
            .fail(function(xhr, status, err) {
                console.log("ajax ERROR:", err);
            });
        })();
        {{ end }}
    </script>
{{ end }}
