<div id="remote-display-form-modal" class="modal modal-fixed-footer" style="max-height: 100%" <%= (App.rtl ? 'style="direction:rtl"' : '') %>></div>
    <div class="modal-content">
        <div id="remote-display-form-modal-content">
            <div style="padding-bottom: 50px">
                <h4 style="font-size: 1.2rem">{Literal}Remote Display Device Details{/Literal}</h4>
            </div>
            <form>
                <div class="row">
                    <div class="col s12">
                        <div class="input-field col s12 m4">
                            <input id="name"  value="<%= remoteDisplay.name %>" class="validate" type="text" maxlength="50">
                            <label class="active" for="name">{Literal}Device Name{/Literal}</label>
                            <span class="helper-text" data-error="This field can't contain special characters" data-success=""></span>
                        </div>
                        <div class="input-field col s12 m4">
                            <label class="active">{Literal}Device Type{/Literal}</label>
                            <select id="device-type-dropdown" required>
                                <option value="ipPrinter">{Literal}IP(LAN) Printer{/Literal}</option>
                                <option value="monitor" <%= remoteDisplay.isMonitor ? 'selected' : '' %>>{Literal}Monitor{/Literal}</option>
                                <option value="pax"  <%= remoteDisplay.address === "PAX" ? 'selected' : '' %>>{Literal}PAX{/Literal}</option>
                                <option value="labelPrinter"  <%= remoteDisplay.isLabelPrinter ? 'selected' : '' %>>{Literal}Label Printer{/Literal}</option>
                            </select>
                        </div>
                        <div class="input-field col s12 m4">
                            <input id="address"  value="<%= remoteDisplay.address %>" <%= remoteDisplay.address === "PAX" ? 'disabled' : '' %> class="validate" type="text" maxlength="50">
                            <label class="active" for="address">{Literal}Device Address{/Literal}</label>
                            <span class="helper-text" data-error="This field can't contain special characters" data-success=""></span>
                        </div>
                        <div class="input-field col s12 m4">
                            <input id="pageWidth" value="<%= remoteDisplay.pageWidth %>" type="number" <%= remoteDisplay.address === "PAX" ? 'disabled' : '' %>  >
                            <label class="active" for="pageWidth">{Literal}Page Width{/Literal}</label>
                        </div>
                        <div class="input-field col s12 m4">
                            <input id="templateName"  value="<%= remoteDisplay.templateName %>" type="text">
                            <label class="active" for="templateName">{Literal}Template File Name{/Literal}</label>
                        </div>
                        <div class="input-field col s12 m4">
                            <label class="active">{Literal}Exclude User Group{/Literal}</label>
                            <select id="user-group-dropdown" required>
                                <option value="none">{Literal}None{/Literal}</option>
                                <% _.each(userGroups, function(userGroup) { %>
                                <option value="<%= userGroup  %>" <%= remoteDisplay.excludeGroup === userGroup ? 'selected' : '' %>><%= userGroup %></option>
                                <% }); %>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    {Literal}Item Types{/Literal} <hr size=2>
                    <div class="col s12 m2 xl2">
                        <a href="javascript:void(0)" class="waves-effect waves-green btn green add-item-type">{Literal}Add Item Type{/Literal}</a>
                    </div>
                </div>
                <div class="row">
                    <div id="itemTypeBlock">
                        <% if(remoteDisplay.itemTypes != null) {%>
                            <% _.each(remoteDisplay.itemTypes, function(itemType) { %>
                                <div class="col s12 m2 xl2 selectedItemType">
                                    <div class="card-panel card-panel-entity z-depth-1 sequence-card hoverable waves-effect waves-light" style="background-color: #ffffff" data-id="<%= itemType %>" data-selected='0'>
                                        <div>
                                            <div id="<%= itemType %>" class="row description truncate" style="color: #3970b7; font-size: 1rem;">
                                                <%= itemType %>
                                            </div>
                                        </div>
                                        <div class="edit" style="display: none">
                                            <a href="javascript:void(0)" class="btn-floating btn-large waves-effect waves-light red delete-item-type-trigger"
                                                data-id="<%= remoteDisplay.name %>"  item-type-id="<%= itemType %>">
                                                <i class="material-icons">delete</i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            <% }); %>
                        <% } %>
                    </div>
                </div>

                <div class="row">
                    {Literal}Excluded Tills{/Literal} <hr size=2>
                    <div class="col s12 m2 xl2">
                        <a href="javascript:void(0)" class="waves-effect waves-green btn green add-till">{Literal}Exclude Till{/Literal}</a>
                    </div>
                </div>
                <div class="row">
                    <div id="itemTypeTillsRow">
                        <% if(remoteDisplay.tills != null) {%>
                            <% _.each(remoteDisplay.tills, function(till) { %>
                                <% if(till == '') return true; %>
                                <div class="col s12 m2 xl2 selectedTill">
                                    <div class="card-panel card-panel-entity z-depth-1 sequence-card hoverable waves-effect waves-light" style="background-color: #ffffff" data-id="<%= till %>" data-selected='0'>
                                        <div id="<%= till %>" class="row description truncate" style="color: #3970b7; font-size: 1rem;">
                                                <%= till %>
                                        </div>
                                        <div class="edit" style="display: none">
                                            <a href="javascript:void(0)" class="btn-floating btn-large waves-effect waves-light red delete-till-confirm"
                                                data-id="<%= remoteDisplay.name %>"  data-till="<%= till %>">
                                                <i class="material-icons">delete</i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            <% }); %>
                        <% } %>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12 m1" style="display: none">
                        <input id="id" type="text" value="<%= remoteDisplay.id %>">
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12 m1" style="display: none">
                        <input id="originalName" type="text" value="<%= remoteDisplay.name %>">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal-footer">
    <a href="#delete-remote-display-modal" class="waves-effect waves-light btn-flat red-text right modal-trigger delete-remote-display-button">{Literal}Delete{/Literal}</a>
    <a href="javascript:void(0)" class="waves-effect waves-green btn green save-button 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 id="delete-remote-display-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 Remote Display Device{/Literal}?</p>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" id="delete-remote-device-confirm" class="modal-close waves-effect waves-green btn red left">{Literal}Delete{/Literal}</a>
        <input type="hidden" />
        <a href="javascript:void(0)" class="modal-close waves-effect waves-light btn-flat left">{Literal}Cancel{/Literal}</a>
    </div>
