<div class="row">
    <div id="clearDataCards" <%= (App.rtl ? 'style="direction:rtl"' : '') %>>
        <div class="col s12 m3">
            <div class="card-panel z-depth-1 sequence-card hoverable white-text waves-effect waves-light importItems" style="background-color: #ffffff; max-height: 167px; min-height: 167px;">
                <i class="material-icons" style="display: flex; font-size: 48px; justify-content: center;  color: #3970b7;">shopping_basket</i>
                <p style="font-size: 20px; font-weight: bold; color: #3970b7;" align="center">{Literal}Import Items{/Literal}</p>
            </div>
        </div>

        <div class="col s12 m3">
            <div class="card-panel z-depth-1 sequence-card hoverable white-text waves-effect waves-light importCustomers" style="background-color: #ffffff; max-height: 167px; min-height: 167px;">
                <i class="material-icons" style="display: flex; font-size: 48px; justify-content: center;  color: #3970b7;">people</i>
                <p style="font-size: 20px; font-weight: bold; color: #3970b7;" align="center">{Literal}Import Customers{/Literal}</p>
            </div>
        </div>

        <div class="col s12 m3">
            <div class="card-panel z-depth-1 sequence-card hoverable white-text waves-effect waves-light importEmployees" style="background-color: #ffffff; max-height: 167px; min-height: 167px;">
                <i class="material-icons" style="display: flex; font-size: 48px; justify-content: center;  color: #3970b7;" align="center">assignment_ind</i>
                <p style="font-size: 20px; font-weight: bold; color: #3970b7;" align="center">{Literal}Import Employees{/Literal}</p>
            </div>
        </div>

        <div class="col s12 m3">
            <div class="card-panel z-depth-1 sequence-card hoverable white-text waves-effect waves-light importReset" style="background-color: #ffffff; max-height: 167px; min-height: 167px;">
                <i class="material-icons" style="display: flex; font-size: 48px; justify-content: center;  color: #3970b7;" align="center">replay</i>
                <p style="font-size: 20px; font-weight: bold; color: #3970b7;" align="center">{Literal}Import Reset{/Literal}</p>
            </div>
        </div>
        
        <div class="col s12 m3">
            <div class="card-panel z-depth-1 sequence-card hoverable white-text waves-effect waves-light exportItems" style="background-color: #ffffff; max-height: 167px; min-height: 167px;">
                <i class="material-icons" style="display: flex; font-size: 48px; justify-content: center;  color: #3970b7;" align="center">shop_two</i>
                <p style="font-size: 20px; font-weight: bold; color: #3970b7;" align="center">{Literal}Export Items{/Literal}</p>
            </div>
        </div>

        <div class="col s12 m3">
            <div class="card-panel z-depth-1 sequence-card hoverable white-text waves-effect waves-light exportSales" style="background-color: #ffffff; max-height: 167px; min-height: 167px;">
                <i class="material-icons" style="display: flex; font-size: 48px; justify-content: center;  color: #3970b7;" align="center">file_upload</i>
                <p style="font-size: 20px; font-weight: bold; color: #3970b7;" align="center">{Literal}Export Sales{/Literal}</p>
            </div>
        </div>
        <% if (App.serverInfo.hasAccuShift) {%>
            <div class="col s12 m3">
                <div class="card-panel z-depth-1 sequence-card hoverable white-text waves-effect waves-light sendTimes" style="background-color: #ffffff; max-height: 167px; min-height: 167px;">
                    <i class="material-icons" style="display: flex; font-size: 48px; justify-content: center;  color: #3970b7;" align="center">access_time</i>
                    <p style="font-size: 20px; font-weight: bold; color: #3970b7;" align="center">{Literal}Send Times to Payroll{/Literal}</p>
                </div>
            </div>

            <div class="col s12 m3">
                <div class="card-panel z-depth-1 sequence-card hoverable white-text waves-effect waves-light resendTimes" style="background-color: #ffffff; max-height: 167px; min-height: 167px;">
                    <i class="material-icons" style="display: flex; font-size: 48px; justify-content: center;  color: #3970b7;" align="center">timer</i>
                    <p style="font-size: 20px; font-weight: bold; color: #3970b7;" align="center">{Literal}Resend Times to Payroll{/Literal}</p>
                </div>
            </div>
        <% } %>
    </div>
