<div class="vertical-container row device"
	ng-repeat="mount in host.mounts"
	ng-controller="selectionController as selection"
	ng-init="selection.init(mount, group); mount.idx = $index"
	ng-class="{
		'in-progress': host.isHealthy(selection.getFirstItem(), group) && host.isReweighting(selection.getFirstItem(), group),
		'unhealthy': !host.isHealthy(selection.getFirstItem(), group),
		'unregistered': !host.isPartOfRing(selection.getFirstItem(), group),
		'selected': $index == host.selected
	}">
	<div class="vertical-container">
		<span ng-if="host.isArray(mount)" class="">
			<div class="vertical-block vertical-container selection"
				ng-repeat="selected in mount">
				<div class="vertical-block id"
					ng-class="{
						'text-italicize': !host.isPartOfRing(selected, group),
						'text-bold': !host.isHealthy(selected, group),
						'selectable': host.selectable()
					}"
					ng-click="host.select($index + mount.idx)">{{::selected.uuid}}</div>
				<div class="vertical-block mount-path"
					ng-if="host.isHealthy(selected, group)"
					ng-class="{
						'text-italicize': !host.isPartOfRing(selected, group),
						'selectable': host.selectable()
					}"
					ng-click="host.select($index + mount.idx)">{{::selected.path}}</div>
				<div class="vertical-block text-bold mount-path"
					ng-if="!host.isHealthy(selected, group)">Unknown</div>

				<div class="vertical-block vertical-container status"
					ng-if="host.isPartOfRing(selected, group)"
					ng-init="host.initWeights(selected, group)">
					<div class="vertical-block vertical-container form"
						ng-if="!host.isReweighting(selected, group)">
						<span class="text label vertical-block capitalize">weight</span>
						<input class="vertical-block"
							type="number"
							highlight
							placeholder="Enter weight"
							ng-model="selected.weight.new">
					</div>
					<div class="vertical-block vertical-container form clickable"
						ng-if="host.isReweighting(selected, group) && !selected.edit"
						ng-click="selected.edit = !selected.edit">
						<span class="text label vertical-block capitalize">reweighting...</span>
						<span class="percentage vertical-block">({{::selected.weight.old | number:0}} / <span class="text-bold">{{::selected.weight.new}}</span>)</span>
					</div>
					<div class="vertical-block vertical-container form reweight"
						ng-if="host.isReweighting(selected, group) && selected.edit"
						window-click callback="host.leaveEdit(selected)">
						<span class="text label vertical-block capitalize">weight</span>
						<input class="vertical-block" type="number"
							highlight
							placeholder="Enter weight"
							ng-model="selected.weight.new">
					</div>
				</div>
			</div>
		</span>
		<div ng-if="!host.isArray(mount)"
			class="vertical-block vertical-container selection">
			<div class="vertical-block id"
				ng-class="{
					'text-italicize': !host.isPartOfRing(mount, group),
					'text-bold': !host.isHealthy(mount, group),
					'selectable': host.selectable()
				}"
				ng-click="host.select($index)">{{::mount.uuid}}</div>
			<div class="vertical-block mount-path"
				ng-if="host.isHealthy(mount, group)"
				ng-class="{
					'text-italicize': !host.isPartOfRing(mount, group),
					'selectable': host.selectable()
				}"
				ng-click="host.select($index)">{{::mount.path}}</div>
			<div class="vertical-block text-bold mount-path"
				ng-if="!host.isHealthy(mount, group)">Unknown</div>

			<div class="vertical-block vertical-container status"
				ng-if="host.isPartOfRing(mount, group)"
				ng-init="host.initWeights(mount, group)">
				<div class="vertical-block vertical-container form"
					ng-if="!host.isReweighting(mount, group)">
					<span class="text label vertical-block capitalize">weight</span>
					<input class="vertical-block"
						type="number"
						highlight
						placeholder="Enter weight"
						ng-model="mount.weight.new">
				</div>
				<div class="vertical-block vertical-container form clickable"
					ng-if="host.isReweighting(mount, group) && !mount.edit"
					ng-click="mount.edit = !mount.edit">
					<span class="text label vertical-block capitalize">reweighting...</span>
					<span class="percentage vertical-block">({{::mount.weight.old | number:0}} / <span class="text-bold">{{::mount.weight.new}}</span>)</span>
				</div>
				<div class="vertical-block vertical-container form reweight"
					ng-if="host.isReweighting(mount, group) && mount.edit"
					window-click callback="host.leaveEdit(mount)">
					<span class="text label vertical-block capitalize">weight</span>
					<input class="vertical-block" type="number"
						highlight
						placeholder="Enter weight"
						ng-model="mount.weight.new">
				</div>
			</div>
		</div>

		<div class="right vertical-block vertical-container control-panel"
			ng-if="selection.isValid() && selection.status=='NORMAL' && host.isPartOfRing(selection.getFirstItem(), group)"><!--
			--><div class="save button vertical-block clickable"
				ng-click="selection.status='CONFIRM';selection.action = 'SAVE';noteTT.hide($event)"
				ng-mouseenter="noteTT.show($event, 'SAVE')"
				ng-mouseleave="noteTT.hide($event)"><i class="fa text-center fa-pencil-square-o"></i></div><!--
			--><div class="delete right button vertical-block clickable"
				ng-click="selection.status='CONFIRM';selection.action = 'DELETE';noteTT.hide($event)"
				ng-mouseenter="noteTT.show($event, 'DELETE')"
				ng-mouseleave="noteTT.hide($event)"><i class="fa text-center fa-times"></i></div><!--
		--></div>
		<div class="right vertical-block vertical-container control-panel"
			ng-if="selection.isValid() && selection.status=='CONFIRM' && host.isPartOfRing(selection.getFirstItem(), group)"
			ng-switch="selection.action">
			<span class="text-italicize vertical-block vertical-block capitalize" ng-switch-when="SAVE">save?</span>
			<span class="text-italicize vertical-block vertical-block capitalize" ng-switch-when="DELETE">delete?</span>
			<div class="confirm right button vertical-block clickable"
				ng-click="selection.status='LOADING';host.processAction(selection, group)"
				window-click callback="host.cancel(selection)"><i class="fa text-center fa-check"></i></div>
		</div>

		<div class="right text-center vertical-block vertical-container control-panel"
			ng-if="selection.isValid() && selection.status=='LOADING' && host.isPartOfRing(selection.getFirstItem(), group)">
			<i class="fa fa-spinner fa-pulse vertical-block"></i>
		</div>

		<div class="right text-center vertical-block vertical-container control-panel success"
			ng-if="selection.isValid() && selection.status=='SUCCESS' && host.isPartOfRing(selection.getFirstItem(), group)">
			<i class="fa fa-check vertical-block"></i><!--
			--><span class="sub-text vertical-block" ng-if="selection.asArray().length > 1">{{::selection.result.succeeded}} / {{::selection.result.total}} Succeeded</span>
		</div>

		<div class="right text-center vertical-block vertical-container control-panel error"
			ng-if="selection.isValid() && selection.status=='ERROR' && host.isPartOfRing(selection.getFirstItem(), group)">
			<i class="fa fa-times vertical-block"></i><!--
			--><span class="sub-text vertical-block" ng-if="selection.asArray().length > 1">{{::selection.result.succeeded}} / {{::selection.result.total}} Succeeded</span>
		</div>

		<div class="right vertical-block text-center vertical-container status"
			ng-if="selection.isValid() &&
				host.isHealthy(selection.getFirstItem(), group) &&
				!host.isPartOfRing(selection.getFirstItem(), group) &&
				!host.isBeingAdded(selection.getFirstItem(), group)">
			<div class="add button vertical-block clickable"
				ng-click="create.addDrive([node], selection.getAttr('path'), group.type, 'ADD')"><i class="fa fa-plus"></i><span class="text uppercase">add</span></div>
		</div>

		<div class="right vertical-block text-center vertical-container status"
			ng-if="selection.isValid() &&
				host.isHealthy(selection.getFirstItem(), group) &&
				!host.isPartOfRing(selection.getFirstItem(), group) &&
				host.isBeingAdded(selection.getFirstItem(), group)">
			<span class="text label vertical-block capitalize">adding to ring...</span>
		</div>

		<div class="right text-center vertical-block vertical-container control-panel invalid"
			ng-if="!selection.isValid()">
			<i class="vertical-block fa fa-exclamation-triangle fa-border"></i>
		</div>
	</div>
</div>
<div class="row device">
	<div class="clickable create vertical-container"
		ng-click="create.addDrive([node], [], group.type)">
		<i class="fa fa-plus vertical-block icon"></i>
		<div class="capitalize vertical-block text-center label">
			create new drive
		</div>
	</div>
</div>