<%- include('top') %>
<script type="text/javascript">
	app.auth.forceLogin();

	async function loadTypes(){
		let data = await app.token.list();
		let $select = $('#tokenType');
		$select.empty().append('<option value="">-- Select type --</option>');
		$.each(data.results, function(_, name){
			$select.append($('<option>').val(name).text(name));
		});
	}

	async function loadTokens(name){
		$.scope.tokenRow.empty();
		if(!name) return;
		let data = await app.token.list(name);
		if(!data.results || !data.results.length){
			$.scope.tokenRow.push({created_by: '(none)', created_on: '', is_valid: ''});
			return;
		}
		$.each(data.results, function(_, token){
			token.created_on = token.created_on ? moment(token.created_on).fromNow() : '';
			token.is_valid_label = token.is_valid ? 'Yes' : 'No';
			$.scope.tokenRow.push(token);
		});
	}

	$(document).ready(async function(){
		await loadTypes();
		$('#tokenType').on('change', function(){
			loadTokens($(this).val());
		});
	});
</script>
<div class="row" style="display:none">
	<div class="col-12">
		<div class="card shadow-lg">
			<div class="card-header">
				<i class="fa-solid fa-ticket"></i>
				Token Viewer
			</div>
			<div class="card-body">
				<div class="mb-3">
					<label class="form-label">Token Type</label>
					<select id="tokenType" class="form-select shadow" style="max-width:300px">
						<option value="">-- Select type --</option>
					</select>
				</div>
				<div class="table-responsive">
					<table class="table table-striped">
						<thead>
							<tr>
								<th>Created By</th>
								<th>Created</th>
								<th>Valid</th>
							</tr>
						</thead>
						<tbody>
							<tr jq-repeat="tokenRow">
								<td>{{ created_by }}</td>
								<td>{{ created_on }}</td>
								<td>{{ is_valid_label }}</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
<%- include('bottom') %>
