<div class="modal-body">
	<div class="modal-header">
		<h2 class="modal-header-title">
			<i class="fa fa-keyboard-o"></i>
			<span class="p-l-1">Shortcuts</span>
		</h2>

		<!-- <ul class="gf&#45;tabs"> -->
		<!-- 	<li class="gf&#45;tabs&#45;item" ng&#45;repeat="tab in ['Shortcuts']"> -->
		<!-- 		<a class="gf&#45;tabs&#45;link" ng&#45;click="ctrl.tabindex = $index" ng&#45;class="{active: ctrl.tabIndex === $index}"> -->
		<!-- 			{{::tab}} -->
		<!-- 		</a> -->
		<!-- 	</li> -->
		<!-- </ul> -->

		<a class="modal-header-close" ng-click="ctrl.dismiss();">
			<i class="fa fa-remove"></i>
		</a>
	</div>

	<div class="modal-content help-modal">

		<p class="small" style="position: absolute; top: 13px; right: 44px">
			<span class="shortcut-table-key">mod</span> =
			<span class="muted">CTRL on windows or linux and CMD key on Mac</span>
		</p>

		<div ng-repeat="(category, shortcuts) in ctrl.shortcuts" class="shortcut-category">
			<table class="shortcut-table">
				<tbody>
					<tr>
						<th class="shortcut-table-category-header" colspan="2">{{category}}</th>
					</tr>
					<tr ng-repeat="shortcut in shortcuts">
						<td class="shortcut-table-keys">
              <span class="shortcut-table-key" ng-repeat="key in shortcut.keys track by $index" ng-bind-html="key">
              </span>
            </td>
						<td class="shortcut-table-description">{{shortcut.description}}</td>
					</tr>
					<tbody>
			</table>
		</div>

		<div class="clearfix"></div>
	</div>

</div>
