<div class="task-group-inner">
	<small ng-hide="passwords">No passwords added.</small>
	<div data-ng-repeat="(id, device) in passwords">
		<h4>{[{ ::getDeviceName(id) }]}</h4>
		<table class="table table-condensed" ng-show="device.length > 0">
			<tbody>
				<tr ng-repeat="password in device" ng-class="{ muted : password.disabled }">
					<td style="width:25%" class="">{[{ password.type}]}</td>
					<td style="width:25%" class="">{[{ password.username}]}</td>
					<td style="width:25%" class="">
						<span ng-show="!password.showPassword">••••••••</span>
						<span ng-show="password.showPassword">{[{ password.password}]}</span>
						<button class="btn btn-xs btn-default" ng-click="password.showPassword = !password.showPassword" title="{[{ password.showPassword ? 'Hide' : 'Show' }]} password">
							<i class="fa" ng-class="password.showPassword ? 'fa-eye-slash' : 'fa-eye'"></i>
						</button>
						<button class="btn btn-xs btn-default" ng-click="copyToClipboard(password.password)" title="Copy password">
							<i class="fa fa-copy"></i>
						</button>
					</td>
					<td style="width:25%" class="">
						<div class="btn-group pull-right">
							<span ng-click="changePassword(password)" class="btn btn-default btn-sm"><i class="fa fa-pencil"></i></span>
							<span  confirmed-click="deletePassword(password)" ng-confirm-click="Are you sure you want to delete this password?" class="btn btn-danger btn-sm"><i class="fa fa-remove"></i></span>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
<br>
<div class="buttons text-right">
		<div class="btn btn-default" ng-click="chooseExistingPassword()">
			<i class="fa fa-key"></i> Choose Existing Password
		</div>
		<div class="btn btn-default" ng-click="addPassword()">
			<i class="fa fa-arrow-circle-o-up"></i> Add Password
		</div>
	</div>
<script type="text/ng-template" id="bookings/modals/task-password.html">
	@include('bookings::templates.modals.task-password')
</script>