<style>
    #idmAutoTardyUserTemplate table.grid th {
        text-align: left;
    }

    .idm_userTable input[type="checkbox"] {
        margin-left: 0px;
        margin-right: 0px;
    }

    .idm_configMultiCheckbox {
        display: flex;
    }

    .idm_configMultiCheckbox div {
        display: flex;
        flex-direction: column;
    }

    .idm_borderLeftStrong {
        border-left-width: 3px !important;
    }

    .idm_borderRightStrong {
        border-right-width: 3px !important;
    }
</style>

<div class="box-round">
    <div
        data-pss-grid-widget
        data-data="ctrlData.schoolUsers"
        data-filtered-data="ctrlData.filteredUsers"
        data-pss-message-prefixes="psx.htmlc.idm"
        data-client-side-pagination="true"
        data-pagination-controls="pgController"
    >
        <div class="button-row">
            <button data-ng-class="{'disabled': handSelected.length == 0}" data-ng-click="massDialog()">Mass Edit</button>
            <button data-ng-class="{'disabled': handSelected.length == 0}" data-ng-click="selectUsers()">Select User(s)</button>
            <button data-ng-click="exportCSV()">Export to CSV</button>
            <button data-ng-click="createUserTemplate()">Create User(s)</button>
        </div>
        <table class="grid idm_userTable">
            <tr>
                <th rowspan="2" data-ng-click="handSelect(pgController.filteredItemsAllPages)" style="text-align:center;vertical-align:middle;">
                    <input type="checkbox" data-ng-checked="handSelected.length == pgController.filteredItemsAllPages.length && handSelected.length > 0">
                </th>
                <th class="idm_userInfo" colspan="4" data-ng-if="ctrlData.args.curschoolid == '0'">User Info</th>
                <th class="idm_userInfo" colspan="3" data-ng-if="ctrlData.args.curschoolid != '0'">User Info</th>
                <th class="idm_officeInfo">Office</th>
                <th class="idm_kioskInfo" colspan="5">Kiosk</th>
                <th rowspan="2"></th>
            </tr>
            <tr>
                <th class="idm_userInfo" data-pss-sort-fields="lastfirst">Name</th>
                <th class="idm_userInfo" data-pss-sort-fields="homeschoolid|multiselect" data-filter-info="ctrlData.map.schools" data-ng-show="ctrlData.args.curschoolid == '0'">Home School</th>
                <th class="idm_userInfo" data-pss-sort-fields="loginid">Username</th>
                <th class="idm_userInfo" data-pss-sort-fields="groupvalue">Default Group</th>
                <th class="idm_officeInfo" data-pss-sort-fields="defaultCode">Default Att Code</th>
                <th class="idm_kioskInfo" data-pss-sort-fields="kioskCodeOptions|multiselect" data-filter-info="ctrlData.map.yesno">Att Codes</th>
                <th class="idm_kioskInfo" data-pss-sort-fields="kioskPopupInformation|multiselect" data-filter-info="ctrlData.map.popupInformation">Popup Info</th>
                <th class="idm_kioskInfo" data-pss-sort-fields="kioskDenialReasons|multiselect" data-filter-info="ctrlData.map.scanResults">Denial Reasons</th>
                <th class="idm_kioskInfo" data-pss-sort-fields="noAttendanceRecord|multiselect" data-filter-info="ctrlData.map.yesno2">Create Att Records</th>
                <th class="idm_kioskInfo" data-pss-sort-fields="kioskUser|multiselect" data-filter-info="ctrlData.map.yesno3" data-default-filter="initial">Kiosk Mode Only</th>
            </tr>
            <tr data-ng-repeat="user in ctrlData.filteredUsers">
                <td data-ng-click="handSelect([user])" style="text-align:center;vertical-align:middle;">
                    <input type="checkbox" data-ng-checked="handSelected.includes(user)">
                </td>
                <td class="idm_userInfo"><a href="/admin/faculty/idm_autoTardy.html?frn=005{{user.teachersdcid}}" target="_blank">{{user.lastfirst}}</a></td>
                <td class="idm_userInfo" data-ng-show="ctrlData.args.curschoolid == '0'">{{ctrlData.map.schoolsInverted[user.homeschoolid]}}</td>
                <td class="idm_userInfo">{{user.loginid}}</td>
                <td class="idm_userInfo">{{ctrlData.map.groupsInverted[user.groupvalue]}} ({{user.groupvalue}})</td>
                <td class="idm_officeInfo">
                    <span data-ng-show="!user.edit">{{user.defaultCode}}</span>
                    <select data-ng-show="user.edit" data-ng-model="user.edit.defaultCode">
                        <option value="default" data-ng-selected="user.edit.defaultCode == ''" data-ng-if="ctrlData.args.prefs['defaultAttendanceCode-S' + user.homeschoolid]">School Default ({{args.prefs["defaultAttendanceCode-S" + user.homeschoolid]}})</option>
                        <option value="default" data-ng-selected="user.edit.defaultCode == ''" data-ng-if="!ctrlData.args.prefs['defaultAttendanceCode-S' + user.homeschoolid]">District Default ({{args.prefs["defaultAttendanceCode"]}})</option>
                        <option data-ng-repeat="attCode in attCodes" value="{{attCode.att_codeKey}}">{{attCode.description}}</option>
                    </select>
                </td>
                <td class="idm_kioskInfo">
                    <span data-ng-show="!user.edit && user.kioskCodeOptions[0] != 'default'">{{user.kioskCodeOptions.join(", ")}}</span>
                    <div data-ng-show="user.edit" class="idm_configMultiCheckbox">
                        <div>
                            <label><input type="radio" name="idm_kioskCodeOptionsStatic" data-ng-click="user.edit.kioskCodeOptions=['default']" data-ng-checked="user.edit.kioskCodeOptions.length==0 || (user.edit.kioskCodeOptions.length==1 && user.edit.kioskCodeOptions[0]=='default')"> Any Kiosk Code</label>
                            <hr>
                            <!--<label><input type="radio" name="idm_kioskCodeOptionsStatic" data-ng-click="user.edit.kioskCodeOptions=['none']" data-ng-checked="user.edit.kioskCodeOptions.length==1 && user.edit.kioskCodeOptions[0]=='none'"> None</label>-->
                            <label data-ng-repeat="attCode in attCodesKiosk"><input type="checkbox" value="-1" data-ng-click="toggleFieldValue(user.edit, 'kioskCodeOptions', attCode.att_codeKey)" data-ng-checked="user.edit.kioskCodeOptions.includes(attCode.att_codeKey)"> {{attCode.description}}</label>
                        </div>
                    </div>
                </td>
                <td class="idm_kioskInfo">
                    <span data-ng-show="!user.edit">
                        <span data-ng-repeat="info in user.kioskPopupInformation">{{ctrlData.map.popupInformationInverted[info]}}<br></span>
                    </span>
                    <div data-ng-show="user.edit" class="idm_configMultiCheckbox">
                        <div>
                            <label><input type="radio" name="idm_kioskPopupInformationStatic" data-ng-click="user.edit.kioskPopupInformation=['default']" data-ng-checked="user.edit.kioskPopupInformation.length==0 || (user.edit.kioskPopupInformation.length==1 && user.edit.kioskPopupInformation[0]=='default')"> School Default</label>
                            <hr>
                            <label><input type="radio" name="idm_kioskPopupInformationStatic" data-ng-click="user.edit.kioskPopupInformation=['none']" data-ng-checked="user.edit.kioskPopupInformation.length==1 && user.edit.kioskPopupInformation[0]=='none'"> None</label>
                            <label><input type="checkbox" value="photo" data-ng-click="toggleFieldValue(user.edit, 'kioskPopupInformation', 'photo')" data-ng-checked="user.edit.kioskPopupInformation.includes('photo')"> Student Photo</label>
                            <label><input type="checkbox" value="name" data-ng-click="toggleFieldValue(user.edit, 'kioskPopupInformation', 'name')" data-ng-checked="user.edit.kioskPopupInformation.includes('name')"> Student Name</label>
                            <label><input type="checkbox" value="identifier" data-ng-click="toggleFieldValue(user.edit, 'kioskPopupInformation', 'identifier')" data-ng-checked="user.edit.kioskPopupInformation.includes('identifier')"> Student Identifier</label>
                            <label><input type="checkbox" value="reason" data-ng-click="toggleFieldValue(user.edit, 'kioskPopupInformation', 'reason')" data-ng-checked="user.edit.kioskPopupInformation.includes('reason')"> Denial Reason</label>
                        </div>
                    </div>
                </td>
                <td class="idm_kioskInfo">
                    <span data-ng-show="!user.edit">
                        <span data-ng-repeat="reason in user.kioskDenialReasons">{{ctrlData.map.scanResultsInverted[reason].replace("Denied - ", "")}}<br></span>
                    </span>
                    <div data-ng-show="user.edit" class="idm_configMultiCheckbox">
                        <div>
                            <label><input type="radio" name="idm_kioskDenialReasonsStatic" data-ng-click="user.edit.kioskDenialReasons=['default']" data-ng-checked="user.edit.kioskDenialReasons.length==0 || (user.edit.kioskDenialReasons.length==1 && user.edit.kioskDenialReasons[0]=='default')"> School Default</label>
                            <hr>
                            <label><input type="radio" name="idm_kioskDenialReasonsStatic" data-ng-click="user.edit.kioskDenialReasons=['none']" data-ng-checked="user.edit.kioskDenialReasons.length==1 && user.edit.kioskDenialReasons[0]=='none'"> None</label>
                            <label><input type="checkbox" value="-2" data-ng-click="toggleFieldValue(user.edit, 'kioskDenialReasons', '-2')" data-ng-checked="user.edit.kioskDenialReasons.includes('-2')"> Different School</label>
                            <label><input type="checkbox" value="-3" data-ng-click="toggleFieldValue(user.edit, 'kioskDenialReasons', '-3')" data-ng-checked="user.edit.kioskDenialReasons.includes('-3')"> Denied Attendance</label>
                            <label><input type="checkbox" value="-4" data-ng-click="toggleFieldValue(user.edit, 'kioskDenialReasons', '-4')" data-ng-checked="user.edit.kioskDenialReasons.includes('-4')"> Inactive Enrollment</label>
                            <label><input type="checkbox" value="-5" data-ng-click="toggleFieldValue(user.edit, 'kioskDenialReasons', '-5')" data-ng-checked="user.edit.kioskDenialReasons.includes('-5')"> No Membership</label>
                            <label><input type="checkbox" value="-6" data-ng-click="toggleFieldValue(user.edit, 'kioskDenialReasons', '-6')" data-ng-checked="user.edit.kioskDenialReasons.includes('-6')"> Recent Scan</label>
                        </div>
                    </div>
                </td>
                <td class="idm_kioskInfo">
                    <span data-ng-show="!user.edit">
                        <span data-ng-show="user.noAttendanceRecord == '0'">Yes</span>
                        <span data-ng-show="user.noAttendanceRecord == '1'">No</span>
                    </span>
                    <select data-ng-show="user.edit" data-ng-model="user.edit.noAttendanceRecord">
                        <option value="0">Yes</option>
                        <option value="1">No</option>
                    </select>
                </td>
                <td class="idm_kioskInfo">
                    <span data-ng-show="!user.edit">
                        <span data-ng-show="user.kioskUser == '0'">No</span>
                        <span data-ng-show="user.kioskUser == '1'">Yes</span>
                    </span>
                    <select data-ng-show="user.edit" data-ng-model="user.edit.kioskUser">
                        <option value="0">No</option>
                        <option value="1">Yes</option>
                    </select>
                </td>
                <td style="white-space:nowrap;">
                    <button type="button" data-ng-click="toggleEdit(user)" data-ng-show="!user.edit"><i class="fa fa-edit"></i></button>
                    <button type="button" data-ng-click="toggleEdit(user)" data-ng-show="user.edit">Cancel</button>
                    <button type="button" data-ng-click="setFields(user.edit, [user])" data-ng-show="user.edit">Submit</button>
                    <button data-ng-if="user.kioskUser == '1' && user.loggedIn == '1'" data-ng-click="setFields({'forceLogOff': '1'}, [user])" data-ng-class="{'disabled': user.forceLogOff == '1'}">Log Off</button>
                </td>
            </tr>
        </table>
        <label data-pss-filter-field="loggedIn|multiselect" data-filter-info="ctrlData.map.yesno">Logged In</label>
    </div>

    <div id="idMFOTMDialogHolder" class="hide">
        <div id="idmAutoTardyMassSetting">
            <table class="grid">
                <tr>
                    <th>Default Office Att Code</th>
                    <td>
                        <select data-ng-model="massEdit.defaultCode">
                            <option value="">No Change</option>
                            <option value="default">School/District Default</option>
                            <option data-ng-repeat="attCode in attCodes" value="{{attCode.att_codeKey}}">{{attCode.description}}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th>Kiosk Att Codes</th>
                    <td>
                        <div class="idm_configMultiCheckbox">
                            <div>
                                <label><input type="radio" value="" name="" data-ng-click="massEdit.kioskCodeOptions=[]" data-ng-checked="massEdit.kioskCodeOptions.length==0"> No Change</label>
                                <label><input type="radio" value="" name="" data-ng-click="massEdit.kioskCodeOptions=['default']" data-ng-checked="massEdit.kioskCodeOptions.length==1 && massEdit.kioskCodeOptions[0]=='default'"> Any Kiosk Code</label>
                                <hr>
                                <label data-ng-repeat="attCode in attCodesKiosk"><input type="checkbox" value="-1" data-ng-click="toggleFieldValue(massEdit, 'kioskCodeOptions', attCode.att_codeKey)" data-ng-checked="massEdit.kioskCodeOptions.includes(attCode.att_codeKey)"> {{attCode.description}}</label>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th>Kiosk Popup Info</th>
                    <td>
                        <div class="idm_configMultiCheckbox">
                            <div>
                                <label><input type="radio" name="" data-ng-click="massEdit.kioskPopupInformation=[]" data-ng-checked="massEdit.kioskPopupInformation.length==0"> No Change</label>
                                <label><input type="radio" name="" data-ng-click="massEdit.kioskPopupInformation=['default']" data-ng-checked="massEdit.kioskPopupInformation.length==1 && massEdit.kioskPopupInformation[0]=='default'"> School Default</label>
                                <hr>
                                <label><input type="radio" name="" data-ng-click="massEdit.kioskPopupInformation=['none']" data-ng-checked="massEdit.kioskPopupInformation.length==1 && massEdit.kioskPopupInformation[0]=='none'"> None</label>
                                <label><input type="checkbox" value="photo" data-ng-click="toggleFieldValue(massEdit, 'kioskPopupInformation', 'photo', true)" data-ng-checked="massEdit.kioskPopupInformation.includes('photo')"> Student Photo</label>
                                <label><input type="checkbox" value="name" data-ng-click="toggleFieldValue(massEdit, 'kioskPopupInformation', 'name', true)" data-ng-checked="massEdit.kioskPopupInformation.includes('name')"> Student Name</label>
                                <label><input type="checkbox" value="number" data-ng-click="toggleFieldValue(massEdit, 'kioskPopupInformation', 'number', true)" data-ng-checked="massEdit.kioskPopupInformation.includes('number')"> Student Identifier</label>
                                <label><input type="checkbox" value="reason" data-ng-click="toggleFieldValue(massEdit, 'kioskPopupInformation', 'reason', true)" data-ng-checked="massEdit.kioskPopupInformation.includes('reason')"> Denial Reason</label>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th>Kiosk Denial Reasons</th>
                    <td>
                        <div class="idm_configMultiCheckbox">
                            <div>
                                <label><input type="radio" name="" data-ng-click="massEdit.kioskDenialReasons=[]" data-ng-checked="massEdit.kioskDenialReasons.length==0"> No Change</label>
                                <label><input type="radio" name="" data-ng-click="massEdit.kioskDenialReasons=['default']" data-ng-checked="massEdit.kioskDenialReasons.length==1 && massEdit.kioskDenialReasons[0]=='default'"> School Default</label>
                                <hr>
                                <label><input type="radio" name="" data-ng-click="massEdit.kioskPopupInformation=['none']" data-ng-checked="massEdit.kioskDenialReasons.length==1 && massEdit.kioskDenialReasons[0]=='none'"> None</label>
                                <label><input type="checkbox" value="-2" data-ng-click="toggleFieldValue(massEdit, 'kioskDenialReasons', '-2', true)" data-ng-checked="massEdit.kioskDenialReasons.includes('-2')"> Different School</label>
                                <label><input type="checkbox" value="-3" data-ng-click="toggleFieldValue(massEdit, 'kioskDenialReasons', '-3', true)" data-ng-checked="massEdit.kioskDenialReasons.includes('-3')"> Denied Attendance</label>
                                <label><input type="checkbox" value="-4" data-ng-click="toggleFieldValue(massEdit, 'kioskDenialReasons', '-4', true)" data-ng-checked="massEdit.kioskDenialReasons.includes('-4')"> Inactive Enrollment</label>
                                <label><input type="checkbox" value="-5" data-ng-click="toggleFieldValue(massEdit, 'kioskDenialReasons', '-5', true)" data-ng-checked="massEdit.kioskDenialReasons.includes('-5')"> No Membership</label>
                                <label><input type="checkbox" value="-6" data-ng-click="toggleFieldValue(massEdit, 'kioskDenialReasons', '-6', true)" data-ng-checked="massEdit.kioskDenialReasons.includes('-6')"> Recent Scan</label>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th>Create Att Records</th>
                    <td>
                        <select data-ng-model="massEdit.noAttendanceRecord">
                            <option value="">No Change</option>
                            <option value="0">Yes</option>
                            <option value="1">No</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th>Kiosk Mode Only</th>
                    <td>
                        <select data-ng-model="massEdit.kioskUser">
                            <option value="">No Change</option>
                            <option value="0">No</option>
                            <option value="1">Yes</option>
                        </select>
                    </td>
                </tr>
            </table>
        </div>
        <div id="idmAutoTardyUserTemplate">
            <table class="grid">
                <tr>
                    <th>Template</th>
                    <th>Value</th>

                    <th data-ng-if="ctrlData.errorUsers.length == 0" data-ng-repeat="preview in rangeCount(userTemplate.startIndex, userTemplate.count)" data-ng-show="$index < 5">Preview {{preview}}</th>
                    <th data-ng-if="ctrlData.errorUsers.length == 0" data-ng-show="userTemplate.count > 5">Preview {{userTemplate.startIndex+userTemplate.count-1}}</th>

                    <th data-ng-if="ctrlData.errorUsers.length > 0" data-ng-repeat="errorUser in ctrlData.errorUsers" data-ng-show="$index < 5" class="feedback-error">Error {{errorUser.newUser.index}}</th>
                </tr>
                <tr>
                    <th>Starting From This Value</th>
                    <td>
                        <input type="number" data-ng-model="userTemplate.startIndex" min="0">
                    </td>
                    
                    <td data-ng-if="ctrlData.errorUsers.length == 0" data-ng-repeat="preview in rangeCount(userTemplate.startIndex, userTemplate.count)" data-ng-show="$index < 5">{{preview}}</td>
                    <td data-ng-if="ctrlData.errorUsers.length == 0" data-ng-show="userTemplate.count > 5">{{userTemplate.startIndex+userTemplate.count-1}}</td>

                    <td data-ng-if="ctrlData.errorUsers.length > 0" colspan="20"></td>
                </tr>
                <tr data-ng-if="ctrlData.errorUsers.length > 0">
                    <th>Error Index(es)</th>
                    <td>{{_.pluck(_.pluck(ctrlData.errorUsers, 'newUser'), 'index').join(", ")}}</td>
                    <td data-ng-repeat="errorUser in ctrlData.errorUsers" data-ng-show="$index < 5">{{errorUser.newUser.index}}</td>
                </tr>
                <tr>
                    <th>Number of User Accounts to Create</th>
                    <td>
                        <input type="number" data-ng-model="userTemplate.count" min="1">
                    
                    </td>
                    
                    <td colspan="20">
                        {{userTemplate.count}} Account(s) ({{userTemplate.startIndex}} - {{userTemplate.startIndex+userTemplate.count-1}})
                        <span data-ng-show="ctrlData.errorUsers.length > 0" class="bold"><br>{{ctrlData.errorUsers.length}} Errors</span>
                    </td>
                </tr>
                
                <tr>
                    <th data-ng-class="{'feedback-error': templateModified === true && missingFields.includes('first_name')}">First Name*</th>
                    <td>
                        <input type="text" data-ng-model="userTemplate.first_name">
                    </td>

                    <td data-ng-if="ctrlData.errorUsers.length == 0" data-ng-repeat="preview in rangeCount(userTemplate.startIndex, userTemplate.count)" data-ng-show="$index < 5">{{userTemplate.first_name.replaceAll('?', preview)}}</td>
                    <td data-ng-if="ctrlData.errorUsers.length == 0" data-ng-show="userTemplate.count > 5">{{userTemplate.first_name.replaceAll('?', (userTemplate.startIndex+userTemplate.count-1))}}</td>

                    <td data-ng-if="ctrlData.errorUsers.length > 0" data-ng-repeat="errorUser in ctrlData.errorUsers" data-ng-show="$index < 5">{{errorUser.newUser.first_name}}</td>
                </tr>
                <tr>
                    <th data-ng-class="{'feedback-error': templateModified === true && missingFields.includes('last_name')}">Last Name*</th>
                    <td>
                        <input type="text" data-ng-model="userTemplate.last_name">
                    </td>

                    <td data-ng-if="ctrlData.errorUsers.length == 0" data-ng-repeat="preview in rangeCount(userTemplate.startIndex, userTemplate.count)" data-ng-show="$index < 5">{{userTemplate.last_name.replaceAll('?', preview)}}</td>
                    <td data-ng-if="ctrlData.errorUsers.length == 0" data-ng-show="userTemplate.count > 5">{{userTemplate.last_name.replaceAll('?', (userTemplate.startIndex+userTemplate.count-1))}}</td>

                    <td data-ng-if="ctrlData.errorUsers.length > 0" data-ng-repeat="errorUser in ctrlData.errorUsers" data-ng-show="$index < 5">{{errorUser.newUser.first_name}}</td>
                </tr>
                <tr>
                    <th data-ng-class="{'feedback-error': templateModified === true && missingFields.includes('teachernumber')}">Teacher Number*</th>
                    <td>
                        <input type="text" data-ng-model="userTemplate.teachernumber">
                    </td>

                    <td data-ng-if="ctrlData.errorUsers.length == 0" data-ng-repeat="preview in rangeCount(userTemplate.startIndex, userTemplate.count)" data-ng-show="$index < 5">{{userTemplate.teachernumber.replaceAll('?', preview)}}</td>
                    <td data-ng-if="ctrlData.errorUsers.length == 0" data-ng-show="userTemplate.count > 5">{{userTemplate.teachernumber.replaceAll('?', (userTemplate.startIndex+userTemplate.count-1))}}</td>

                    <td data-ng-if="ctrlData.errorUsers.length > 0" data-ng-repeat="errorUser in ctrlData.errorUsers" data-ng-show="$index < 5">{{errorUser.newUser.teachernumber}}</td>
                </tr>
                <tr data-ng-if="overlapTeachernumber.length > 0">
                    <th class="feedback-error">Teacher Number Already Used By:</th>
                    <td class="bold">{{overlapTeachernumber.length}}</td>

                    <td data-ng-repeat="errorUser in ctrlData.errorUsers" data-ng-show="$index < 5">
                        <span class="bold" data-ng-show="overlapTeachernumber.includes(errorUser.existUser.teachernumber)">{{errorUser.existUser.lastfirst}}</span>
                    </td>
                </tr>
                <tr>
                    <th data-ng-class="{'feedback-error': templateModified === true && missingFields.includes('loginid')}">Username*</th>
                    <td>
                        <input type="text" data-ng-model="userTemplate.loginid">
                    </td>

                    <td data-ng-if="ctrlData.errorUsers.length == 0" data-ng-repeat="preview in rangeCount(userTemplate.startIndex, userTemplate.count)" data-ng-show="$index < 5">{{userTemplate.loginid.replaceAll('?', preview)}}</td>
                    <td data-ng-if="ctrlData.errorUsers.length == 0" data-ng-show="userTemplate.count > 5">{{userTemplate.loginid.replaceAll('?', (userTemplate.startIndex+userTemplate.count-1))}}</td>

                    <td data-ng-if="ctrlData.errorUsers.length > 0" data-ng-repeat="errorUser in ctrlData.errorUsers" data-ng-show="$index < 5">{{errorUser.newUser.loginid}}</td>
                </tr>
                <tr data-ng-if="overlapLoginid.length > 0">
                    <th class="feedback-error">Username Already Used By:</th>
                    <td class="bold">{{overlapLoginid.length}}</td>

                    <td data-ng-repeat="errorUser in ctrlData.errorUsers" data-ng-show="$index < 5">
                        <span class="bold" data-ng-show="overlapLoginid.includes(errorUser.existUser.loginid)">{{errorUser.existUser.lastfirst}}</span>
                    </td>
                </tr>
                <tr>
                    <th data-ng-class="{'feedback-error': templateModified === true && missingFields.includes('password')}">Initial Password*</th>
                    <td>
                        <input type="text" data-ng-model="userTemplate.password">
                    </td>

                    <td data-ng-if="ctrlData.errorUsers.length == 0" data-ng-repeat="preview in rangeCount(userTemplate.startIndex, userTemplate.count)" data-ng-show="$index < 5">{{userTemplate.password.replaceAll('?', preview)}}</td>
                    <td data-ng-if="ctrlData.errorUsers.length == 0" data-ng-show="userTemplate.count > 5">{{userTemplate.password.replaceAll('?', (userTemplate.startIndex+userTemplate.count-1))}}</td>

                    <td data-ng-if="ctrlData.errorUsers.length > 0" data-ng-repeat="errorUser in ctrlData.errorUsers" data-ng-show="$index < 5">{{errorUser.newUser.password}}</td>
                </tr>
                <tr>
                    <th>Email Address</th>
                    <td>
                        <input type="text" data-ng-model="userTemplate.email_addr">
                    </td>

                    <td data-ng-if="ctrlData.errorUsers.length == 0" data-ng-repeat="preview in rangeCount(userTemplate.startIndex, userTemplate.count)" data-ng-show="$index < 5">{{userTemplate.email_addr.replaceAll('?', preview)}}</td>
                    <td data-ng-if="ctrlData.errorUsers.length == 0" data-ng-show="userTemplate.count > 5">{{userTemplate.email_addr.replaceAll('?', (userTemplate.startIndex+userTemplate.count-1))}}</td>

                    <td data-ng-if="ctrlData.errorUsers.length > 0" data-ng-repeat="errorUser in ctrlData.errorUsers" data-ng-show="$index < 5">{{errorUser.newUser.email_addr}}</td>
                </tr>
                <tr>
                    <th>Identity Provider Global ID</th>
                    <td>
                        <input type="text" data-ng-model="userTemplate.idpID">
                    </td>

                    <td data-ng-if="ctrlData.errorUsers.length == 0" data-ng-repeat="preview in rangeCount(userTemplate.startIndex, userTemplate.count)" data-ng-show="$index < 5">{{userTemplate.idpID.replaceAll('?', preview)}}</td>
                    <td data-ng-if="ctrlData.errorUsers.length == 0" data-ng-show="userTemplate.count > 5">{{userTemplate.idpID.replaceAll('?', (userTemplate.startIndex+userTemplate.count-1))}}</td>

                    <td data-ng-if="ctrlData.errorUsers.length > 0" data-ng-repeat="errorUser in ctrlData.errorUsers" data-ng-show="$index < 5">{{errorUser.newUser.idpID}}</td>
                </tr>
                <tr data-ng-if="overlapIDP.length > 0">
                    <th class="feedback-error">ID Already Used By:</th>
                    <td class="bold">{{overlapIDP.length}}</td>

                    <td data-ng-repeat="errorUser in ctrlData.errorUsers" data-ng-show="$index < 5">
                        <span class="bold" data-ng-show="overlapIDP.includes(errorUser.existUser.idpID)">{{errorUser.existUser.lastfirst}}</span>
                    </td>
                </tr>
                <tr>
                    <th>Staff Type</th>
                    <td>
                        <select data-ng-model="userTemplate.staffstatus">
                            <option value="0">Not Assigned</option>
                            <option value="1">Teacher</option>
                            <option value="2">Staff</option>
                            <option value="3">Lunch Staff</option>
                            <option value="4">Substitute</option>
                        </select>
                    </td>
                    <td colspan="10"></td>
                </tr>
                <tr data-ng-class="{'disabled': ctrlData.args.curschoolid != '0'}">
                    <th data-ng-class="{'feedback-error': templateModified === true && missingFields.includes('schoolid')}">Home School*</th>
                    <td>
                        <select data-ng-model="userTemplate.schoolid" data-ng-options="school.schoolid as school.name for school in schools">
                            <option value=""></option>
                            <!--<option data-ng-repeat="school in schools" value="{{school.schoolid}}">{{school.name}}</option>-->
                        </select>
                    </td>
                    <td colspan="10"></td>
                </tr>
                <tr>
                    <th>Default Group</th>
                    <td>
                        <select data-ng-model="userTemplate.group">
                            <option data-ng-repeat="group in groups" value="{{group.number}}">{{group.name}} ({{group.number}})</option>
                        </select>
                    </td>
                    <td colspan="10"></td>
                </tr>
                <tr data-ng-class="{'disabled': userTemplate.kioskUser == '1'}">
                    <th>Available Schools</th>
                    <td>
                        <select data-ng-model="userTemplate.canChangeSchool" multiple>
                            <option data-ng-repeat="school in schools" value="{{school.schoolid}}">{{school.name}}</option>
                        </select>
                    </td>
                    <td colspan="10"></td>
                </tr>
                <tr>
                    <th>Default Office Att Code</th>
                    <td>
                        <select data-ng-model="userTemplate.defaultCode">
                            <option value="">School Default</option>
                            <option data-ng-repeat="attCode in attCodes" value="{{attCode.att_codeKey}}">{{attCode.description}}</option>
                        </select>
                    </td>
                    <td colspan="10"></td>
                </tr>
                <tr>
                    <th>Kiosk Att Codes</th>
                    <td>
                        <div class="idm_configMultiCheckbox">
                            <div>
                                <label><input type="radio" name="idm_kioskCodeOptionsStatic" data-ng-click="userTemplate.kioskCodeOptions=['default']" data-ng-checked="userTemplate.kioskCodeOptions.length==0 || (userTemplate.kioskCodeOptions.length==1 && userTemplate.kioskCodeOptions[0]=='default')"> Any Kiosk Code</label>
                                <hr>
                                <label data-ng-repeat="attCode in attCodesKiosk"><input type="checkbox" value="-1" data-ng-click="toggleFieldValue(userTemplate, 'kioskCodeOptions', attCode.att_codeKey)" data-ng-checked="userTemplate.kioskCodeOptions.includes(attCode.att_codeKey)"> {{attCode.description}}</label>
                            </div>
                        </div>
                    </td>
                    <td colspan="10"></td>
                </tr>
                <tr>
                    <th>Kiosk Popup Info</th>
                    <td>
                        <div class="idm_configMultiCheckbox">
                            <div>
                                <label><input type="radio" name="idm_kioskPopupInformationStatic" data-ng-click="userTemplate.kioskPopupInformation=['default']" data-ng-checked="userTemplate.kioskPopupInformation.length==0 || (userTemplate.kioskPopupInformation.length==1 && userTemplate.kioskPopupInformation[0]=='default')"> School Default</label>
                                <hr>
                                <label><input type="radio" name="idm_kioskPopupInformationStatic" data-ng-click="userTemplate.kioskPopupInformation=['default']" data-ng-checked="userTemplate.kioskPopupInformation.length==1 && userTemplate.kioskPopupInformation[0]=='none'"> None</label>
                                <label><input type="checkbox" value="photo" data-ng-click="toggleFieldValue(userTemplate, 'kioskPopupInformation', 'photo')" data-ng-checked="userTemplate.kioskPopupInformation.includes('photo')"> Student Photo</label>
                                <label><input type="checkbox" value="name" data-ng-click="toggleFieldValue(userTemplate, 'kioskPopupInformation', 'name')" data-ng-checked="userTemplate.kioskPopupInformation.includes('name')"> Student Name</label>
                                <label><input type="checkbox" value="number" data-ng-click="toggleFieldValue(userTemplate, 'kioskPopupInformation', 'number')" data-ng-checked="userTemplate.kioskPopupInformation.includes('number')"> Student Identifier</label>
                                <label><input type="checkbox" value="reason" data-ng-click="toggleFieldValue(userTemplate, 'kioskPopupInformation', 'reason')" data-ng-checked="userTemplate.kioskPopupInformation.includes('reason')"> Denial Reason</label>
                            </div>
                        </div>
                    </td>
                    <td colspan="10"></td>
                </tr>
                <tr>
                    <th>Kiosk Denial Reasons</th>
                    <td>
                        <div class="idm_configMultiCheckbox">
                            <div>
                                <label><input type="radio" name="idm_kioskDenialReasonsStatic" data-ng-click="userTemplate.kioskDenialReasons=['default']" data-ng-checked="userTemplate.kioskDenialReasons.length==0 || (userTemplate.kioskDenialReasons.length==1 && userTemplate.kioskDenialReasons[0]=='default')"> School Default</label>
                                <hr>
                                <label><input type="radio" name="idm_kioskDenialReasonsStatic" data-ng-click="userTemplate.kioskDenialReasons=['none']" data-ng-checked="userTemplate.kioskDenialReasons.length==1 && userTemplate.kioskDenialReasons[0]=='none'"> None</label>
                                <label><input type="checkbox" value="-2" data-ng-click="toggleFieldValue(userTemplate, 'kioskDenialReasons', '-2')" data-ng-checked="userTemplate.kioskDenialReasons.includes('-2')"> Different School</label>
                                <label><input type="checkbox" value="-3" data-ng-click="toggleFieldValue(userTemplate, 'kioskDenialReasons', '-3')" data-ng-checked="userTemplate.kioskDenialReasons.includes('-3')"> Denied Attendance</label>
                                <label><input type="checkbox" value="-4" data-ng-click="toggleFieldValue(userTemplate, 'kioskDenialReasons', '-4')" data-ng-checked="userTemplate.kioskDenialReasons.includes('-4')"> Inactive Enrollment</label>
                                <label><input type="checkbox" value="-5" data-ng-click="toggleFieldValue(userTemplate, 'kioskDenialReasons', '-5')" data-ng-checked="userTemplate.kioskDenialReasons.includes('-5')"> No Membership</label>
                                <label><input type="checkbox" value="-6" data-ng-click="toggleFieldValue(userTemplate, 'kioskDenialReasons', '-6')" data-ng-checked="userTemplate.kioskDenialReasons.includes('-6')"> Recent Scan</label>
                            </div>
                        </div>
                    </td>
                    <td colspan="10"></td>
                </tr>
                <tr>
                    <th>Create Att Records</th>
                    <td>
                        <select data-ng-model="userTemplate.noAttendanceRecord">
                            <option value="0">Yes</option>
                            <option value="1">No</option>
                        </select>
                    </td>
                    <td colspan="10"></td>
                </tr>
                <tr>
                    <th>Kiosk Mode Only</th>
                    <td>
                        <select data-ng-model="userTemplate.kioskUser">
                            <option value="0">No</option>
                            <option value="1">Yes</option>
                        </select>
                    </td>
                    <td colspan="10"></td>
                </tr>
                <tr>
                    <td colspan="12" style="font-style:italic;">
                        * indicates a required field.<br> 
                        Question marks (?) will be replaced with the index of the user being created.<br>
                        This does not verify field validation settings for these users.
                    </td>
                </tr>
            </table>
        </div>

        <div id="idmAutoTardyUserConfirm">
            <p>
                <strong>This action will create {{ctrlData.newUsers.length}} new user accounts.</strong>
                <br>
                This will bypass any field validation and cannot be reversed.<br>
                <br>
                Would you like to continue?
            </p>
        </div>
    </div>
</div>