<div class="header vertical-container">
	<span class="label vertical-block capitalize">Add Drives</span>
</div>
<div class="content">
	<div class="hosts text-center background"
		ng-class="{
			'active': active.state == 'hosts'
		}">
		<span class="label uppercase">hosts&nbsp;<span class="text-bold">({{hosts ? hosts.length : 0}})</span></span>
		<div class="mask" ng-click="active.state = 'hosts'" ng-if="active.state != 'hosts'"></div>
		<div class="vertical-block scroll-container">
			<div class="item text-italicize" ng-repeat="host in hosts">
				{{host}}
			</div>
		</div>
		<div class="vertical-block form">
			<div class="input-wrapper">
				<input ng-model="newHost">
			</div>
			<div class="clickable uppercase add" ng-click="addHost()">add</div>
		</div>
	</div>
	<div class="ring text-center background"
		ng-class="{
			'active': active.state == 'ring'
		}">
		<div class="mask" ng-click="active.state = 'ring'" ng-if="active.state != 'ring'"></div>
		<span class="label uppercase">select a ring</span><!--
		--><filtered-select
			options="types"
			ng-model="drive.type"

			placeholder="Select ring type">
		</filtered-select>
	</div>
	<div class="drive text-center vertical-container background"
		ng-class="{
			'active': active.state == 'drive'
		}">
		<span class="label uppercase">devices to add&nbsp;<span class="text-bold">({{drive.drives.length ? drive.drives.length : 0}})</span></span>
		<div class="mask" ng-click="active.state = 'drive'" ng-if="active.state != 'drive'"></div>
		<div class="vertical-block scroll-container">
			<div class="item text-italicize" ng-repeat="item in drive.drives">
				{{item}}
			</div>
		</div>
		<div class="vertical-block form">
			<div class="input-wrapper">
				<input ng-model="newDrive">
			</div>
			<div class="clickable uppercase add" ng-click="addDrive()">add</div>
		</div>
	</div>
	<div class="options vertical-container text-center background"
		ng-class="{
			'active': active.state == 'options'
		}">
		<div class="mask" ng-click="active.state = 'options'" ng-if="active.state != 'options'"></div>
		<div class="vertical-block section">
			<div class="mask" ng-if="drive.stage == 'FORMAT' || drive.stage == 'ADD'"></div>
			<div class="track src" ng-if="drive.stage == 'PREP'"></div>
			<div class="text-bold uppercase label">prep</div>
			<div class="selector clickable"
				ng-class="{
					'src-included': drive.stage == 'PREP',
				}"
				ng-click="drive.stage = 'PREP'"><div class="fill" ng-if="drive.stage == 'PREP'"></div></div>
		</div>
		<div class="vertical-block section">
			<div class="mask" ng-if="drive.stage == 'ADD'"></div>
			<div class="track src" ng-if="drive.stage != 'ADD'"></div>
			<div class="track dst" ng-if="drive.stage == 'PREP'"></div>
			<div class="text-bold uppercase label">format</div>
			<div class="selector clickable"
				ng-class="{
					'src-included': drive.stage != 'ADD',
					'dst-included': drive.stage == 'PREP'
				}"
				ng-click="drive.stage = 'FORMAT'"><div class="fill" ng-if="drive.stage == 'FORMAT'"></div></div>


			<div class="uppercase sub-label">file system</div>
			<div class="switch vertical-container clickable text-center"
				ng-click="drive.fileSystem == 'xfs' ? drive.fileSystem = 'ext4' : drive.fileSystem = 'xfs'"
				ng-class="{
					off: drive.fileSystem == 'xfs'
				}">
				<div class="track on vertical-block">ext4</div>
				<div class="paddle vertical-block">&nbsp;</div>
				<div class="track off vertical-block">xfs</div>
			</div>
		</div>
		<div class="vertical-block section">
			<div class="track dst" ng-if="drive.stage != 'ADD'"></div>
			<div class="text-bold uppercase label">add</div>
			<div class="selector clickable dst-included"
				ng-click="drive.stage = 'ADD'"><div class="fill" ng-if="drive.stage == 'ADD'"></div></div>

			<div class="uppercase sub-label">instant</div>
			<div class="switch vertical-container clickable text-center"
				ng-click="drive.instant = !drive.instant"
				ng-class="{
					off: !drive.instant
				}">
				<div class="track on vertical-block">true</div>
				<div class="paddle vertical-block">&nbsp;</div>
				<div class="track off vertical-block">false</div>
			</div>
		</div>
	</div>
</div>
<div class="footer clearfix vertical-container">
	<a class="vertical-block clickable cancel text-center capitalize button" ng-click="cancel()">cancel</a><!--
	--><a class="vertical-block add text-center clickable capitalize button" ng-click="ok()">add drives</a>
</div>