const ViewAccessPoints = {
	template: `<div class="row">
		<h1>AccessPoints</h1>
		<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>
				<accesspoint-table-item v-for="item in getAPs" :key="item"/>
			</tbody>
		</table>
	</div>`,
	computed: {
		getAPs() {
			return this.$store.state.ap
		}
	}
}

Vue.component('accesspoint-table-item', {
	template: `<tr role="row">
		<td role="rowheader" aria-label="IP">{{.ip}}</td>
		<td role="gridcell" aria-label="Users" class="u-align--right">8</td>
	</tr>`
})