{{define "title"}}Statup | Dashboard{{end}}
{{define "content"}}
<div class="container col-md-7 col-sm-12 mt-md-5 bg-light">
{{template "nav" }}
    <div class="col-12 mt-3">
        <div class="row stats_area mb-5">
            <div class="col-4">
                <span class="lg_number">{{ CoreApp.ServicesCount }}</span>
                Total Services
            </div>
            <div class="col-4">
                <span class="lg_number">{{ CoreApp.Count24HFailures }}</span>
                Failures last 24 Hours
            </div>
            <div class="col-4">
                <span class="lg_number">{{ CoreApp.CountOnline }}</span>
                Online Services
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-12">
                {{if eq (len CoreApp.Services) 0}}
                    <div class="jumbotron jumbotron-fluid">
                        <div class="text-center">
                            <h1 class="display-4">No Services!</h1>
                            <a class="lead">You don't have any websites or applications being monitored by your Statup server. <p><a href="/services" class="btn btn-secondary mt-3">Add Service</a></p></p>
                        </div>
                    </div>
                {{else}}
                <div class="list-group mb-5 mt-3">
                {{ range Services }}
                    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
                        <div class="d-flex w-100 justify-content-between">
                            <h5 class="mb-1">{{.Name}}</h5>
                            <small>{{if .Online}} <span class="badge badge-success">ONLINE</span> {{else}} <span class="badge badge-danger">OFFLINE</span> {{end}}</small>
                        </div>
                        <p class="mb-1">{{.SmallText}}</p>
                    </a>
                    {{ end }}
                 {{end}}
                </div>

            {{ range Services }}
            {{$failures := .LimitedFailures 16}}
            {{ if $failures }}
                <h4 class="text-truncate">{{.Name}} Failures</h4>
                <div class="list-group mt-3 mb-4">
                {{ range $failures }}
                    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
                        <div class="d-flex w-100 justify-content-between">
                            <h5 class="mb-1">{{.ParseError}}</h5>
                            <small>{{.Ago}}</small>
                        </div>
                        <p class="mb-1">{{.Issue}}</p>
                    </a>
                {{ end }}
                </div>
            {{ end }}
            {{ end }}


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