<div id="remote-display-wrapper" <%= (App.rtl ? 'style="direction:rtl"' : '') %>>
        <div class="row">
            <% _.each(remoteDevices, function(remoteDevice) { %>
                <div class="col s12 m3 xl2">
                    <div class="card-panel card-panel-entity z-depth-1 sequence-card hoverable waves-effect waves-light" style="background-color: #ffffff" data-id="<%= remoteDevice.deviceName %>" data-selected='0'>
                        <div>
                            <div class="row description truncate" style="color: #3970b7;">
                                <%= remoteDevice.name %>
                            </div>
                            <div class="row truncate" style="font-size: .95rem; margin-bottom: 0px; color: gray;">
                                {Literal}Device Address:{/Literal} <%= remoteDevice.address %>
                            </div>
                        </div>
                        <br><br><br>
                        <div class="edit" style="display: none">
                            <a href="javascript:void(0)" class="btn-floating btn-large waves-effect waves-light ap-dark-blue edit-device-trigger"
                                data-id="<%= remoteDevice.id %>">
                                <i class="material-icons">edit</i>
                            </a>
                        </div>
                    </div>
                </div>
            <% }); %>
        </div>
    </div>
    
    <div class="fixed-action-btn">
        <a class="btn-floating btn-large ap-blue">
            <i class="large material-icons">format_line_spacing</i>
        </a>
        <ul>
            <li><a id="addItemType" class="btn-floating" style="background-color: #4B9CD6"><i class="material-icons tooltipped" data-position="left" data-tooltip="{Literal}Add Device{/Literal}">add</i></a></li>
            <li><a id="editAppetizers" class="btn-floating addKeyButton" style="background-color: #FFD167"><i class="material-icons tooltipped"  data-position="left" data-tooltip="{Literal}Add/Edit Appetizers{/Literal}">star</i></a></li>
            <li><a id="settings" class="btn-floating settings green"><i class="material-icons tooltipped"  data-position="left" data-tooltip="{Literal}Settings{/Literal}">settings_applications</i></a></li>
        </ul>
    </div>
            
    <div id="remote-display-form-modal" class="modal modal-fixed-footer remote-display-form-modal" style="max-height: 100%">
        
    </div>
    
    <div id="appetizer-form-modal" class="modal modal-fixed-footer appetizer-form-modal" style="min-height: 25%; min-width: 50%; z-index: 100000;">
        <div class="modal-content">
            <h4>{Literal}Select Appetizers{/Literal}</h4> 
            <div class="row" style="padding-top: 75px">
                <% _.each(itemTypes, function(itemType) { %>
                    <% if (appetizers != undefined) { %>
                        <% 
                            var foundItemType = false;
                            for(var i = appetizers.length; i >= 0; i--) {
                                if (itemType.name == appetizers[i]) {
                                    foundItemType = true;
                                } 
                            }
                        %>
                    <% } %>
                    <% if(foundItemType) { %>
                        <div id ="salesCards">
                            <div class="col s12 m4 xl4">
                                <div class="card-panel card-panel-entity z-depth-1 sequence-card hoverable waves-effect waves-light appetizerCard" style="background-color: #ffffff; color: #3970b7;" data-id="<%= itemType.name %>" data-selected='0'>
                                    <div class="row description truncate" style="position: relative; right: -5px; height: 48px;">
                                        &nbsp;&nbsp;<%= itemType.name %>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <% } %>
                    <% if(!foundItemType) { %>
                        <div id ="salesCards">
                            <div class="col s12 m4 xl4">
                                <div class="card-panel card-panel-entity z-depth-1 sequence-card hoverable white-text waves-effect waves-light appetizerCard" style="background-color: #3970b7" data-id="<%= itemType.name %>" data-selected='0'>
                                    <div class="row description truncate" style="position: relative; right: -5px; height: 48px;">
                                        &nbsp;&nbsp;<%= itemType.name %>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <% } %>
    
                    <% foundItemType = false %>
                <% }); %>
            </div>
        </div>
        <div class="modal-footer">
            <a href="javascript:void(0)" class="modal-close waves-effect waves-light btn-flat left">{Literal}Cancel{/Literal}</a>
        </div>
    </div>


    <div id="remote-display-settings-form-modal" class="modal modal-fixed-footer remote-display-settings-form-modal" style="min-height: 25%; min-width: 50%; z-index: 100000;">
        <div class="modal-content">
            <h4>{Literal}Remote Display Settings{/Literal}</h4>
            <div class="row" style="padding-top: 75px">
                <form class="config" id="Outputs.RemoteDisplayHandler">
                    <label>{Literal}Outputs.RemoteDisplayHandler{/Literal}</label>
                    <div class="switch">
                        <label>{Literal}Active{/Literal}</label>
                        <label>
                            <input data-name="isActive" type="checkbox">
                            <span class="lever"></span>
                        </label>
                    </div>
                </form>
                <form class="config" id="Outputs.RemoteDisplay"  >
                    <label>{Literal}Outputs.RemoteDisplay{/Literal}</label>
                    <div class="switch">
                        <label>{Literal}Active{/Literal}</label>
                        <label>
                            <input data-name="isActive" type="checkbox">
                            <span class="lever"></span>
                        </label>
                    </div>
                    <br>
                    <div class="input-field col s5">
                        <input data-name="Host" id="remotePrinterHost" type="text" class="validate">
                        <label for="remotePrinterHost">{Literal}Remote Host Name{/Literal}</label>
                    </div>
                    <div class="col s3">
                        <label>{Literal}Show Remote Display/Printer Window{/Literal}</label>
                        <div class="switch">
                            <label>
                                {Literal}No{/Literal}
                                <input data-name="Show" type="checkbox">
                                <span class="lever"></span>
                                {Literal}Yes{/Literal}
                            </label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="row" >
                <div class="col s4">
                    <label>{Literal}Dine In Labels{/Literal}</label>
                    <div class="switch">
                        <label>
                            {Literal}Off{/Literal}
                            <input <%=settings.dineInLabels ? 'checked': ''%> data-name="dineInLabels" id="dineInLabels" type="checkbox"> 
                            <span class="lever"></span>
                            {Literal}On{/Literal}
                        </label>
                    </div>
                    <label>{Literal}Carry Out Labels{/Literal}</label>
                    <div class="switch">
                        <label>
                            {Literal}Off{/Literal}
                            <input  <%=settings.carryOutLabels ? 'checked': ''%> data-name="carryOutLabels" id="carryOutLabels" type="checkbox"> 
                            <span class="lever"></span>
                            {Literal}On{/Literal}
                        </label>
                    </div>
                    <label>{Literal}Delivery Labels{/Literal}</label>
                    <div class="switch">
                        <label>
                            {Literal}Off{/Literal}
                            <input <%=settings.deliveryLabels ? 'checked': ''%> data-name="deliveryLabels" id="deliveryLabels" type="checkbox"> 
                            <span class="lever"></span>
                            {Literal}On{/Literal}
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <a href="javascript:void(0)" class="save-settings modal-close green waves-effect waves-light btn-flat left">{Literal}save{/Literal}</a>
            <a href="javascript:void(0)" class="modal-close waves-effect waves-light btn-flat left">{Literal}Cancel{/Literal}</a>
        </div>
    </div>