<!DOCTYPE html>
<html ng-app="mailhogApp">
<head>
<title>MailHog</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.js"></script>
<script src="/js/controllers.js"></script>
<style>
body, html { height: 100%; overflow: hidden; }
.navbar {
margin-bottom: 0;
position: absolute;
top: 0;
right: 0;
width: 100%;
border-bottom: 1px solid #ccc;
}
.navbar-header img {
height: 35px;
margin: 8px 0 0 5px;
float: left;
}
.navbar-nav.navbar-right:last-child {
margin-right: 0; /* bootstrap fix?! */
}
.ajax-loader {
background: url('/images/ajax-loader.gif');
width: 16px;
height: 16px;
display: inline-block;
}
.ajax-event {
padding: 5px;
width: 225px;
}
.ajax-event h1 {
font-size: 1em;
padding: 2px;
margin: 0;
}
.ajax-event h2 {
font-size: 0.8em;
padding: 2px;
margin: 0;
}
</style>
</head>
<body ng-controller="MailCtrl">
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="navbar-header">
<img src="/images/hog.png">
<a class="navbar-brand" href="#">MailHog</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li ng-if="eventCount > 0" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span ng-if="eventCount > eventDone" class="ajax-loader"></span>
{{ eventCount - eventDone }} pending<span ng-if="eventFailed > 0"> ({{ eventFailed}} failed)</span> <span ng-if="eventDone > 0"> ({{ eventDone}} complete)</span> <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li ng-class="e.getClass()" ng-repeat="(id, e) in eventsPending" class="ajax-event">
<button ng-if="e.failed" ng-click="e.remove()" class="btn btn-xs btn-danger pull-right"><span class="glyphicon glyphicon-remove"></span></button>
<h1>{{ e.name }}</h1>
<h2 ng-if="e.args">{{ e.args }}</h2>
<h2 ng-if="e.error">{{ e.error }}</h2>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Options <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" ng-click="refresh()">Refresh</a></li>
<li class="divider"></li>
<li><a href="#" ng-click="deleteAll()">Delete all messages</a></li>
</ul>
</li>
<li><a target="_blank" href="https://github.com/ian-kent/Go-MailHog">GitHub</a></li>
</ul>
</nav>
<%= content %>
</body>
</html>