const ViewAccessPoints = {
	template: `<div class="row">
		<p><span class="p-heading--one">AccessPoints</span></p>
		<table class="p-table--mobile-card" role="grid">
			<thead>
				<tr role="row">
					<th scope="col" role="columnheader" aria-sort="none">IP</th>
					<th scope="col" role="columnheader" aria-sort="none" class="u-align--right">Users</th>
				</tr>
			</thead>
			<tbody>
				<tr role="row" v-for="item in getAPs">
					<td role="rowheader" aria-label="IP">{{ item.ip.substring(21) }}</td>
					<td role="gridcell" aria-label="Users" class="u-align--right">
						<router-link :to="{ name: 'ap.clients', params: { ip: item.ip }}">
							{{ item.clients }}
						</router-link>
					</td>
				</tr>
			</tbody>
		</table>
	</div>`,
	computed: {
		getAPs () {
			const state = this.$store.state;
			return state.controller.ap.map(function (ip) {
				return {
					ip: ip,
					clients: state.controller._clients.filter(function (hwaddr) {
						const client = state.controller.clients[hwaddr];
						return client.ap === ip;
					}).length,
				};
			})
		},
	}
}