<modal-dialog class="dialog" show="app.showDaisyChainCreate" width="85%" height="85%"><div class="dialog-contents"><div><br><div class="all-devices-heading">Group Information</div><div><table><tbody><tr></tr><tr><td class="row-title">Group Name:</td><td class="row-data"><input ng-model="app.gn" ng-change="app.updateGroupName(app.gn)" placeholder="Enter group name..." ng-class="!app.validateGroupName() ? 'group-name-input-invalid' : 'group-name-input-valid'"></td></tr><tr><td class="row-title">Count:</td><td class="row-data" ng-class="app.getCurrentDaisyCount() === 0 ? 'zero-count' : ''">{{app.getCurrentDaisyCount()}}</td></tr><tr><td class="row-title">Parent:</td><td class="row-data" ng-class="app.getCurrentParentCount() === 0 ? 'zero-count' : ''">{{app.getCurrentParentCount()}}</td></tr><tr><td class="row-title">Children:</td><td class="row-data" ng-class="app.getCurrentChildrenCount() === 0 ? 'zero-count' : ''">{{app.getCurrentChildrenCount()}}</td></tr></tbody></table></div><br><div class="all-devices-heading">All Devices</div><br><label class="daisy-search-label">Find Devices: <input class="daisy-search-input" placeholder="Filter by Name, Model, IP, or MAC..." size="35" ng-model="app.filterDaisyText"></label><div class="daisy-drag-and-drop" ng-hide="app.deviceList.length === 0"><div class="drop-box"><div><ul dnd-list="models.lists.A" dnd-horizontal-list="true"><li ng-repeat="item in models.lists.A | filter: app.filterDaisyText" dnd-draggable="item" dnd-disable-if="app.deviceInDaisyChain(item)" dnd-moved="app.removeCreateDaisyItemByMac(item)" dnd-dragstart="app.dragStartPosition(event, item)" dnd-effect-allowed="move" dnd-selected="models.selected = item && !app.deviceInDaisyChain(item)"><div class="device-info filtercontainerdaisy format-drag-box" ng-class="app.deviceInDaisyChain(item) ? 'disable-daisy-draggable' : ''"><span class="desc"><div class="device-icon-area"><img ng-src="{{item.image}}"></div><div class="device-editable-area"><div class="dev-title left-container-title">{{item.name}}</div><div class="model left-container-title">{{item.model}}</div><div class="addr ip-addr left-container-title">{{item.ip}}</div><div class="mac-addr-daisy left-container-title">{{item.mac}}</div></div></span></div></li></ul></div></div><div></div><div class="all-devices-heading">Parent</div><div ng-class="models.lists.B.length === 1 ? 'drop-box-parent' : 'drop-box'"><ul dnd-list="models.lists.B" dnd-horizontal-list="true" dnd-disable-if="models.lists.B.length >= 1"><li ng-repeat="item in models.lists.B" dnd-draggable="item" dnd-disable-if="app.deviceInDaisyChain(item)" dnd-moved="models.lists.B.splice($index, 1)" dnd-dragstart="app.dragStartPosition(event, item)" dnd-effect-allowed="move" dnd-selected="models.selected = item"><div class="device-info filtercontainerdaisy format-drag-box"><span class="desc"><div class="device-icon-area"><img ng-src="{{item.image}}"></div><div class="device-editable-area"><div class="dev-title left-container-title">{{item.name}}</div><div class="model left-container-title">{{item.model}}</div><div class="addr ip-addr left-container-title">{{item.ip}}</div><div class="mac-addr-daisy left-container-title">{{item.mac}}</div></div></span></div></li><div class="center-outer-parent-wrapper"><img class="center-inner-child" style="width: 300px; height: 175px; padding-top: 15px !important" dnd-list="models.lists.B" draggable="false" ng-show="models.lists.B.length === 0" src="assets/drop-parent.png"></div></ul></div><div class="all-devices-heading">Children</div><div class="drop-box"><ul dnd-list="models.lists.C" dnd-disable-if="models.lists.C.length >= 7"><li ng-repeat="item in models.lists.C" dnd-draggable="item" dnd-disable-if="app.deviceInDaisyChain(item)" dnd-moved="models.lists.C.splice($index, 1)" dnd-dragstart="app.dragStartPosition(event, item)" dnd-effect-allowed="move" dnd-selected="models.selected = item"><div class="device-info filtercontainerdaisy format-drag-box"><span class="desc"><div class="device-icon-area"><img ng-src="{{item.image}}"></div><div class="device-editable-area"><div class="dev-title left-container-title">{{item.name}}</div><div class="model left-container-title">{{item.model}}</div><div class="addr ip-addr left-container-title">{{item.ip}}</div><div class="mac-addr-daisy left-container-title">{{item.mac}}</div></div></span></div></li><div class="center-outer-parent-wrapper"><img class="center-inner-child" style="width: 300px; height: 175px; padding-top: 18px !important" dnd-list="models.lists.C" draggable="false" ng-show="models.lists.C.length === 0" src="assets/drop-child.png"></div></ul></div></div><br><br><div class="center-outer-parent-wrapper"><div class="center-inner-child"><div class="dialog-button" ng-click="app.constructDaisyChainRequest(1)" ng-class="!app.validateDaisyChain() ? 'disable-daisy-save' : ''">Create</div><div class="dialog-button" ng-click="app.clearDaisyChain()">Clear</div><div class="dialog-button" ng-click="app.hideDaisyConfiguration()">Exit</div><br><br><div class="form-input-error" ng-show="app.checkForGroupNameDuplicate()">Group name must be unique</div><div class="form-input-error" ng-show="app.checkForGroupNameInvalidChars()">Valid group name characters are <b><code>A-Z </code><code>a-z </code><code>0-9 </code><code>- </code><code>_</code></b></div><div class="form-input-error" ng-show="app.checkGroupNameLength()">Group name must be less than 25 characters</div><div class="form-input-error" ng-show="!app.groupNameExists()">A group name must be assigned</div><div class="form-input-error" ng-show="!app.groupMinimumCountMet()">Group must consist of at least one parent and one child</div></div></div></div></div></modal-dialog>