<ol class="breadcrumb">
	<li><a href="#/">Dashboard</a></li>
	<li><a href="#/complaints">Complaints</a></li>
	<li class="active">{{vm.action}} Complaint</li>
</ol>

<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			<form name="form" class="form-horizontal" ng-submit="vm._save(vm.complaint)" novalidate>
				<input type="hidden" ng-if="vm.action == 'Edit'" name="id" id="id" ng-model="vm.complaint.id">
				<div class="panel panel-midnightblue">
					<div class="panel-heading">
						<h2>{{vm.action}} Complaint</h2>
					</div>
					<div class="panel-body">
						<p>Fields with <span style="color: #cc0000;">*</span> are required.</p>
						<div class="form-group">
							<label for="customer_id" class="col-sm-2 control-label">Customer <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<ui-select required ng-model="vm.complaint.customer_id" ng-disabled="disabled" style="width: 100%" name="customer_id">
									<ui-select-match placeholder="Select a customer...">{{$select.selected.name}}</ui-select-match>
									<ui-select-choices repeat="customer.id as customer in vm._customers | filter: $select.search | limitTo: 40">
										<span ng-bind-html="customer.name | highlight: $select.search"></span>
									</ui-select-choices>
								</ui-select>
								<p class="help-block" ng-show="form.customer_id.$touched && form.customer_id.$error.required">Value is required.</p>
							</div>
						</div>
						<div class="form-group">
							<label for="employee_id" class="col-sm-2 control-label">Employee</label>
							<div class="col-sm-8">
								<ui-select ng-model="vm.complaint.employee_id" ng-disabled="disabled" style="width: 100%" name="employee_id">
									<ui-select-match placeholder="Select an employee...">{{$select.selected.name}}</ui-select-match>
									<ui-select-choices repeat="employee.id as employee in vm._employees | filter: $select.search | limitTo: 40">
										<span ng-bind-html="employee.name | highlight: $select.search"></span>
									</ui-select-choices>
								</ui-select>
							</div>
						</div>
						<div class="form-group">
							<label for="subject" class="col-sm-2 control-label">Subject <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<input type="text" class="form-control" name="subject" id="subject" ng-model="vm.complaint.subject" ng-required="true" ng-minlength="3">
								<p class="help-block" ng-show="form.subject.$touched && form.subject.$error.required">Value is required.</p>
								<p class="help-block" ng-show="form.subject.$touched && form.subject.$error.minlength">Value is too short.</p>
							</div>
						</div>
						<div class="form-group">
							<label for="description" class="col-sm-2 control-label">Description <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<textarea class="form-control" name="description" id="description" ng-model="vm.complaint.description" ng-required="true" ng-minlength="3" rows="7"></textarea>
								<p class="help-block" ng-show="form.description.$touched && form.description.$error.required">Value is required.</p>
								<p class="help-block" ng-show="form.description.$touched && form.description.$error.minlength">Value is too short.</p>
							</div>
						</div>
					</div>
					<div class="panel-footer">
						<div class="row">
							<div class="col-sm-8 col-sm-offset-2">
								<button type="submit" ng-disabled="!form.$valid" class="btn-primary btn">Save</button>
								<a href="#/complaints" class="btn-default btn">Cancel</a>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
