<div id="reports-wrapper" class="row report-card" style="padding-top: 15px; margin-bottom: 0px;<%= (App.rtl ? 'direction:rtl' : '') %>">
    <div class="col s12">
        <div class="quicklink-card z-depth-1 white" style="margin-bottom: 10px; margin-top: 10px; border:none;">
            <div class="quicklink-card-content" >
                <form>
                    <div class="row" style="margin-bottom: 5px">
                        <div class="col s12 m4 report-form-col">
                            <div class="row" >
                                <div class="input-field col s12 report-field-column">
                                    <select class="validate" id="report-category">
                                        <option value="" disabled selected>{Literal}Select a Category{/Literal}</option>
                                        <option value="general">{Literal}General Reports{/Literal}</option>
                                        <option value="transactions">{Literal}Transactions{/Literal}</option>
                                        <option value="sales">{Literal}Sales{/Literal}</option>
                                        <option value="list">{Literal}List{/Literal}</option>
                                        <option value="inventory">{Literal}Inventory{/Literal}</option>
                                        <%if(App.serverInfo.hasCloudReporting){%>
                                        <option value="cloudData">{Literal}Cloud Reports{/Literal}</option>
                                        <%}%>
                                    </select>
                                    <label><i class="material-icons left">menu</i>{Literal}Report Category{/Literal}</label>
                                    <span class="helper-text" data-error="A report category has to be selected" data-success></span>
                                </div>
                                <div id="report-type-dropdown" class="input-field col s12 report-field-column">
                                    <select class="validate" id="report-type" disabled>
                                        <option value="" disabled selected>{Literal}Select a Type{/Literal}</option>
                                    </select>
                                    <label><i class="material-icons left">show_chart</i>{Literal}Report Type{/Literal}</label>
                                    <span class="helper-text" data-error="A report type has to be selected" data-success></span>
                                </div>
                                <div id="viewByBlock" class="col s12" style="padding:20px">
                                    <div class="input-field col s12" style="margin-top: 0px">
                                        <label>
                                            <input name="view-by-group" disabled type="radio" checked class="report-by-selector with-gap" value="by-date-time" id="by-date-time-radio-button" data-filter-class="conditional-report-filter" data-filter="timeRange" />
                                            <span>{Literal}View by Time Range{/Literal}</span>
                                        </label>
                                    </div>
                                    <div class="input-field col s12">
                                        <label>
                                            <input name="view-by-group" disabled type="radio" class="report-by-selector with-gap" value="by-sequence" id="by-sequence-radio-button" data-filter-class="conditional-report-filter" data-filter="sequence" />
                                            <span>{Literal}View by Sequence{/Literal}</span>
                                        </label>
                                    </div>
                                </div>
                                <div id="locationsParentModel" class="input-field col s12 report-field-column" style="margin-top: 60px; display:none; margin-bottom:10px">
                                    <select multiple id="locations-preset" data-filter-class="conditional-report-filter" data-filter="locations">

                                    </select>
                                    <label>{Literal}Location{/Literal}</label>
                                    <a id="selectAllLocations" class=" disabled waves-effect waves-light btn-small">Select All</a>
                                </div>
                            </div>
                        </div>
                        <div class="col s12 xl4 m6 report-form-col" id="by-time-fields">
                            <div>
                                <div id="dateRangePreset" data-filter-class="conditional-report-filter" class="input-field report-field-column hide-filter" style="display:none; margin-bottom:10px" data-filter="timeRange">
                                    <select id="date-range-preset" >
                                        <!-- hide-filter -->
                                        <!-- <option value="" selected>{Literal}Custom{/Literal}</option> -->
                                        <option selected value="today">{Literal}Today{/Literal}</option>
                                        <option value="yesterday">{Literal}Yesterday{/Literal}</option>
                                        <option value="previousWeek">{Literal}Last Week{/Literal}</option>
                                        <option value="thisWeek">{Literal}This Week{/Literal}</option>
                                        <option value="previousMonth">{Literal}Last Month{/Literal}</option>
                                        <option value="thisMonth">{Literal}This Month{/Literal}</option>
                                        <option value="previous3Months">{Literal}Last Quarter{/Literal}</option>
                                        <option value="this3Months">{Literal}This Quarter{/Literal}</option>
                                    </select>
                                    <label>{Literal}Date Range Preset{/Literal}</label>
                                </div>
                            </div>
                            <div id="payPeriodButtons" class="input-field col s12 report-field-column" style="display: none;">
                                <label for="pay-period-input" class="active">{Literal}Previous / Next Pay Period{/Literal}</label>
                                <input id="pay-period-input"  style="display: none;">
                                <a id="pay-period-forward" class="waves-effect waves-light btn forward"  style="margin-top: 10px;"><i class="material-icons forward">arrow_forward</i></a>
                                <a id="pay-period-back" class="waves-effect waves-light btn hide-filter back left" data-filter-class="conditional-report-filter" data-filter="payPeriodButtons" style="margin-top: 10px;">
                                    <i class="material-icons back">arrow_back</i></a>
                            </div>
                            <div class="row" style="margin-bottom: 0;">
                                <div id="reportStartDay" class="input-field col s12 m6 report-field-column" style="display: none">
                                    <input id="report-start-time" disabled type="text" class="validate hide-filter" data-filter-class="conditional-report-filter" data-filter="timeRange">
                                    <label for="report-start-time"><i class="material-icons left">date_range</i>{Literal}Start Date{/Literal}</label>
                                    <span class="helper-text" data-error="This field can't be empty" data-success></span>
                                </div>
                                <div id="reportEndDay" class="input-field col s12 m6 report-field-column" style="display: none">
                                    <input id="report-end-time" disabled type="text" class="validate hide-filter" data-filter-class="conditional-report-filter" data-filter="timeRange">
                                    <label for="report-end-time"><i class="material-icons left">date_range</i>{Literal}End Date{/Literal}</label>
                                    <span class="helper-text" data-error="This field can't be empty" data-success></span>
                                </div>
                            </div>
                            <div class="row" style="margin-bottom: 0;">
                                <div id="startTime" class="input-field col s12 m6 report-field-column" style="display:none">
                                    <input id="report-start-timepicker" class="hide-filter" disabled type="text" data-filter-class="conditional-report-filter" data-filter="timeRange">
                                    <label for="report-start-timepicker"><i class="material-icons left">access_time</i>{Literal}Start Time{/Literal}</label>
                                    <span class="helper-text" data-error="This field can't be empty" data-success></span>
                                </div>
                                <div id="endTime" class="input-field col s12 m6 report-field-column" style="display:none">
                                    <input id="report-end-timepicker" class="hide-filter" disabled type="text" data-filter-class="conditional-report-filter" data-filter="timeRange">
                                    <label for="report-end-timepicker"><i class="material-icons left">access_time</i>{Literal}End Time{/Literal}</label>
                                    <span class="helper-text" data-error="This field can't be empty" data-success></span>
                                </div>
                                <div class="switch" style="padding-bottom: 10px;display: none;">
                                    <label data-filter="timeRange">
                                        <input type="checkbox" class="whole-day hide-filter form-switch" id="whole-day-time" checked data-filter-class="conditional-report-filter" data-filter="timeRange">
                                        <span class="lever"></span>{Literal}Whole day{/Literal}
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="col s12 xl4 m6 report-form-col" id="by-sequence-filters">
                            <div class="input-field col s12 report-field-column" style="display:none">
                                <input type="text" id="reset-report-autocomplete" placeholder="{Literal}Enter Sequence{/Literal} #" class="autocomplete hide-filter" data-filter-class="conditional-report-filter" data-filter="sequence">
                                <label for="reset-report-autocomplete" class="active"><i class="material-icons left">filter_list</i>{Literal}Filter by Reset Report{/Literal}</label>
                            </div>
                            <div class="col s12 report-form-col" style="display: none" id="by-sequence-fields">
                                <!-- <div class="row"> -->
                                    <!-- <div class="col s12 report-field-column" style="padding-top:25px"> -->
                                        <a style="width: 100%" href="#sequence-modal" id="sequence-modal-trigger" 
                                        class="waves-effect waves-light btn-small modal-trigger ap-blue" data-filter-class="conditional-report-filter" 
                                        data-filter="sequence">
                                            <i class="material-icons left">filter_list</i>
                                            {Literal}Change Sequence...{/Literal}
                                        </a>
                                    <!-- </div> -->
                                    <div class="col s12 report-field-column" style="padding-top:25px;width:max-content ;">
                                        <span id="selected-sequence" data-value=""></span>
                                        <span class="ap-validation-error-msg" id="sequence-error-msg" style="display: none">{Literal}A sequence has to be selected{/Literal}</span>
                                    </div>
                                <!-- </div> -->
                            </div>
                            
                        </div>
                        <div class="col s12 xl4 m6 report-form-col" id="report-filters">
                           
                            <div class="input-field report-field-column col s12" id="items-autocomplete-placeholder" style="display:none" >
                                <!--<input type="text" id="item-search-autocomplete" placeholder="{Literal}Start typing to search{/Literal}" class="chips chips-autocomplete hide-filter" data-filter-class="conditional-report-filter" data-filter="item">-->
                                <div class="chips chips-autocomplete hide-filter" id="item-search-autocomplete" data-filter-class="conditional-report-filter" data-filter="item"></div>
                                <label for="item-search-autocomplete" class="active"><i class="material-icons left">filter_list</i>{Literal}Filter by Item{/Literal}</label>
                            </div>
                            <div class="input-field col s6 report-field-column" style="display:none">
                                <input type="number" id="amount-range-from" class="hide-filter" data-filter-class="conditional-report-filter" data-filter="amountRange">
                                <label for="amount-range-from" style="font-size: 0.75rem"><i class="material-icons left" tyle="font-size: 0.75rem">filter_list</i>{Literal}From Amount{/Literal}</label>
                            </div>
                            <div class="input-field col s6 report-field-column" style="display:none">
                                <input type="number" id="amount-range-to" class="hide-filter" data-filter-class="conditional-report-filter" data-filter="amountRange">
                                <label for="amount-range-to" style="font-size: 0.75rem"><i class="material-icons left">filter_list</i>{Literal}To Amount{/Literal}</label>
                            </div>
                            
                            <div class="input-field col s12 report-field-column" style="display:none">
                                <input type="text" id="user-search-autocomplete" placeholder="{Literal}Start typing to search{/Literal}" class="hide-filter" data-filter-class="conditional-report-filter" data-filter="user">
                                <label for="user-search-autocomplete" class="active"><i class="material-icons left">filter_list</i>{Literal}Filter by User{/Literal}</label>
                            </div>
                            <div class="input-field col s12 report-field-column" style="display:none">
                                <input type="text" id="employee-search-autocomplete" placeholder="{Literal}Start typing to search{/Literal}" class="hide-filter" data-filter-class="conditional-report-filter" data-filter="employee">
                                <label for="employee-search-autocomplete" class="active"><i class="material-icons left">filter_list</i>{Literal}Filter by Employee{/Literal}</label>
                            </div>
                            <div class="input-field col s12 report-field-column" style="display:none">
                                <input type="text" id="customer-search-autocomplete" placeholder="{Literal}Start typing to search{/Literal}" class="hide-filter" data-filter-class="conditional-report-filter" data-filter="customer">
                                <label for="customer-search-autocomplete" class="active"><i class="material-icons left">filter_list</i>{Literal}Filter by Customer Code{/Literal}</label>
                            </div>
                            <div class="input-field col s12 report-field-column" style="display:none">
                                <input type="text" id="item-type-search-autocomplete" placeholder="{Literal}Start typing to search{/Literal}" class="hide-filter" data-filter-class="conditional-report-filter" data-filter="itemType">
                                <label for="item-type-search-autocomplete" class="active"><i class="material-icons left">filter_list</i>{Literal}Filter by Item Type{/Literal}</label>
                            </div>
                            <div class="input-field col s12 report-field-column" style="display:none">
                                <input type="text" id="item-category-search-autocomplete" placeholder="{Literal}Start typing to search{/Literal}" class="hide-filter" data-filter-class="conditional-report-filter" data-filter="itemCategory">
                                <label for="item-category-search-autocomplete" class="active"><i class="material-icons left">filter_list</i>{Literal}Filter by Item Category{/Literal}</label>
                            </div>
                            <div class="input-field col s12 report-field-column" style="display:none">
                                <input type="text" id="customer-type-search-autocomplete" placeholder="{Literal}Start typing to search{/Literal}" class="hide-filter" data-filter-class="conditional-report-filter" data-filter="customerType">
                                <label for="customer-type-search-autocomplete" class="active"><i class="material-icons left">filter_list</i>{Literal}Filter by Customer Type{/Literal}</label>
                            </div>
                            <div class="input-field col s12 report-field-column" style="display:none">
                                <input type="text" id="adjustment-session-search-autocomplete" placeholder="{Literal}Start typing to search{/Literal}" class="hide-filter" data-filter-class="conditional-report-filter" data-filter="adjustmentSession">
                                <label for="adjustment-session-search-autocomplete" class="active"><i class="material-icons left">filter_list</i>{Literal}Filter by Adjustment Session{/Literal}</label>
                            </div>
                            <div class="input-field col s12 report-field-column" style="display:none">
                                <a href="javascript:void(0)" id="signatures-modal-trigger" class="waves-effect waves-light btn-small ap-blue hide-filter" data-filter-class="conditional-report-filter" data-filter="signatures"><i class="material-icons left">filter_list</i>{Literal}Filter by Receipt{/Literal}</a>
                                <span>
                                    <div class="preloader-wrapper small right signature-modal-trigger-preloader">
                                        <div class="spinner-layer spinner-blue-only">
                                            <div class="circle-clipper left">
                                                <div class="circle"></div>
                                            </div>
                                            <div class="gap-patch">
                                                <div class="circle"></div>
                                            </div>
                                            <div class="circle-clipper right">
                                                <div class="circle"></div>
                                            </div>
                                        </div>
                                    </div>
                                </span>
                                <div data-filter-class="conditional-report-filter" class="selected-signature-text" data-filter="signatures">
                                </div>
                            </div>
                            <div class="input-field col s12 report-field-column" style="display:none">
                                <div class="switch">
                                    <label>
                                        <input type="checkbox" class="hide-filter form-switch form-switch-settings" id="customers-with-balance" data-filter-class="conditional-report-filter" data-filter="customersWithBalance">
                                        <span class="lever"></span>{Literal}Customers with Balance{/Literal}
                                    </label>
                                </div>
                            </div>
                            <div class="input-field col s12 report-field-column" style="display: none">
                                <label class="active">{Literal}Summarize By{/Literal}</label>
                                <div class="switch">
                                    <label>
                                        {Literal}Type{/Literal}
                                        <input type="checkbox" class="hide-filter form-switch form-switch-settings" id="summarize-by-category" data-filter-class="conditional-report-filter" data-filter="summarizeByCategory">
                                        <span class="lever"></span>
                                        {Literal}Category{/Literal}
                                    </label>
                                </div>
                            </div>
                            <div class="input-field col s12 report-field-column" style="display:none">
                                <div class="switch">
                                    <label>
                                        <input type="checkbox" class="hide-filter form-switch" id="show-pay-type-totals" data-filter-class="conditional-report-filter" data-filter="showPayTypeTotals">
                                        <span class="lever"></span>{Literal}Show Pay Type Totals{/Literal}
                                    </label>
                                </div>
                            </div>
                            <div class="input-field col s12 report-field-column" style="display:none">
                                <div class="switch">
                                    <label>
                                        <input type="checkbox" class="hide-filter form-switch" id="show-item-details" data-filter-class="conditional-report-filter" data-filter="showItemDetails">
                                        <span class="lever"></span>{Literal}Show Item Details{/Literal}
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col s12" id="transaction-filters"  style="display: none; padding-bottom: 50px">
                        <div id="transactionFilter" class="input-field col s4 report-field-column" style="visibility: hidden;">
                            <select id="transaction-filter-dropdown" multiple >
                                <option value="voids">{Literal}Voids{/Literal}</option>
                                <option value="cancels">{Literal}Cancels{/Literal}</option>
                                <option value="comps">{Literal}Comps{/Literal}</option>
                                <option value="discounts">{Literal}Discounts{/Literal}</option>
                            </select>
                            <label>{Literal}Transaction Report Filter{/Literal}</label>
                        </div>
                        
                    </div>
                </form>
            </div>
            <div class="quicklink-card-footer" style="margin-top:20px">
                <div class="row right-align" style="padding-left: 25px; padding-right: 25px">
                    <div id="transaction-advanced-filters-toggle" class="input-field col s12 report-field-column" style="display: none;">
                        <label>
                            <input type="checkbox" class="filled-in advanced">
                            <span>{Literal}Advanced Filters{/Literal}</span>
                        </label>
                    </div>
                </div>
                <div class="row right-align">
                    <div class="col s12 switch input-field" style="display:none">
                        <label>
                            <input type="checkbox" class="hide-filter form-switch form-switch-settings" id="export-to-xlsx" data-filter-class="conditional-report-filter" data-filter="exportToExcel">
                            <span class="lever"></span>{Literal}Export to Excel{/Literal}
                        </label>
                    </div>
                    <div class="col s12 switch input-field" style="display:none">
                        <label>
                            <input type="checkbox" checked class="hide-filter form-switch form-switch-settings" id="show-graphs" data-filter-class="conditional-report-filter" data-filter="showGraphs">
                            <span class="lever"></span>{Literal}Show Graphs{/Literal}
                        </label>
                    </div>
                </div>
                <br>
                <div class="row  right-align" style="margin-bottom: 2px">
                    <div class="col s12 m2 offset-m10">
                        <a style="width: 100%;" class="waves-effect ap-confirm-green waves-light btn-small run-report">{Literal}Run Report{/Literal}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="reports-wrapper" class="row report-card advanced-transaction-filters" style="padding-top: 15px; display:none; margin-bottom: 0px;<%= (App.rtl ? 'direction:rtl' : '') %>">
    <div class="col s12">
        <div class="quicklink-card z-depth-1 white" style="padding-left: 40px;padding-right: 40px;margin-bottom: 10px; margin-top: 10px; border:none;">
            <form>
                <div class="row" style="margin-bottom: 5px">
                    <h3 style="padding-left: 25px" id="dashboardHeader">{Literal}Additional Filters{/Literal}</h3>
                    <div class="col s12" id="advanced-transaction-filters"  style="margin-bottom: 0;">
                        <div class="row">
                            <div id="filterType" class="input-field col s12 m4 report-field-column">
                                <select multiple id="filter-type-dropdown">
                                    <option value="employeeFilter">{Literal}Employee{/Literal}</option>
                                    <option value="tillFilter">{Literal}Till{/Literal}</option>
                                    <option value="customerFilter">{Literal}Customer{/Literal}</option>
                                    <option value="amountFilter">{Literal}Transaction Amount{/Literal}</option>
                                    <option value="tenderFilter">{Literal}Tender Types{/Literal}</option>
                                    <option value="voidsFilter">{Literal}Show Voids Only{/Literal}</option>
									<option value="reopenedFilter">{Literal}Show Reopened Only{/Literal}</option>
									<option value="changesFilter">{Literal}Show Changes{/Literal}</option>
                                </select>
                                <label>{Literal}Filter Type{/Literal}</label>
                            </div>
                        </div>
                        <div class="row">
                            <div id="employeeFilter" class="input-field col s12 m4 report-field-column advanced-filter" style="display: none;">
                                <select id="employee-filter-dropdown">
                                </select>
                                <label>{Literal}Employee{/Literal}</label>
                            </div>
                            <div id="tillFilter" class="input-field col s12 m4 report-field-column advanced-filter" style="display: none;">
                                <select id="till-filter-dropdown">
                                </select>
                                <label>{Literal}Till{/Literal}</label>
                            </div>
                            <div id="customerFilter" class="input-field col s12 m4 report-field-column advanced-filter" style="display: none;">
                                <input  type="text" id="customer-filter-autocomplete" placeholder="{Literal}Start typing to search{/Literal}" class="hide-filter" data-filter-class="conditional-report-filter" data-filter="customer">
                                <label for="customer-filter-autocomplete" class="active"><i class="material-icons left">filter_list</i>{Literal}Filter by Customer Code{/Literal}</label>
                            </div>
                            <div id="tenderFilter" class="input-field col s12 m4 report-field-column advanced-filter" style="display: none;">
                                    <select id="tender-type-filter-dropdown">
                                        
                                    </select>
                                    <label>{Literal}Tender Types{/Literal}</label>
                            </div>
                        </div>
                        <div class="row">
                            <div id="amountFilter" class="advanced-filter" style="display: none;">
                                <div class="input-field col s12 m3">
                                    <input id="amountFromFilterFrom" type="number">
                                    <label for="amountFromFilterFrom">{Literal}From Amount{/Literal}</label>
                                </div>
                                <div class="input-field col s12 m3">
                                    <input id="amountToFilterFrom" type="number">
                                    <label for="amountToFilterFrom">{Literal}To Amount{/Literal}</label>
                                </div>
                            </div>
                        </div>
                        <div class="row hide">
                            <div id="amountFilter" class="input-field col s12 m4 report-field-column">
                                <select id="amount-filter-dropdown">
                                    <option value="fromToAmount">{Literal}Range (From/To){/Literal}</option>
                                    <option value="equalToAmount">{Literal}Equal to{/Literal}</option>
                                    <option value="greaterThanAmount">{Literal}Greater Than{/Literal}</option>
                                    <option value="lessThanAmount">{Literal}Less Than{/Literal}</option>
                                </select>
                                <label>{Literal}Transaction Amount{/Literal}</label>
                            </div>

                            <div id="fromAmountInputAmount" class="input-field col s12 m3">
                                <input id="fromAmount" type="number">
                                <label class="active" for="fromAmount">{Literal}From Amount{/Literal}</label>
                            </div>
                            <div id="toAmountInputAmount" class="input-field col s12 m3">
                                <input id="toAmount" type="number">
                                <label class="active" for="toAmount">{Literal}To Amount{/Literal}</label>
                            </div>
                            <div id="amountInputAmount" class="input-field col s12 m3" style="display: none;">
                                <input id="amount" type="number">
                                <label class="active" for="amount">{Literal}Amount{/Literal}</label>
                            </div>
                        </div>

                        <div class="row hide">
                            <div id="itemFilter" class="input-field col s12 m4 report-field-column">
                                <select id="item-filter-dropdown">
                                    <option value="fromToItem">{Literal}Range (From/To){/Literal}</option>
                                    <option value="equalToItem">{Literal}Equal to{/Literal}</option>
                                    <option value="greaterThanItem">{Literal}Greater Than{/Literal}</option>
                                    <option value="lessThanItem">{Literal}Less Than{/Literal}</option>
                                </select>
                                <label>{Literal}Item Amount{/Literal}</label>
                            </div>

                            
                            <div id="fromAmountInputItem" class="input-field col s12 m3">
                                <input id="fromAmountItem" type="number">
                                <label class="active" for="fromAmountItem">{Literal}From Amount{/Literal}</label>
                            </div>
                            <div id="toAmountInputItem" class="input-field col s12 m3">
                                <input id="toAmountItem" type="number">
                                <label class="active" for="toAmountItem">{Literal}To Amount{/Literal}</label>
                            </div>
                            <div id="itemAmountInputItem" class="input-field col s12 m3" style="display: none;">
                                <input id="itemAmount" type="number">
                                <label class="active" for="itemAmount">{Literal}Amount{/Literal}</label>
                            </div>
                        </div>

                        <div class="row hide">
                            <div id="invoiceNumberFilter" class="input-field col s12 m3">
                                <input id="invoiceNumber" type="number">
                                <label class="active" for="invoiceNumber">{Literal}Invoice Number{/Literal}</label>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Modal Structure -->
