<div class="block">
	<a href="{{{userDeletionUrl}}}">&gt; User deletions</a>
</div>

<div class="block">
	<a class="button is-primary" href="{{{global.baseUrl}}}/users/new">Add user</a>
	<a class="button is-link toggle-disabled-button hide-disabled" href="#">Hide disabled</a>
</div>

<table class="table">
	<thead>
		<tr>
			<th>Full name</th>
			<th>Email</th>
			<th>Account</th>
			<th>Max Item Size</th>
			<th>Total Size</th>
			<th>Max Total Size</th>
			<th>Can share</th>
		</tr>
	</thead>
	<tbody>
		{{#users}}
			<tr class="{{rowClassName}}">
				<td><a href="{{{global.baseUrl}}}/users/{{id}}">{{displayName}}</a></td>
				<td>{{email}}</td>
				<td>{{formattedAccountType}}</td>
				<td>{{formattedItemMaxSize}}</td>
				<td class="{{totalSizeClass}}">{{formattedTotalSize}} ({{formattedTotalSizePercent}})</td>
				<td>{{formattedMaxTotalSize}}</td>
				<td>{{formattedCanShareFolder}}</td>
			</tr>
		{{/users}}
	</tbody>
</table>

<div class="block">
	<a class="button is-primary" href="{{{global.baseUrl}}}/users/new">Add user</a>
	<a class="button is-link toggle-disabled-button hide-disabled" href="#">Hide disabled</a>
</div>

<script>
$(() => {
	function toggleDisabled() {
		if ($('.hide-disabled').length) {
			$('.hide-disabled').addClass('show-disabled');
			$('.hide-disabled').removeClass('hide-disabled');
			$('.show-disabled').text('Show disabled');
			$('table tr.is-disabled').hide();
		} else {
			$('.show-disabled').addClass('hide-disabled');
			$('.show-disabled').removeClass('show-disabled');
			$('.hide-disabled').text('Hide disabled');
			$('table tr.is-disabled').show();
		}
	}

	toggleDisabled();

	$('.toggle-disabled-button').click(() => {
		toggleDisabled();
	});
});
</script>