<div id="pos-users-wrapper" <%= (App.rtl ? 'style="direction:rtl"' : '') %> >
    <form>
        <div class="row">
            <div class="input-field col s12 m3">
                <select id="user-group-filter">
                    <option value="*">{Literal}All Groups{/Literal}</option>
                </select>

                <label>{Literal}Filter by User Group{/Literal}</label>
            </div>
        </div>
    </form>
    <div class="row">
        <% _.each(posUsers, function(posUser) { %>
            <div class="col s12 m3 xl2">
                <div class="card-panel card-panel-entity z-depth-2 sequence-card hoverable white-text waves-effect waves-light <%= posUser.cardStyleClass %>"
                    data-id="<%= posUser.id %>" data-selected='0'>
                    <div>
                        <div class="row description truncate">
                            <%= posUser.name %>
                        </div>
                        <div class="row type truncate">
                            <%= userGroups[posUser.userGroupId] %>
                        </div>
                        <div class="row till truncate">
                            {Literal}Till{/Literal}:
                            <%= tills[posUser.autoTillId] %>
                            <% if (posUser.isDriver && isFoodService ) { %>
                            <span class="right">
                                <i class="material-icons tooltipped" data-position="bottom" data-tooltip="Driver">directions_car</i><!--Driver-->
                            </span>
                            <% } %>
                        </div>
                        <div class="row taxable truncate">
                            {Literal}T/O{/Literal}:
                            <%= posUser.idleTimeout == 0 ? '{Literal}Never{/Literal}' : posUser.idleTimeout %>
                            <% if (posUser.isServer && isFoodService) { %>
                            <span class="right">
                                <i class="material-icons tooltipped" data-position="bottom" data-tooltip="Server">room_service</i><!--Server-->
                            </span>
                            <% } %>
                        </div>
                    </div>
                    <div class="edit" style="display: none">
                        <a href="javascript:void(0)" class="btn-floating btn-large waves-effect waves-light ap-dark-blue edit-pos-user-trigger"
                            data-id="<%= posUser.id %>">
                            <i class="material-icons">edit</i>
                        </a>
                    </div>
                </div>
            </div>
            <% }); %>
    </div>
</div>
<div id="delete-pos-user-modal" class="modal">
    <div class="modal-content">
        <h4>Confirm Deletion</h4>
        <p>Are you sure that you would like to remove this POS user?</p>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" class="modal-close waves-effect waves-light btn-flat">Cancel</a>
        <a href="javascript:void(0)" id="delete-pos-user-confirm" class="modal-close waves-effect waves-green btn red">Delete</a>
        <input type="hidden" id="delete-pos-user-id" />
    </div>
</div>

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

<a href="javascript:void(0)" id="add-user-button" class="btn-floating btn-large waves-effect waves-light green floating-action-button-fixed">
    <i class="material-icons">add</i>
</a>