<div id="signatures-modal" class="modal bottom-sheet modal-fixed-footer" <%= (App.rtl ? 'style="direction:rtl"' : '') %> >
    <div class="modal-content">
        <div class="row">
            <div class="col s12">
                <div style="padding-bottom: 50px">
                    <h4>{Literal}Select Order Receipt{/Literal}</h4>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col s12 blue-text">
                <i class="material-icons left">info</i>{Literal}Showing receipts within the time range you've selected{/Literal}
            </div>
        </div>
        <div class="row">
            <div id="signatureCards" class="col s12 m7" style="max-height: 400px; overflow: auto">
                
            </div>
            <div class="col s12 m5">
                <div class="signature-img-wrapper" style="padding-top: 45px">

                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" id="signature-dismiss" class="waves-effect waves-light btn red">{Literal}Cancel{/Literal}</a>
        <a href="javascript:void(0)" class="waves-effect waves-light btn green" id="signature-ok">{Literal}Done{/Literal}</a>
        <input type="hidden" id="selected-receipt" value="" />
    </div>
</div>

<div id="sequence-modal" class="modal bottom-sheet modal-fixed-footer" <%= (App.rtl ? 'style="direction:rtl"' : '') %> >
    <div class="modal-content">
        <div class="row">
            <div class="col s6">
                <div style="padding-bottom: 50px">
                    <h4>{Literal}Select Sequence{/Literal}</h4>
                </div>
            </div>
            <div class="col s6">

            </div>
        </div>
        <div class="row">
            <div class="col s3" id="sequences-filters" style="position: sticky;top:0">
                <div>
                    <ul class="pagination" id="sequence-pagination" style="display: none" data-current-page="1">
                        <li class="disabled" id="pagination-back">
                            <a href="javascript:void(0)">
                                <i class="material-icons">chevron_left</i>
                            </a>
                        </li>
                        <li class="waves-effect" id="pagination-forward">
                            <a href="javascript:void(0)">
                                <i class="material-icons">chevron_right</i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col s9" id="sequences-wrapper">

            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" class="modal-close waves-effect waves-light btn red">{Literal}Cancel{/Literal}</a>
        <a href="javascript:void(0)" class="waves-effect waves-light btn green" id="sequence-modal-accept">{Literal}Done{/Literal}</a>
        <input type="hidden" id="selected-sequence" value="" />
    </div>
</div>
<div class="preloader-template" style="display: none;<%= (App.rtl ? 'direction:rtl' : '') %>">
    <div class="preloader-wrapper small">
        <div class="spinner-layer spinner-blue-only">
            <div class="circle-clipper left">
                <div class="circle"></div>
            </div>
            <div class="gap-patch">
                <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
                <div class="circle"></div>
            </div>
        </div>
    </div>
</div>