{{#compare servers.length '>' 0}}
	<table class="table table-bordered table-striped table-condensed pageme" style="display: none;">
		<thead>
		<tr>
			<th>Server</th>
			<th>Ping</th>
			<th>Players</th>
		</tr>
		</thead>
		<tbody>
	{{#each servers}}
		<tr{{#if state.ping}}{{else}} class="danger"{{/if}}>
			<td class="col-xs-4">{{this.name}}{{#compare this.name '!=' state.motd}}<br />{{state.motd}}{{/compare}}</td>
			<td class="col-xs-1 text-center">{{state.ping}}</td>
			<td>
				<div class="btn-group pull-right hidden-xs" role="group" aria-label="...">
					<a class="btn btn-default" href="#chat/{{this.id}}">chat</a>
					<a class="btn btn-default" href="#activity/{{this.id}}">activity</a>
					<a class="btn btn-default" href="#maps/{{this.id}}">maps</a>
				</div>
				<div class="btn-group pull-right visible-xs" role="group">
					<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						<span class="caret"></span>
					</button>
					<ul class="dropdown-menu">
						<li><a href="#chat/{{this.id}}">chat</a></li>
						<li><a href="#activity/{{this.id}}">activity</a></li>
						<li><a href="#maps/{{this.id}}">maps</a></li>
					</ul>
				</div>
{{#if state.ping}}
<div class="text-{{#compare state.players.online '>' 0}}success{{else}}muted{{/compare}}">
{{state.players.online}}/{{state.players.max}}<div>
			{{#each state.players.sample}}
				<span class="label label-primary">{{name}}</span> 
			{{/each}}
				{{else}}Could not connect to server{{/if}}
			</td>
		</tr>
	{{/each}}
		</tbody>
	</table>
{{else}}
<div class="panel panel-default"><div class="panel-body">No servers loaded</div></div>
{{/compare}}

<div class="row">
	<div class="col-sm-3 col-md-2">
		<button data-action="checkversion" class="btn btn-default">Check for updates</button>
	</div>
	<div class="col-sm-9 col-md-10">
		<div class="action-checkversion-result"></div>
	</div>
</div>