</div>

<div id="import-sequence-modal" class="modal modal-fixed-footer item-type-form-modal" style="min-height: 25%; min-width: 50%; z-index: 100000;">
    <div class="modal-content">
        <div class="" style="padding-bottom: 30px">
            <h4>{Literal}Sequence Details{/Literal}</h4>
        </div>
        <div style="margin-top: 6px">
            <a id="skipSequencesPrev" class="arrow-nav-left btn-floating btn-medium waves-effect waves-light white customer-info-button"><i class="large material-icons icon-blue">keyboard_arrow_left</i></a> 
            <div class="ap-card-title-text white-text">
                {Literal}Page{/Literal} <%= this.sequencePage %> {Literal}of{/Literal} <%= Math.ceil(sequences.length / 100) %>
            </div>
            <a id="skipSequencesNext" class="arrow-nav-right btn-floating btn-medium waves-effect waves-light white notes-arrow-button"><i class="large material-icons icon-blue">keyboard_arrow_right</i></a>
        </div>

        <div class="row">
            <div class="col m3 s12">
                <label>{Literal}Show{/Literal}</label>
                <select id="filterSequenceBy">
                    <option value="all">All</option>
                    <option value="sentToAccounting">{Literal}Exported{/Literal}</option>
                    <option value="notSentToAccounting">{Literal}Not Exported{/Literal}</option>
                </select>
            </div>
        </div>
        <div class="row">
            
            
        </div>
        <div class="row">
            
            <% var currentSequenceCount = -1;
                var skipSequences = (sequencePage - 1) * 100;
             _.each(sequences, function(sequence) { 
                currentSequenceCount++;
                if(currentSequenceCount < skipSequences )
                    return true;
                if(currentSequenceCount > sequencePage * 100)
                    return false;
                %>
                <div class="col s12 m3 sequence-card-root" data-sentToAccounting="<%= sequence.sentToAccounting %>">
                    <div class="card-panel card-panel-entity z-depth-1 sequence-card hoverable waves-effect waves-light sendSequence" style="background-color: #ffffff" till-id="<%= sequence.till %>" data-id="<%= sequence.id %>" data-selected='0'>
                        <div class="card-panel-content">
                            <div class="row sequence-title-badge">
                                <span><%= sequence.id %></span>
                            </div>
                            <div class="">
                                {Literal}Seq{/Literal}. #<%= sequence.id %>
                            </div>
                            <div class="">
                                {Literal}Till:{/Literal} <%= sequence.till %>
                            </div>
                            <div class="">
                                {Literal}Start{/Literal}: <%=  moment(sequence.start).format('YYYY-MM-DD HH:mm') %>
                            </div>
                            <div class="">
                                {Literal}End{/Literal}: <%= moment(sequence.end).format('YYYY-MM-DD HH:mm') %>
                            </div> 
                            <div>
                                <%
                                    var sentToAccounting = '<span class="red-text bold">{Literal}No{/Literal}</span>';
                                    if(sequence.sentToAccounting) sentToAccounting = "{Literal}Yes{/Literal}";
                                %>
                                {Literal}Exported{/Literal}: <span class="exported"><%= sentToAccounting %></span>
                            </div>                        
                        </div>
                    </div>
                </div>
            <% }); %>
        </div>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" class="modal-close waves-effect waves-light left btn-flat cancel-item-type-button">{Literal}Cancel{/Literal}</a>
    </div>
</div>

