<navbar model="navModel"></navbar>

<div class="page-container">
	<div class="page-header">
		<h1>API Keys</h1>
	</div>

	<h3 class="page-heading">Add new</h3>
	<form name="addTokenForm" class="gf-form-group">
		<div class="gf-form-inline">
			<div class="gf-form max-width-21">
				<span class="gf-form-label">Add a key</span>
				<input type="text" class="gf-form-input" ng-model='token.name' placeholder="Name"></input>
			</div>
			<div class="gf-form">
				<span class="gf-form-label">Role</span>
				<select class="gf-form-input gf-size-auto" ng-model="token.role" ng-options="r for r in roleTypes"></select>
			</div>
			<div class="gf-form">
				<button class="btn gf-form-btn btn-success" ng-click="addToken()">Add</button>
			</div>
		</div>
	</form>

	<h3 class="page-heading">Existing Keys</h3>
	<table class="filter-table">
		<thead>
			<tr>
				<th>Name</th>
				<th>Role</th>
				<th style="width: 34px;"></th>
			</tr>
		</thead>
		<tbody>
			<tr ng-repeat="t in tokens">
				<td>{{t.name}}</td>
				<td>{{t.role}}</td>
				<td>
					<a ng-click="removeToken(t.id)" class="btn btn-danger btn-mini">
						<i class="fa fa-remove"></i>
					</a>
				</td>
			</tr>
		</tbody>
	</table>
</div>



