<section data-ng-controller="CustomersUpdateController as customersUpCtrl">

	<div class="modal-header">
		<h3 class="modal-title">Update: {{customer.firstName}} {{customer.surname}}</h3>
	</div>

	<div class="modal-body">
		
    <form name="updateCustomerForm">
      <fieldset>
				<!-- first row -->
      	<div class="row">
      		<!-- show error -->
      		<div class="form-group">
						<div data-ng-show="error" class="text-center text-danger">
							<div class="alert alert-danger" role="alert">
								<strong data-ng-bind="error"></strong>
							</div>
						</div>
					</div>
      		<!-- profile picture -->
      		<div class="col-sm-6 text-center">
      			<i class="glyphicon glyphicon-user cust-profile" ng-class="{'text-primary': customer.referred, 'text-pink': !customer.referred}"></i>
      		</div>
      		<!-- the form fields -->
      		<div class="col-sm-6">

      			<div class="form-group">
          		<label class="control-label" for="firstname">First Name</label>
          		<div class="controls">
            		<input type="text" data-ng-model="customer.firstName" id="firstname" class="form-control">
          		</div>
        		</div>

        		<div class="form-group">
          		<label class="control-label" for="surname">Surname</label>
          		<div class="controls">
            		<input type="text" data-ng-model="customer.surname" id="surname" class="form-control" required>
          		</div>
        		</div>

        		<div class="form-group">
          		<label class="control-label" for="suburb">Suburb</label>
          		<div class="controls">
            		<input type="text" data-ng-model="customer.suburb" id="suburb" class="form-control">
          		</div>
        		</div>

        		<div class="form-group">
          		<label class="control-label" for="country">Country</label>
          		<div class="controls">
            		<input type="text" data-ng-model="customer.country" id="country" class="form-control">
          		</div>
        		</div>

      		</div>
      	</div>
				
				<!-- second row -->
      	<div class="row">
      		<div class="col-sm-6 col-sm-push-6">

      			<div class="form-group">
          		<label class="control-label" for="phone">Phone</label>
          		<div class="controls">
            		<input type="text" data-ng-model="customer.phone" id="phone" class="form-control">
          		</div>
        		</div>

        		<div class="form-group">
          		<label class="control-label" for="email">Email</label>
          		<div class="controls">
            		<input type="text" data-ng-model="customer.email" id="email" class="form-control">
          		</div>
        		</div>
      		</div>

      		<div class="col-sm-6 col-sm-pull-6">
      			
      			<div class="form-group">
          		<label class="control-label" for="referred">Referred</label>
          		<div class="controls">
            		<input type="checkbox" data-ng-model="customer.referred" id="referred" class="form-control checkbox-left">
          		</div>
        		</div>

        		<div class="form-group">
          		<label class="control-label" for="channel">Channel</label>
          		<div class="controls">
            		<input type="text" data-ng-model="customer.channel" id="channel" class="form-control">
          		</div>
        		</div>

      		</div>
      	</div>

				<!-- third row-->
      	<div class="row">
      		<div class="col-sm-6">
      			
						<div class="form-group">
          		<label class="control-label" for="industry">Industry</label>
          		<div class="controls">
            		<input type="text" data-ng-model="customer.industry" id="industry" class="form-control">
          		</div>
        		</div>

      		</div>
      		
      	</div>
  
        
      </fieldset>
    </form>
	
	</div>
	
	<div class="modal-footer">
      			
      <button ng-click="customersUpCtrl.update(controller); ok()"class="btn btn-lg btn-success" ng-disabled="updateCustomerForm.$invalid">Update & Close</button>

      <button ng-click="cancel()" class="btn btn-lg btn-warning">Cancel</button>

	</div>
	
</section>