<preloader full-screen ng-if="!addRoom.viewReady"> </preloader>
<div class="form-group create-event-wrapper" ng-if="addRoom.viewReady">
  <span ng-show="addRoom.showNoRoomsMessage()"> There are no rooms for this site </span>
  <span ng-hide="addRoom.showNoRoomsMessage()">
    <div class="row">
      <div class="col-md-3 pull-left">
        <label>Add Rooms</label>
      </div>
      <div class="col-md-8 pull-right text-right">
          <svg viewBox="0 0 32 32" class="icon icon-check-circle">
	            <use xlink:href="#check-circle"></use>
          </svg> Available &nbsp;
          <svg viewBox="0 0 32 32" class="icon icon-clock3">
	            <use xlink:href="#clock3"></use>
          </svg> Reservation Pending &nbsp;
          <svg viewBox="0 0 32 32" class="icon icon-minus-circle">
	            <use xlink:href="#minus-circle"></use>
          </svg> Reserved &nbsp;
      </div>
    </div>
    <div class="input-group">
      <ui-select ng-model="addRoom.chosenRoom" name="chosenRoom">
        <ui-select-match placeholder="Select {{addRoom.chosenSite}} Rooms" >
          {{ $select.selected.name}}
        </ui-select-match>
        <ui-select-choices class="ui-select-dropdown dropdown-menu" ui-disable-choice="room.roomStatus !== addRoom.available" repeat="room in ( addRoom.rooms | filter: {name: $select.search}) track by room.id+room.displayName+room.reservationId+room.reservationStart+room.reservationEnd+room.reservationEvent">
          <div class="ui-select-choices-group container-fluid condensed-grid">
            <li>
            <div class="row">
              <h4 class="soft-half-left">{{room.name}}</h4>
            </div>
            <div class="row">
              <div class="col-md-4 pull-left">
                <div><span class="bold">Chairs only</span> capacity</div>
                <div><span class="bold">Chairs with tables</span> capacity</div>
              </div>
              <div class="col-md-1 pull-left">
                <div class="text-right">{{room.theaterCapacity}}</div>
                <div class="text-right">{{room.banquetCapacity}}</div>
              </div>
              <div class="col-md-5 pull-right text-right create-event-wrapper">
                <div class="row">
                <svg-icon icon="check-circle" ng-show="room.roomStatus === null"> </svg-icon>
                <svg-icon icon="minus-circle" ng-show="room.roomStatus === true"> </svg-icon>
                <svg-icon icon="clock3" ng-show="room.roomStatus === false"> </svg-icon>
                {{room.displayName}}
                </div>
                <div ng-if="room.roomStatus !== null" class="row">
                  {{room.reservationStart | date: 'MMM d, y h:mm a'}} - {{room.reservationEnd | date: 'MMM d, y h:mm a'}}
                </div>
              </div>
            </div>
          </div>
        </ui-select-choices>
      </ui-select>
      <span class="input-group-btn">
        <button class="btn btn-standard" ng-click="addRoom.onAdd()"> Add Room </button>
      </span>
</div>
<div ng-if="addRoom.viewReady && addRoom.roomData.length == 0" ng-hide="addRoom.showNoRoomsMessage()">
  <p class="lead"><span class="badge brand-warning">No Room(s) Added</span></p>
</div>
</span>

<!-- The rooms choosen -->
<span ng-repeat="currentRoom in addRoom.roomData">
    <room-form current-room="currentRoom"
               layouts="addRoom.layouts"
               equipment-lookup="addRoom.equipmentList"
               ng-hide="addRoom.isCancelled(currentRoom)"
               remove-room="addRoom.removeRoom(currentRoom)">
    </room-form>
  </span>