<div class="form-group">
	<label for="keychain" class="col-sm-3 control-label">&nbsp;</label>
	<div class="col-sm-9">
		<!--Added Passwords-->
		<h6><i class="fa fa-key"></i> Passwords added to the task:</h6>
		<div class="well well-small">

			<table class="table">
				<thead>
					<th></th>
					<th>Device</th>
					<th>Type</th>
					<th>Username</th>
					<th>Password</th>
					<th></th>
				</thead>
				<tbody>
					<tr ng-repeat="keychain in task.keychains">
						<td></td>
						<td>{[{ getDeviceName( keychain.device_id) }]}</td>
						<td>{[{ keychain.type | capitalize }]}</td>
						<td>{[{ keychain.username }]}</td>
						<td>
							<span ng-show="!keychain.showPassword">••••••••</span>
							<span ng-show="keychain.showPassword">{[{ keychain.password }]}</span>
							<button class="btn btn-xs btn-default" ng-click="keychain.showPassword = !keychain.showPassword" title="{[{ keychain.showPassword ? 'Hide' : 'Show' }]} password">
								<i class="fa" ng-class="keychain.showPassword ? 'fa-eye-slash' : 'fa-eye'"></i>
							</button>
							<button class="btn btn-xs btn-default" ng-click="copyToClipboard(keychain.password)" title="Copy password">
								<i class="fa fa-copy"></i>
							</button>
						</td>
						<td><span ng-click="removeKeychain(keychain)"><i class="text-danger fa fa-times"></i></span></td>
					</tr>
				</tbody>
			</table>
		</div>

		<!--Form to add new password-->
		<h6>Enter a new password OR select an existing one from the table below</h6>
		<div class="row">
			<div class="col-sm-2">
				<select ng-model="data.keychain.device_id" class="form-control" ng-options="device.id as getDeviceName(device.id) for device in task.devices">
					<option value=''>-- Select a device (optional) --</option>
				</select>
			</div>
			<div class="col-sm-2">
				<select name="keychain_type" class="form-control" ng-model="data.keychain.type">
					<option value="">Select Type</option>
					@foreach(App\Models\Keychain::getTypes() as $value => $label)
						<option value="{{ $value }}">{{ $label }}</option>
					@endforeach
				</select>
			</div>
			<div class="col-sm-3">
				<input type="text" class="form-control" name="username" placeholder="Username" data-ng-model="data.keychain.username" autocomplete="off">
			</div>
			<div class="col-sm-3">
				<input type="password" class="form-control" name="password" placeholder="Password" data-ng-model="data.keychain.password" autocomplete="off">
			</div>
			<div class="col-sm-2">
				<span ng-click="addPassword(data.keychain)" ng-disabled=" !data.keychain.username || !data.keychain.password"  class="btn btn-primary">Add</span>
			</div>
		</div>
		<h6><i class="fa fa-key"></i> Existing passwords for this customer:</h6>
		<div class="well well-small">
			<table class="table">
				<thead>
					<th></th>
					<th>Device</th>
					<th>Type</th>
					<th>Username</th>
					<th>Password</th>
					<th></th>
				</thead>
				<tbody>
					<tr ng-repeat="password in data.client_keychains" ng-hide="isSelectedPassword(password) || belongsToADifferentDevice(password)">
						<td><span ng-click="addKeychain( password)" class="btn btn-sm btn-success"><i class="fa fa-plus"></i></span></td>
						<th>{[{ getDeviceName( password.device_id)  }]}</th>
						<td>{[{ password.type | capitalize }]}</td>
						<td>{[{ password.username }]}</td>
						<td>
							<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><span confirmed-click="removePassword(password)" ng-confirm-click="Are you sure you want to delete this password?" class="btn btn-sm btn-danger"><i class="fa fa-remove"></i></span></td>
					</tr>
				</tbody>
			</table>
		</div>

	</div>
</div>
