<template>
<div id="MAIN">
    <bt-drawer type="reveal" associatedNavId="drw1">
        <bt-drawermenu id="drw1" :param="menu1"></bt-drawermenu>
    </bt-drawer>
    <bt-drawer type="push" right>
        Some content to be given for rightdrawer
    </bt-drawer>
    <div id="mainContent">
        <h3>Responsive Grid System</h3>
        <h5>12 Columns</h5>
        <bt-grid cols="12">
            <bt-gridcol v-for="i in 12" :key="'f12'+i">Col {{i}} of 12</bt-gridcol>
        </bt-grid>
        <bt-grid cols="12">
            <bt-gridcol v-for="i in 4" :key="'f12s'+i" span="3">Col {{i}} of 12</bt-gridcol>
        </bt-grid>
        <h5>11 Columns</h5>
        <bt-grid cols="11">
            <bt-gridcol v-for="i in 11" :key="'f11'+i">Col {{i}} of 11</bt-gridcol>
        </bt-grid>
        <h5>10 Columns</h5>
        <bt-grid cols="10">
            <bt-gridcol v-for="i in 10" :key="'f10'+i">Col {{i}} of 10</bt-gridcol>
        </bt-grid>
        <h5>9 Columns</h5>
        <bt-grid cols="9">
            <bt-gridcol v-for="i in 9" :key="'f9'+i">Col {{i}} of 9</bt-gridcol>
        </bt-grid>
        <h5>9 Columns floater</h5>
        <bt-grid cols="9" floater>
            <bt-gridcol v-for="i in 17" :key="'f17'+i">Col {{i}} of 17</bt-gridcol>
        </bt-grid>
        <h5>8 Columns</h5>
        <bt-grid cols="8">
            <bt-gridcol v-for="i in 8" :key="'f8'+i">Col {{i}} of 8</bt-gridcol>
        </bt-grid>
        <h5>7 Columns</h5>
        <bt-grid cols="7">
            <bt-gridcol v-for="i in 7" :key="'f7'+i">Col {{i}} of 7</bt-gridcol>
        </bt-grid>
        <h5>6 Columns</h5>
        <bt-grid cols="6">
            <bt-gridcol v-for="i in 6" :key="'f6'+i">Col {{i}} of 6</bt-gridcol>
        </bt-grid>
        <h5>5 Columns</h5>
        <bt-grid cols="5">
            <bt-gridcol v-for="i in 5" :key="'f5'+i">Col {{i}} of 5</bt-gridcol>
        </bt-grid>
        <h5>4 Columns</h5>
        <bt-grid cols="4">
            <bt-gridcol v-for="i in 4" :key="'f4'+i">Col {{i}} of 4</bt-gridcol>
        </bt-grid>
        <h5>3 Columns</h5>
        <bt-grid cols="3">
            <bt-gridcol v-for="i in 3" :key="'f3'+i">Col {{i}} of 3</bt-gridcol>
        </bt-grid>
        <h5>2 Columns</h5>
        <bt-grid cols="2">
            <bt-gridcol v-for="i in 2" :key="'f2'+i">Col {{i}} of 2</bt-gridcol>
        </bt-grid>
        <h5>2 Columns floater</h5>
        <bt-grid cols="2" floater>
            <bt-gridcol v-for="i in 5" :key="'f25'+i">Col {{i}} of 5</bt-gridcol>
        </bt-grid>
        <router-link to="/">Back to Home</router-link>
    </div>
</div>
</template>

<script>
export default {
	data() {
		return {
			menu1: [
				{ code: 'EFQ', label: 'Edit FAT Pseudo Wire Queries', options: [], disable: false },
				{
					code: 'LOOK',
					label: 'Run lookups ...',
					options: [
						{ code: 'ADSL', label: 'ADSL Online Lookup', options: [], disable: false },
						{							code: 'SFBB', label: 'Superfast Online Lookup', options: [
								{ code: 'SFBB1', label: 'SFBB Lookup 1', options: [], disable: false },
								{ code: 'SFBB2', label: 'SFBB Lookup 2', options: [], disable: false },
								{ code: 'SFBB3', label: 'SFBB Lookup 3', options: [], disable: false }
							], disable: false						},
						{ code: 'MPA', label: 'MPA Online Lookup', options: [], disable: false },
						{ code: 'PSTN', label: 'PSTN NoT Lookup', options: [], disable: true }
					],
					disable: false
				},
				{ code: '3M', label: 'Export Site Data Excel', options: [], disable: false },
				{
					code: '4',
					label: 'Import',
					options: [
						{ code: '4A', label: 'Updated Site Data', options: [], disable: false },
						{ code: '4B', label: 'More Sites', options: [], disable: false }
					],
					disable: false
				},
				{
					code: '5',
					label: 'Reports',
					options: [
						{ code: '5A', label: 'ADSL/SFBB/GEA Availability Report', group: 'Availability', options: [], disable: false },
						{ code: '5B', label: 'Ethernet Connect Availability', group: 'Availability', options: [], disable: false },
						{ code: '5C', label: 'HE EFM Availability', group: 'Availability', options: [], disable: false },
						{ code: '5F', label: 'AOMP Details', options: [], disable: false },
						{ code: '5G', label: 'CoS Report (Standard & Advanced)', options: [], disable: false },
						{ code: '5E', label: 'Multicast Proforma', options: [], disable: false },
						{ code: '5H', label: 'Internet Connect Availability Report', group: 'Availability', options: [], disable: false }
					],
					disable: false
				},
				{
					code: '6',
					label: 'Populate Site Address',
					options: [
						{ code: '6A', label: 'Replace existing Address info when found', options: [], disable: false },
						{ code: '6B', label: 'Do not replace existing Address info when found', options: [], disable: false },
						{ code: '6C', label: 'Ask when existing Address info found', options: [], disable: false }
					],
					disable: true
				},
				{ code: 'BWC', label: 'Calculate Management Bandwidth', options: [], disable: false }
			]
		}
	}
}
</script>

<style lang="scss" scoped>
.col {
	background: lightgray;
}
</style>
