<div class="row">
	<div class="col-xs-12 col-md-4">
		<label>{{ 'field.label' | translate}}</label>
		<input type="text" ng-model="new_custom_field.label">
	</div>

	<div class="col-xs-10 col-md-6 field-value">
		<div class="row">
			<div class="col-xs-12">
				<label>{{ 'field.value' | translate}}</label>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-8 valueInput">
				<input type="text" ng-model="new_custom_field.value" ng-show="new_custom_field.field_type === 'text'">
				<password-gen ng-model="new_custom_field.value" ng-show="new_custom_field.field_type ==='password'"
							  settings="{generateOnCreate: false }" ></password-gen>
				<span ng-show="new_custom_field.field_type ==='file'">
					<input id="custom_field_file" class="inputfile" type="file" file-select success="addFileToCustomField" error="fileLoadError" progress="fileSelectProgress">
					<label for="custom_field_file"><i class="fa fa-upload" aria-hidden="true"></i> {{ new_custom_field.value.filename || 'select.file' | translate}}</label>
				</span>
			</div>
			<div class="col-xs-4 selectType">
				<select class="form-control" ng-model="new_custom_field.field_type">
					<option value="text">{{ 'text' | translate}}</option>
					<option value="password">{{ 'password' | translate}}</option>
					<option value="file">{{ 'file' | translate}}</option>
				</select>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-12">
				<ng-password-meter ng-if="new_custom_field.field_type ==='password'"
								   password="new_custom_field.value"></ng-password-meter>
			</div>
		</div>
	</div>
	<div class="col-xs-2 col-md-2">
		<label class="invisible">{{'add' | translate}}</label>
		<button ng-click="addCustomField()">+</button>
	</div>
</div>
<div class="row custom_fields" ng-if="storedCredential.custom_fields.length > 0">
	<div class="col-xs-12 table">
		<table>
			<thead>
			<tr use-theme>
				<td class="dragger"></td>
				<th class="field_label">{{ 'label' | translate}}</th>
				<th class="field_value">{{ 'value' | translate}}</th>
				<th class="field_secret">{{ 'type' | translate}}</th>
				<th class="field_actions">{{ 'actions' | translate}}</th>
			</tr>
			</thead>
			<tbody ui-sortable ng-model="storedCredential.custom_fields">
			<tr ng-repeat="field in storedCredential.custom_fields">
				<td class="dragger">
					<i class="fa fa-arrows-v"></i>
				</td>
				<td>
					<a href="#" editable-text="field.label">{{ field.label || "empty" }}</a>
				</td>
				<td>
					<span ng-if="field.field_type === 'text'"><a href="#" editable-text="field.value">{{ field.value || 'empty' | translate }}</a></span>
					<span ng-if="field.field_type === 'password'"><a href="#" editable-password="field.value"><span ng-repeat="n in [] | range:field.value.length">*</span></a></span>
					<span ng-if="field.field_type === 'file'">{{field.value.filename}} ({{field.value.size | bytes}})</span>
				</td>
				<td>{{ field.field_type }}</td>
				<td class="field_actions">
					<i class="fa fa-trash" ng-click="deleteCustomField(field)"></i>
				</td>
			</tr>
			</tbody>
		</table>
	</div>
</div>