<div id="remote-printing-wrapper" <%= (App.rtl ? 'style="direction:rtl"' : '') %>>
    <div class="row">
        <% _.each(printerArray, function(itemType) { %>
            <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="<%= itemType.itemType %>" data-selected='0'>
                    <div>
                        <div class="row description truncate" style="color: #3970b7;">
                            <%= itemType.itemType %>
                        </div>
                        <div class="row truncate" style="font-size: .95rem; margin-bottom: 0px; color: gray;">
                            {Literal}Printer:{/Literal} <%= itemType.printerName %>
                        </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-printer-trigger"
                            data-id="<%= itemType.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 Item Type{/Literal}">add</i></a></li>
        <li><a id="editRemotePrintingSettings" class="btn-floating addKeyButton" style="background-color: #A4D391"><i class="material-icons tooltipped"  data-position="left" data-tooltip="{Literal}Edit Remote Printing Settings{/Literal}">edit</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>
    </ul>
</div>
        
<div id="sales-taxes-form-modal" class="modal modal-fixed-footer sales-taxes-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-printing-form-modal" class="modal modal-fixed-footer remote-printing-form-modal" style="height: 35% !IMPORTANT; min-width: 50%; z-index: 100000;">
    <div class="modal-content">
        <h4>{Literal}Edit Remote Printing Settings{/Literal}</h4> 
        <div class="row" style="padding-top: 75px">
            <div class="col s12">
                <div class="col s12 m4" style="margin-top:25px;">
                    <p>
                        <label>
                            <input type="checkbox" class="filled-in" id="textOrientation" <%= remotePrintingInfo.textOrientation  ? 'checked': '' %>>
                            <span>{Literal}Print Right to Left{/Literal}</span>
                        </label>
                    </p>
                </div>
                <div class="col s12 m4" style="margin-top:25px;">
                    <p>
                        <label>
                            <input type="checkbox" class="filled-in" id="printSKU" <%= remotePrintingInfo.printSKU  ? 'checked': '' %>>
                            <span>{Literal}Print SKU{/Literal}</span>
                        </label>
                    </p>
                </div>
                <div class="col s12 m2">
                    <div class="input-field">
                        <input id="decimals" value="<%= remotePrintingInfo.decimals %>" class="validate" type="number">
                        <label class="active" for="decimals">{Literal}Decimals{/Literal}</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" class="waves-effect waves-light green btn-flat save-remote-printing-button left">{Literal}Save{/Literal}</a>
        <a href="javascript:void(0)" class="waves-effect waves-light btn-flat cancel-price-level-button left">{Literal}Cancel{/Literal}</a>
    </div>
</div>