energylink/public/app/features/org/partials/orgApiKeys.html

<page-header model="navModel"></page-header>

<div class="page-container page-body">

	<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">Key name</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>
        <span class="gf-form-select-wrapper">
            <select class="gf-form-input gf-size-auto" ng-model="token.role" ng-options="r for r in roleTypes"></select>
        </span>
			</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>