const ViewClients = {
	template: `<div class="row">
		<p>
			<span class="p-heading--one">Clients</span>
			<sub v-if="$route.params.ip">of Router {{ $route.params.ip.substring(21) }}</sub>
		</p>
		<table class="p-table--mobile-card" role="grid">
			<thead>
				<tr role="row">
					<th scope="col" role="columnheader" aria-sort="none">Addr</th>
					<th scope="col" role="columnheader" aria-sort="none">AP</th>
					<th scope="col" role="columnheader" aria-sort="none" class="u-align--right">FreqHighs</th>
					<th scope="col" role="columnheader" aria-sort="none" class="u-align--right">SignalLow</th>
					<th scope="col" role="columnheader" aria-sort="none" class="u-align--right">SignalHigh</th>
				</tr>
			</thead>
			<tbody>
				<tr role="row" v-for="item in getClients">
					<td role="rowheader" aria-label="Addr">{{ item.addr.substring(12) }}</td>
					<td role="gridcell" aria-label="AP">
						<router-link :to="{ name: 'ap.clients', params: { ip: item.ap }}">
							{{ item.ap.substring(21) }}
						</router-link>
					</td>
					<td role="gridcell" aria-label="Freq Highs" class="u-align--right">{{ item.freq_highest }}</td>
					<td role="gridcell" aria-label="Signal LowF" class="u-align--right">{{ item.signal_low_freq }}</td>
					<td role="gridcell" aria-label="Signal HighF" class="u-align--right">{{ item.signal_high_freq }}</td>
				</tr>
			</tbody>
		</table>
	</div>`,
	computed: {
		getClients () {
			const state = this.$store.state,
				apIP = this.$route.params.ip;

			return state.controller._clients.map(function(addr) {
				return state.controller.clients[addr];
			}).filter((client)=> (apIP === undefined || client.ap === apIP));
		},
	}
}