<div class="modal-content scroll scrollbar-juicy-peach" <%= (App.rtl ? 'style="direction:rtl"' : '') %> >
        <div style="padding-bottom: 50px">
            <h4 style="font-size: 1.2rem">{Literal}Edit Employee{/Literal}</h4>
        </div>
        <div id="employees-form-content">
            <form>
                <div class="row">
                    <div class="input-field col s12">
                        <div class="row checkboxes">
                            <div class="input-field col s12 m2 mgmt">
                                <label>
                                    <input <%= isCreateMode ? '' : 'disabled' %> id="management" class="scale filled-in advanced" type="checkbox" <%= employee.userType == 'MGMT' ? 'checked' : '' %> class="filled-in" />
                                    <span>{Literal}Management{/Literal}</span>
                                </label>
                            </div>
                            <div class="input-field col s12 m2 pos" >
                                <label>
                                    <input type="checkbox" id="posUserSwitch" class="scale filled-in advanced" <%= employee.isPosUser ? 'checked': '' %>>
                                    <span>{Literal}POS User{/Literal}</span>
                                </label>
                            </div>
                            <% if (App.serverInfo.hasAccuShift) {%>
                                <div class="input-field col s12 m2 pos" >
                                    <label>
                                        <input type="checkbox" id="accuShiftSwitch" class="scale filled-in advanced" <%= employee.isEmployee || employee.accuShiftSwitch ? 'checked': '' %>>
                                        <span>{Literal}AccuShift User{/Literal}</span>
                                    </label>
                                </div>
                            <% } %>
                            <div class="input-field col s12 m2 pos">
                                    <label>
                                        <input id="server" class="scale filled-in advanced" type="checkbox" <%= employee.isServer ? 'checked' : '' %> class="filled-in" />
                                        <% if (App.serverInfo.isFoodService && employee.isPosUser) { %>
                                        <span>{Literal}Server{/Literal}</span>
                                            <% } else { %>
                                        <span>{Literal}Sales Representative{/Literal}</span>
                                        <% } %>
                                    </label>
                            </div>
                            <div class="input-field col s12 m2 pos">
                                    <label>
                                        <input id="driver" class="scale filled-in advanced" type="checkbox" <%= employee.isDriver ? 'checked' : '' %> class="filled-in" />
                                        <span>{Literal}Driver{/Literal}</span>
                                    </label>
                            </div>
                        </div>
                    </div>  
                </div> 
                <div class="row">
                    <div class="input-field col s1" style="display: none;">
                        <input id="id" type="text" value="<%= employee.id %>">
                    </div>
                    
                    
                        <div class="input-field col s12 m6">
                            <input id="name" type="text" class="validate" value="<%= employee.name %>" required="" aria-required="true"  maxlength="50">
                            <label class="active" for="name">{Literal}Employee Name{/Literal}</label>
                            <span class="helper-text" data-error="{Literal}This field can't be empty or contain special characters{/Literal}" data-success=""></span>
                        </div>


                        <div class="input-field col s12 m6 pos-user">
                            <input autocomplete="new-password" id="posUserId" type="text" class="validate" value="<%= employee.posUserId %>" required="" aria-required="true"  maxlength="10">
                            <label class="active" for="posUserId">{Literal}User Name{/Literal}</label>
                            <span class="helper-text" data-error="{Literal}This field can't be empty or contain special characters{/Literal}" data-success=""></span>
                        </div>


                    <div class="input-field col s12 m6">
                        <input autocomplete="new-password" id="password" type="password" class="validate">
                        <label for="password">{Literal}Set Password{/Literal}</label>
                        <span class="helper-text" data-error="This field cannot contain special characters" data-success=""></span>
                    </div>
                </div>
                <div class="row" id="posUserOptions"> 
                    <div class="input-field col s12 m4">
                        <select id="auto-till-form-dropdown">
                            <option value="*" disabled <%= (employee.till == null ? 'selected' : '') %>>{Literal}Select auto till{/Literal}</option>
                            <option value="" <%= (employee.till == '' ? 'selected' : '') %>>{Literal}None{/Literal}</option>
                            <% _.each(tills, function(till) { %>
                                <% if (till.id != 'Master' && !till.isOnlineOrdering) {%>
                                    <option value="<%= till.id %>" <%= (employee.till == till.id ? 'selected' : '') %>><%= till.id %></option>
                                <% } %>
                            <% }); %>
                        </select>
                        <label>{Literal}Auto Till{/Literal}</label>
                        <span class="helper-text" data-error="This drop-down is mandatory" data-success=""></span>
                    </div>
                    <div class="input-field col s12 m4" <%= employee.userType == 'POS' ? '' : 'style=display:none;' %>>
                        <select id="idle-timeout-form-dropdown">
                            <option value="0" <%= (employee.logOutTime == 0 ? 'selected' : '') %>>{Literal}Never{/Literal}</option>
                            <option value="1" <%= (employee.logOutTime == 1 ? 'selected' : '') %>>{Literal}1 Second{/Literal}</option>
                            <option value="5" <%= (employee.logOutTime == 5 ? 'selected' : '') %>>{Literal}5 Seconds{/Literal}</option>
                            <option value="10" <%= (employee.logOutTime == 10 ? 'selected' : '') %>>{Literal}10 Seconds{/Literal}</option>
                            <option value="30" <%= (employee.logOutTime == 30 ? 'selected' : '') %>>{Literal}30 Seconds{/Literal}</option>
                            <option value="60" <%= (employee.logOutTime == 60 ? 'selected' : '') %>>{Literal}1 Minute{/Literal}</option>
                            <option value="120" <%= (employee.logOutTime == 120 ? 'selected' : '') %>>{Literal}2 Minutes{/Literal}</option>
                        </select>
                        <label>{Literal}Idle Timeout{/Literal}</label>
                        <span class="helper-text" data-error="This drop-down is mandatory" data-success=""></span>
                    </div>
                    <div class="input-field col s12 m4">
                        <select id="user-group-form-dropdown" required>
                            <option value="" disabled <%= (employee.group == '' ? 'selected' : '') %>>{Literal}Select user group{/Literal}</option>
                            <% _.each(userGroups, function(userGroup) { %>
                                <option value="<%= userGroup %>" <%= (employee.group == userGroup ? 'selected' : '') %>><%= userGroup %></option>
                            <% }); %>
                        </select>
                        <label>{Literal}User Group{/Literal}</label>
                        <span class="helper-text" data-error="This drop-down is mandatory" data-success=""></span>
                    </div>
                </div>
                <div class="row accuShiftOptions" id="accuShiftOptions" <%= (employee.isEmployee? '' : 'style="display:none;"') %>>
                    <div class="input-field col s12 m6">
                        <select multiple id="pay-level-dropdown" required>
                                <% var count = 1;%>
                                <% _.each(payTypes, function(payType) { %>
                                    <% if(payType != '') { %>
                                    <option value="<%= count %>" <%= employee["payLevel" + count]  == payType ? 'selected' : '' %>><%= payType %></option>
                                    <%}%>
                                    <% count++ %>
                                <% }); %>
                        </select>
                        <label>{Literal}Pay Level{/Literal}</label>
                        <span class="helper-text" data-error="This drop-down is mandatory" data-success=""></span>
                    </div>
                    <!-- <div class="input-field col s12 m6">
                        <input id="accountingId" disabled="" type="text" class="validate" value="<%= employee.accountingId %>" aria-required="true"  maxlength="50">
                            <label class="active" for="accountingId">{Literal}accountingId Id{/Literal}</label>
                            <span class="helper-text" data-error="{Literal}This field can't be empty or contain special characters{/Literal}" data-success=""></span>
                    </div> -->
                </div>
                
                
                <div class="row accuShiftOptions" id="accuShiftOptions" <%= (employee.isEmployee? '' : 'style=display:none;') %>>
                    <div class="input-field col s12">
                        <div class="row checkboxes">
                            <div class="input-field col s12 m3" style="margin-top:10px;">
                                <p>
                                    <label>
                                        <input id="overtimeOver8" type="checkbox" <%= employee.overtimeOver8 ? 'checked' : '' %> class="filled-in" />
                                        <span>{Literal}Overtime Over 8 Hours{/Literal}</span>
                                    </label>
                                </p>
                            </div>
                            <div class="col s12 m3" style="margin-top:10px;">
                                <p>
                                    <label>
                                        <input id="manager" type="checkbox" <%= employee.manager ? 'checked' : '' %> class="filled-in" />
                                        <span>{Literal}Manager{/Literal}</span>
                                    </label>
                                </p>
                            </div>
                            <div class="col s12 m3" style="margin-top:10px;">
                                <p>
                                    <label>
                                        <input id="isClockedIn" type="checkbox" disabled <%= employee.isClockedIn ? 'checked' : '' %> class="filled-in" />
                                        <span>{Literal}Is Clocked In{/Literal}</span>
                                    </label>
                                </p>
                            </div> 
                        </div>
                    </div>
                    <label>AccuShift User Active</label>
                    <div class="switch">
                        <% console.log(employee.isActive) %>
                        <label>
                            {Literal}No{/Literal}
                            <input id="isActive" <%= employee.isActive || isCreateMode ? 'checked="checked"' : '' %> type="checkbox">
                            <span class="lever"></span>
                            {Literal}Yes{/Literal}
                        </label>
                    </div>
                </div>
                <!-- <div class="row" id="posUserSwitches" <%= (employee.isPosUser ? '' : 'style=display:none; padding-left: 25%') %>>
                    <div class="input-field col s12">
                        <div class="row checkboxes">
                        <% if (App.serverInfo.isFoodService === true) { %>

                        <% } else { %>
                            <div class="col s12 m3" style="padding-left: 50px;">
                                <p>
                                    <label>
                                        <input id="salesRep" type="checkbox" <%= employee.isServer ? 'checked' : '' %> class="filled-in" />
                                        <span>{Literal}Sales Representative{/Literal}</span>
                                    </label>
                                </p>
                            </div> 
                        <% } %>
                        </div>
                    </div>
                </div> -->
            </form>
        </div>
    </div>
</div>

<div class="modal-footer">
    <a href="#delete-employee-modal" class="waves-effect waves-light btn-flat red-text right modal-trigger delete-button">{Literal}Delete{/Literal}</a>
    <a href="javascript:void(0)" class="waves-effect waves-green btn green left save-button">{Literal}Save{/Literal}</a>
    <a href="javascript:void(0)" class="modal-close waves-effect waves-light left btn-flat">{Literal}Cancel{/Literal}</a>
</div>

<div id="delete-employee-modal" class="modal">
    <div class="modal-content">
        <div style="padding-bottom: 50px;">
            <h6>{Literal}Confirm Deletion{/Literal}</h6>
        </div>
        <p>{Literal}Are you sure that you would like to remove this Employee?{/Literal}</p>
        <p>{Literal}Note that AccuShift Employee will be deactivated.{/Literal}</p>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" id="delete-employee-confirm" class="waves-effect waves-green btn red left" data-employee-id="<%= employee.posUserId %>">{Literal}Delete{/Literal}</a>
        <input type="hidden" id="delete-employee-id" />
        <a href="javascript:void(0)" class="modal-close waves-effect waves-light btn-flat left">{Literal}Cancel{/Literal}</a>
    </div>
</div>