<div id="employees-wrapper" class="page-wrapper" <%= (App.rtl ? 'style="direction:rtl"' : '') %> >
    <br>
    <div class="row">
        <div class="col s12 m3">
            <div class="input-field">
                <input id="employeeSearch" type="text" class="validate" maxlength="50">
                <label class="active" for="employeeSearch">{Literal}Search Employee{/Literal}</label>
                <span class="helper-text" data-error="{Literal}{/Literal}" data-success=""></span>
            </div>
        </div>
        <div class="col s2 m1">
            <div class="search" style="padding-top: 20px;" >
                <a href="javascript:void(0)" class="btn waves-effect waves-light green search-employees-button">
                    <i class="material-icons">search</i>
                </a>
            </div>
        </div>
        <label style="margin-top: 25px;" id="showInactiveOnly" class="input-field col s12 m3">
            <input type="checkbox" class="filled-in" data-type="">
            <span>{Literal}Inactive Employees Only{/Literal}</span>
        </label>
    </div>
    <div class="row">
        <% _.each(employees, function(employee) { %>
            <div class="col s12 m3 xl2">
                <div class="card-panel card-panel-entity z-depth-1 sequence-card hoverable waves-effect waves-light white"
                    data-id="<%= employee.id %>" data-selected='0' style="padding-top: 5px !important;">
                    <div>
                        <% if(employee.userType == 'POS') {%>
                        <% if (employee.isPosUser) { %>
                            <% if (employee.isEmployee) { %>
                                <div class="row itemDescription truncate" style="font-size: .95rem; margin-bottom: 0px; color: gray;">
                                        {Literal}POS User + Employee{/Literal}
                                </div>
                            <% } %>
                        <% } %>

                        <% if (employee.isPosUser) { %>
                            <% if (!employee.isEmployee) { %>
                                <div class="row itemDescription truncate" style="font-size: .95rem; margin-bottom: 0px; color: gray;">
                                        {Literal}POS User{/Literal}
                                </div>
                            <% } %>
                        <% } %>

                        <% if (!employee.isPosUser) { %>
                            <% if (employee.isEmployee) { %>
                                <div class="row itemDescription truncate" style="font-size: .95rem; margin-bottom: 0px; color: gray;">
                                        {Literal}Employee{/Literal}
                                </div>
                            <% } %>
                        <% } %>

                        <% } else {%>
                            <div class="row itemDescription truncate" style="font-size: .95rem; margin-bottom: 0px; color: gray;">
                                {Literal}Management User{/Literal}
                            </div>
                        <% } %>
                        <% if (employee.name != "") { %>
                            <div class="row description truncate" style="color: #3970b7;">
                                <%= employee.name %>
                            </div>
                        <% } %>

                        <% if (employee.name == "") { %>
                            <div class="row description truncate" style="color: #3970b7;">
                                <%= employee.posUserId %>
                            </div>
                        <% } %>

                        <% if (employee.group != "") { %>
                            <div class="row till truncate" style="font-size: .95rem; color: gray; margin-bottom: 0px;">
                                {Literal}User Group{/Literal}: <%= employee.group %>
                            </div>
                        <% } %>
                        <% if (employee.group == "") { %>
                            <div class="row till truncate" style="font-size: .95rem; color: gray; margin-bottom: 0px;">
                                {Literal}User Group: N/A{/Literal}
                            </div>
                        <% } %>
                       
                        <div class="row till truncate" style="font-size: .95rem; color: gray;">
                            {Literal}Active{/Literal}: <%= employee.isActive ? '{Literal}Yes{/Literal}' : '{Literal}No{/Literal}' %>
                        </div>
                        <div class="row till truncate" <%= (employee.isEmployee ? '' : 'style=display:none;') %> style="font-size: .95rem; color: gray;">
                            {Literal}Current Hours{/Literal}: <%= employee.currentHours %>
                        </div>
                        <div class="edit" style="display: none">
                            <a href="javascript:void(0)" class="btn-floating editButton btn-large waves-effect waves-light ap-dark-blue edit-employee-trigger"
                                data-id="<%= employee.id %>" data-old-id="<%= employee.oldId %>">
                                <i class="material-icons">edit</i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        <% }); %>
    </div>
</div>

<div id="employees-form-modal" class="modal modal-fixed-footer employees-form-modal" style="max-height: 100%">

</div>

<a href="javascript:void(0)" id="add-employee-button" class="btn-floating btn-large waves-effect waves-light ap-blue z-depth-4 floating-action-button-fixed">
    <i class="material-icons">add</i>
</a>