<div class="editor-container">
  <h4 class="bg-primary">Add New System</h4>

  <h4>Found Base Station: <span class="text-success mac-address"> {{baseStationMac | macAddress}} </span></h4>
  
  <form name="newSystemForm" ng-submit="newSystemForm.$valid && doNext()" novalidate>
    <div class="form-group">
    	<label for="room-name">What room is it in?</label>
      <input class="form-control" id="room-name" type="text" name="roomName" placeholder="Enter a room name" ng-model="system.roomName" ng-maxlength="32" required>
      <p class="help-block" ng-show="newSystemForm.roomName.$error.required && newSystemForm.roomName.$dirty">A valid room name is required.</p>
      <p class="help-block" ng-show="newSystemForm.roomName.$error.maxlength && newSystemForm.roomName.$dirty">The room name cannot be longer than 32 characters.</p>
    </div>

    <div class="form-group">
    	<label for="system-name">Enter a name for the system and Save</label>
      <input class="form-control" id="system-name" type="text" name="systemName" placeholder="Enter system name" ng-model="system.name" ng-maxlength="32" required>
      <p class="help-block" ng-show="newSystemForm.systemName.$error.required && newSystemForm.systemName.$dirty">A valid system name is required.</p>
      <p class="help-block" ng-show="newSystemForm.systemName.$error.maxlength && newSystemForm.systemName.$dirty">The system name cannot be longer than 32 characters.</p>
    </div>

    <div class="checkbox">
      <label>
        <input type="checkbox" ng-model="timeFormat" ng-false-value="hh:mm:ss a" ng-true-value="HH:mm:ss"> Use 24-Hour Time 
        <span class="text-muted" current-time="timeFormat"></span>
      </label>
    </div>

    <div class="form-group">
      <label>Set the time zone for the system: </label>
      <select class="max-width--100" ng-model="system.timeZone" ng-options="timeZone as timeZone.name for timeZone in timeZones" ng-change="checkDST()" required></select>
      <div class="checkbox" ng-if="system.timeZone.s_time !== '0.0.0 00:00:00'">
        <label>
          <input type="checkbox" ng-model="system.timezone_dst"> Automatically adjust clock for Daylight Savings Time
        </label>
      </div>
    </div>

    <div class="form-group">
      <label for="customer-address">Enter address of the installation</label>
      <input class="form-control" id="customer-address" type="text" name="customerAddress" placeholder="Enter a address of the installation" ng-model="system.customerAddress" ng-maxlength="255" required>
      <p class="help-block" ng-show="newSystemForm.customerAddress.$error.required && newSystemForm.customerAddress.$dirty">A valid address is required.</p>
      <p class="help-block" ng-show="newSystemForm.customerAddress.$error.maxlength && newSystemForm.customerAddress.$dirty">The address cannot be longer than 255 characters.</p>
    </div>

    <div class="form-group">
      <label for="customer-phone">Enter the customer's phone number</label>
      <input class="form-control" id="customer-phone" type="text" name="customerPhone" placeholder="Enter a phone number" ng-model="system.customerPhone" ng-maxlength="32" required>
      <p class="help-block" ng-show="newSystemForm.customerPhone.$error.required && newSystemForm.customerPhone.$dirty">A valid phone number is required.</p>
      <p class="help-block" ng-show="newSystemForm.customerPhone.$error.maxlength && newSystemForm.customerPhone.$dirty">The phone number cannot be longer than 32 characters.</p>
    </div>

    <div class="form-group">
      <label for="installer-name">Enter the installer's name</label>
      <input class="form-control" id="installer-name" type="text" name="installerName" placeholder="Enter a name" ng-model="system.installerName" ng-maxlength="32" required>
      <p class="help-block" ng-show="newSystemForm.installerName.$error.required && newSystemForm.installerName.$dirty">A valid name is required.</p>
      <p class="help-block" ng-show="newSystemForm.installerName.$error.maxlength && newSystemForm.installerName.$dirty">The name cannot be longer than 32 characters.</p>
    </div>

    <div class="form-group">
      <label for="customer-name">Enter the customer's name</label>
      <input class="form-control" id="customer-name" type="text" name="customerName" placeholder="Enter a name" ng-model="system.customerName" ng-maxlength="32" required>
      <p class="help-block" ng-show="newSystemForm.customerName.$error.required && newSystemForm.customerName.$dirty">A valid name is required.</p>
      <p class="help-block" ng-show="newSystemForm.customerName.$error.maxlength && newSystemForm.customerName.$dirty">The name cannot be longer than 32 characters.</p>
    </div>
    
    <button type="submit" class="btn btn-success pull-right" ng-disabled="newSystemForm.$invalid">Save&nbsp;<i class="fa fa-check-square-o"></i></button>
  </form>

  
</div>