<div class="modal-header">
	<h3 class="modal-title">Customer's Passwords</h3>
</div>
<div class="modal-body">
	<table class="table table-striped">
		<thead ng-show="keychain.length > 0">
			<th>Device</th>
			<th>Type</th>
			<th>Username</th>
			<th>Password</th>
			<th></th>
		</thead>
		<tbody>
			<tr data-ng-repeat="password in keychain">
				<td>{[{ getDeviceName(password.device_id) }]}</td>
				<td>{[{ password.type | capitalize }]}</td>
				<td><span editable-text="password.username" onbeforesave="update(password, 'username', $data)">{[{ password.username || 'No value' }]}</span></td>
				<td>
					<span ng-show="!password.showPassword">••••••••</span>
					<span ng-show="password.showPassword" editable-text="password.password" onbeforesave="update(password, 'password', $data)">{[{ password.password || 'No value' }]}</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><i class="text-success btn btn-default fa fa-plus" ng-click="addPasswordToTask(password)"></i><i class=" text-danger btn btn-default fa fa-remove" ng-click="disablePassword(password)"></i></td>
			</tr>
			<tr data-ng-show="! keychain.length">
				<td>No passwords stored.</td>
			</tr>
		</tbody>
	</table>

	<br>
	<div class="headline">
		<h4><i class="fa fa-plus"></i> Add a new entry</h4>
	</div>
	<div class="well">
		<div class="row">
			<div class="col-sm-6">
				<label class="control-label">Device:</label>
				<select class="form-control" ng-model="new.device_id" name="device_id">
					<option value="" ng-selected="new.device_id == null" >General</option>
					<option ng-repeat="device in client_devices" ng-value="device.id" ng-selected="new.device_id == device.id">{[{ device.manufacturer.name +" "+ device.model_number.model_number }]}</option>
				</select>
			</div>
			<div class="col-sm-6">
				<label class="control-label">Type:</label>
				<select name="keychain_type" class="form-control" ng-model="new.type">
					<option value="">Select Type</option>
					@foreach(App\Models\Keychain::getTypes() as $value => $label)
						<option value="{{ $value }}">{{ $label }}</option>
					@endforeach
				</select>
			</div>
		</div>
		<div class="row" style="margin-top: 15px;">
			<div class="col-sm-4">
				<label class="control-label">Username:</label>
				<input type="text" class="form-control" name="username" placeholder="Username" data-ng-model="new.username" autocomplete="off" required>
			</div>
			<div class="col-sm-4">
				<label class="control-label">Password:</label>
				<input type="password" class="form-control" name="password" placeholder="Password" data-ng-model="new.password" data-ng-required="new.username" autocomplete="off">
			</div>
			<div class="col-sm-4" style="padding-top: 25px;">
				<button class="btn btn-primary" ng-click="createPassword()" type="submit" ng-disabled="!isValidForm()">Add</button>
			</div>
		</div>
	</div>

</div>
<div class="modal-footer">
	<button class="btn btn-default" ng-click="cancel()">Close</button>
</div>