<div class="container-fluid">
	<div class="columns">
		<div class="column is-9 has-margin">
			{% include "instant/frontend/form.html" %}
			<table id="msgsTable" class="table table-bordered table-striped datatable" 
				style="width:100%" data-order='[[ 0, "desc" ]]'>
				<thead>
					<th>Time</th>
					<th>Class</th>
					<th>Channel</th>
					<th>Message</th>
					<th>Data</th>
				</thead>
				<tbody></tbody>
			</table>
		</div>
		<div class="column">
			<nav class="panel">
				<p class="panel-heading">Channels</p>
				<div class="panel-block" v-for="chan in publicChans">
					<span class="panel-icon">
						<i v-bind:class="[chan.isActive ? activeChanClass : '', chan.receiving ? receivingChanClass : '', publicChanClass]" aria-hidden="true"></i>
					</span>
					<a @click="activateForm(chan.name)">{! chan.name !}</a>&nbsp;&nbsp;<span 
						class="num-msgs" v-if="chan.msgs>0">{! chan.msgs !}</span>
				</div>
				<div class="panel-block" v-for="chan in usersChans">
					<span class="panel-icon">
						<i v-bind:class="[chan.isActive ? activeChanClass : '', chan.receiving ? receivingChanClass : '', usersChanClass]" aria-hidden="true"></i>
					</span>
					<a @click="activateForm(chan.name)">{! chan.name !}</a>&nbsp;&nbsp;<span 
						class="num-msgs" v-if="chan.msgs>0">{! chan.msgs !}</span>
				</div>
				<div class="panel-block" v-for="chan in staffChans">
					<span class="panel-icon">
						<i v-bind:class="[chan.isActive ? activeChanClass : '', chan.receiving ? receivingChanClass : '', staffChanClass]" aria-hidden="true"></i>
					</span>
					<a @click="activateForm(chan.name)">{! chan.name !}</a>&nbsp;&nbsp;<span 
						class="num-msgs" v-if="chan.msgs>0">{! chan.msgs !}</span>
				</div>
				<div class="panel-block" v-for="chan in superuserChans">
					<span class="panel-icon">
						<i v-bind:class="[chan.isActive ? activeChanClass : '', chan.receiving ? receivingChanClass : '', superuserChanClass]" aria-hidden="true"></i>
					</span>
					<a @click="activateForm(chan.name)">{! chan.name !}</a>&nbsp;&nbsp;<span 
						class="num-msgs" v-if="chan.msgs>0">{! chan.msgs !}</span>
				</div>
			</nav>
		</div>
	</div>
</div>