{% extends 'base.html' %}

{% block title %} URLTeam Tracker {% end %}

{% block body %}
<div class="pull-right">
	<a href="{{ reverse_url('admin.overview') }}">Tracker admin</a>
</div>

<div class="container">
	<div class="hero">
		<h1>URLTeam Tracker</h1>
		<h2>The Terror of Tiny Town</h2>
	</div>
	
	<div role="main" ng-app="stats">
		<nav>
			<a class="index-nav-item"
				href="{{ reverse_url('index') }}">Status</a>
			<a class="index-nav-item"
				href="{{ reverse_url('index.status') }}">Projects</a>
			<a class="index-nav-item"
				href="http://archiveteam.org/index.php?title=Warrior">How to help</a>
			<a class="index-nav-item"
				href="http://archiveteam.org/index.php?title=URLTeam">About</a>
			<a class="index-nav-item"
				href="https://github.com/ArchiveTeam/terroroftinytown">
				Source code</a>
			<a class="index-nav-item"
				href="{{ reverse_url('index.calculator') }}">Calculator</a>
		</nav>
		{% block main %}
		<div id="stats" ng-controller="StatsController">
			<div id="globalstats">
				<div id="mainstats">
					<strong ng-bind="stats.global[1]|number">{{ stats['global'][1] }}</strong> URLs scanned, <strong ng-bind="stats.global[0]|number">{{ stats['global'][0] }}</strong> saved<br>
				</div>
				<div id="extrastats" ng-if="::stats">
					<span ng-bind="stats.currentScanRate|number:0">--</span> scans per second
				</div>
			</div>
			<div id="leaderboard" class="row">
				<div class="col-md-6">
					<div class="panel panel-default">
						<div class="panel-heading">
							<div class="pull-right">
								Limit: <input type="number" ng-model="totalLimit" class="input">
							</div>
							Totals
						</div>
						<table class="table table-bordered table-striped" id="leaderboard-totals">
							<colgroup>
								<col style="width: 40%;">
								<col style="width: 30%;">
								<col style="width: 30%;">
							</colgroup>
							<thead>
								<tr>
									<th>Username</th>
									<th>Found</th>
									<th>Scanned</th>
								</tr>
							</thead>
							<tbody>
								<tr ng-repeat="item in lifetime|orderBy:getScanned:true|limitTo:totalLimit">
									<td class="table-string" ng-class="'nick-color-' + (item[0].charCodeAt(0) + item[0].length) % 8;" ng-bind="item[0]"></td>
									<td class="table-number" ng-bind="item[1][0]|number"></td>
									<td class="table-number" ng-bind="item[1][1]|number"></td>
								</tr>
								<noscript>
								{% for username, found, scanned in stats['lifetime'] %}
									<tr>
										<td class="table-string">{{ username }}</td>
										<td class="table-number">{{ found }}</td>
										<td class="table-number">{{ scanned }}</td>
									</tr>
								{% end %}
								</noscript>
							</tbody>
						</table>	
					</div>
				</div>
				<div class="col-md-6">
					<div class="panel panel-default">
						<div class="panel-heading">
							<div class="pull-right">
								Limit: <input type="number" ng-model="recentLimit">
							</div>
							Recent
						</div>
						<table class="table table-bordered table-striped" id="leaderboard-recent">
							<colgroup>
								<col style="width: 40%; overflow:hidden;">
								<col style="width: 15%;">
								<col style="width: 15%;">
								<col style="width: 30%;">
							</colgroup>
							<thead>
								<tr>
									<th>Username</th>
									<th>Found</th>
									<th>Scanned</th>
									<th>Service</th>
								</tr>
							</thead>
							<tbody>
								<tr ng-repeat="item in stats.live">
									<td class="table-string" ng-class="'nick-color-' + (item.username.charCodeAt(0) + item.username.length) % 8;" ng-bind="item.username"></td>
									<td class="table-number" ng-bind="item.found|number"></td>
									<td class="table-number" ng-bind="item.scanned|number"></td>
									<td class="table-string" ng-bind="item.project"></td>
								</tr>
								<noscript>
								{% for item in stats['live'] %}
									<tr>
										<td class="table-string">{{ item['username'] }}</td>
										<td class="table-number">{{ item['found'] }}</td>
										<td class="table-number">{{ item['scanned'] }}</td>
										<td class="table-string">{{ item['project'] }}</td>
									</tr>
								{% end %}
								</noscript>
							</tbody>
						</table>
					</div>
				</div>
			</div>
			<noscript>
				<div class="bg-info">
					<p>This dashboard is best experienced with JavaScript.</p>
				</div>
			</noscript>
		</div>
		{% end %}
	</div>
</div>

{% block index_scripts %}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.19/angular.min.js"></script>
<script src="{{ static_url('stats.js') }}"></script>
{% end %}

{% end %}