</div>

<div id="delete-till-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 Till?{/Literal}?</p>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" id="delete-till-confirm" class="modal-close waves-effect waves-green btn red left">{Literal}Delete{/Literal}</a>
        <input type="hidden" />
        <a href="javascript:void(0)" id="cancel-delete-till" class="waves-effect waves-light btn-flat left">{Literal}Cancel{/Literal}</a>
    </div>
</div>


<div id="item-type-form-modal" class="modal modal-fixed-footer item-type-form-modal" style="min-height: 25%; min-width: 50%; z-index: 100000;">
    <div class="modal-content">
        <h4>{Literal}Select Item Type{/Literal}</h4> 
        <div class="row itemTypeRow">
            <% _.each(itemTypes, function(itemType) { %>
                <% var itemTypeSelected = remoteDisplay.itemTypes != null && remoteDisplay.itemTypes.includes(itemType.name) ? 'selected' : '';%>
                <div>
                    <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 itemTypeCard <%= itemTypeSelected %>" 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>
            <% }); %>
        </div>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" class="waves-effect waves-light btn-flat left cancelItemTypeSelect">{Literal}Close{/Literal}</a>
    </div>
</div>

<div id="tills-form-modal" class="modal modal-fixed-footer item-type-form-modal" style="min-height: 25%; min-width: 50%; z-index: 100000;">
    <div class="modal-content">
        <h4>{Literal}Select Till to Exclude{/Literal}</h4> 
        <div class="row itemTypeRow" style="padding-top: 30px">
            <% _.each(tills, function(till) { %>
                <% var tillSelected = remoteDisplay.tills != null && remoteDisplay.tills.includes(till.name) ? 'selected' : '';%>
                <div>
                    <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 tillCard <%= tillSelected %>" style="background-color: #3970b7" data-id="<%= till.name %>" data-selected='0'>
                            <div class="row description truncate" style="position: relative; right: -5px; height: 48px;">
                                &nbsp;&nbsp;<%= till.name %>
                            </div>
                        </div>
                    </div>
                </div>
            <% }); %>
        </div>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" class="waves-effect waves-light btn-flat left cancelTillSelect">{Literal}Close{/Literal}</a>
    </div>
</div>