<div id="send-times-modal" class="modal modal-fixed-footer send-times-form-modal" style="min-height: 25%; min-width: 50%; z-index: 100000;">
    <div class="modal-content">
        <div>
            <h4>{Literal}Resend Times{/Literal}</h4>
        </div>
        <div class="row" style="padding-top: 50px;">
            <div class="col s12 m6 offset-m3">
                <div class="input-field col s6">
                    <input class="datepicker" id="fromDate" type="text">
                    <label class="active" for="fromDate">{Literal}From Date{/Literal}</label>
                </div>
                <div class="input-field col s6">
                    <input class="datepicker" id="thruDate" type="text">
                    <label class="active" for="thruDate">{Literal}Through Date{/Literal}: </label>
                </div>
            </div>
            <a class="waves-effect waves-light btn-large green" id="filterSentTimes">{Literal}Filter{/Literal}</a>
        </div>

        <div class="row">
            <label class="col s12 m6 offset-m3">{Literal}Sent Times{/Literal}</label>
        </div>

        <div id="sentTimesList"></div>

       

    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" class="waves-effect waves-green btn green right send-times-button">{Literal}Send{/Literal}</a>
        <a href="javascript:void(0)" class="modal-close waves-effect waves-light right btn-flat">{Literal}Cancel{/Literal}</a>
    </div>
</div>

<div id="import-employee-modal" class="modal modal-fixed-footer">
    <div class="modal-content">
        <div style="padding-bottom: 50px;">
            <h6>{Literal}Import Employees{/Literal}</h6>
        </div>
        <p style="text-align: center;  color: #3970b7;">{Literal}Reset Pay Types on import{/Literal}?</p>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" id="reset-employee-pay-type-deny" class="modal-close waves-effect waves-green btn green left">{Literal}Import Without Reset{/Literal}</a>
        <a href="javascript:void(0)" class="modal-close waves-effect waves-light btn-flat left">{Literal}Cancel{/Literal}</a>
        <a href="javascript:void(0)" id="reset-employee-pay-type-confirm" class="modal-close waves-effect waves-green btn-flat red-text right">{Literal}Import with Reset{/Literal}</a>
        <input type="hidden" id="delete-price-level-times-id" />
    </div>
</div>

<div id="confirm-resend-modal" class="modal modal-fixed-footer message-modal">
    <div class="modal-content" >
        <div style="padding-bottom: 50px;">
            <h6>{Literal}Export Sequence{/Literal}</h6>
        </div>
        <p style="text-align: center; color: #3970b7;">{Literal}You are about to export this sequence.{/Literal}
            <br>
            {Literal}Are you sure you want to continue?{/Literal}</p>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" id="confirm" class="modal-close waves-effect waves-green btn green left">{Literal}Export{/Literal}</a>
        <a href="javascript:void(0)" class="modal-close waves-effect waves-light btn-flat left">{Literal}Cancel{/Literal}</a>
        <a href="javascript:void(0)" id="markAsExported" class="modal-close waves-effect waves-green btn">{Literal}Mark as exported{/Literal}</a>
    </div>
</div>

<div id="integration-status-logs-modal" class="modal modal-fixed-footer ">
    <div class="modal-content">
        <div style="padding-bottom: 50px;">
            <h6>{Literal}Integration Status Log{/Literal}</h6>
        </div>
        <table id="integration-status-logs-table">
            <thead>
                <tr style="position: sticky;top: -26px;background: white;">
                    <th>Timestamp</th>
                    <th>Action</th>
                    <th>Code</th>
                    <th>Status</th>
                    <th>Message</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)"
            class="modal-close waves-effect green waves-light btn-flat left">{Literal}Close{/Literal}</a>
    </div>
</div>

<%var dataPosition=App.rtl? "right" : "left" %>
<div class="fixed-action-btn direction-top">    
    <a href="javascript:void(0)" id="show-integration-status-logs-button"
    class="btn-floating btn-large waves-effect waves-light green z-depth-4">
    <i class="material-icons tooltipped" data-position="<%=dataPosition%>"
        data-tooltip="Integration Status Log">subject</i>
    </a>
</div>