<div class="row"  <%= (App.rtl ? 'style="direction:rtl"' : '') %> >
    <div id="advancedSettingsCards" >
        <div class="row">
            <div class="col s12 m3">
                <a class="card-panel z-depth-2 sequence-card hoverable white-text waves-effect waves-light" style="background-color: #3754A0;  min-height: 170px; max-height: 170px;" href="#/clear-data">
                    <i class="material-icons" style="display: flex; font-size: 48px; justify-content: center;">clear</i>
                    <p style="font-size: 18px; font-weight: bold;" align="center">{Literal}Clear Data{/Literal}</p>
                </a>
            </div>
            <div class="col s12 m3">
                <a class="card-panel z-depth-2 sequence-card hoverable white-text waves-effect waves-light" style="background-color: #EF486F;  min-height: 170px; max-height: 170px;" href="#/backup-restore">
                    <i class="material-icons" style="display: flex; font-size: 48px; justify-content: center;">settings_backup_restore</i>
                    <p style="font-size: 18px; font-weight: bold;" align="center">{Literal}Backup / Restore{/Literal}</p>
                </a>
            </div>
            <div class="col s12 m3">
                <a class="card-panel z-depth-1 sequence-card hoverable white-text waves-effect waves-light" style="background-color: #FFD167;  min-height: 170px; max-height: 170px;" href="#/deli-scale">
                    <i class="material-icons" style="display: flex; font-size: 48px; justify-content: center;">iso</i>
                    <p style="font-size: 18px; font-weight: bold;" align="center">{Literal}Deli Scales{/Literal}</p>
                </a>
            </div>
            <div class="col s12 m3" style="display: <%= App.serverInfo.hasEConduitCardHandler ? 'block': 'none' %>;">
                <a class="card-panel z-depth-1 sequence-card hoverable white-text waves-effect waves-light" style="background-color: #4ABD98;  min-height: 170px; max-height: 167px;" href="#/e-conduit">
                    <i class="material-icons" style="display: flex; font-size: 48px; justify-content: center;">nfc</i>
                    <p style="font-size: 18px; font-weight: bold;" align="center">{Literal}EConduit Terminal Setup{/Literal}</p>
                </a>
            </div>
            <div class="col s12 m3" style="display: <%= App.serverInfo.hasTriPOSCardHandler ? 'block': 'none' %>;">
                <a class="card-panel z-depth-1 sequence-card hoverable white-text waves-effect waves-light" style="background-color: #4ABD98;  min-height: 170px; max-height: 167px;" href="#/tripos">
                    <i class="material-icons" style="display: flex; font-size: 48px; justify-content: center;">nfc</i>
                    <p style="font-size: 18px; font-weight: bold;" align="center">{Literal}Worldpay TriPOS Terminal Setup{/Literal}</p>
                </a>
        </div>
        <!-- </div>

        <div class="row"> -->
            <div class="col s12 m3">
                <a class="card-panel z-depth-1 sequence-card hoverable white-text waves-effect waves-light" style="background-color: #252525;  min-height: 170px; max-height: 167px;" href="#/remote-display">
                    <i class="material-icons" style="display: flex; font-size: 48px; justify-content: center;">settings_remote</i>
                    <p style="font-size: 18px; font-weight: bold;" align="center">{Literal}Remote Display Devices{/Literal}</p>
                </a>
            </div>
            <div class="col s12 m3">
                <a class="card-panel z-depth-2 sequence-card hoverable white-text waves-effect waves-light" style="background-color: #4B9CD6;  min-height: 170px; max-height: 170px;" href="#/card-setup">
                    <i class="material-icons" style="display: flex; font-size: 48px; justify-content: center;">credit_card</i>
                    <p style="font-size: 18px; font-weight: bold;" align="center">{Literal}Cards{/Literal} &amp; {Literal}Merchant Setup{/Literal}</p>
                </a>
            </div>
            <div class="col s12 m3">
                <a class="card-panel z-depth-2 sequence-card hoverable white-text waves-effect waves-light" style="background-color: #DEBEDB;  min-height: 170px; max-height: 170px;" href="#/integrations">
                    <i class="material-icons" style="display: flex; font-size: 48px; justify-content: center;">card_membership</i>
                    <p style="font-size: 18px; font-weight: bold;" align="center">{Literal}Integrations{/Literal}</p>
                </a>
            </div>
            <% if(!App.serverInfo.hasVatTax) { %>
                <div class="col s12 m3">
                    <a class="card-panel z-depth-1 sequence-card hoverable white-text waves-effect waves-light" style="background-color: #A4D391;  min-height: 170px; max-height: 170px;" href="#/alternative-taxes">
                        <i class="material-icons" style="display: flex; font-size: 48px; justify-content: center;">share</i>
                        <p style="font-size: 18px; font-weight: bold;" align="center">{Literal}Alternative Taxes{/Literal}</p>
                    </a>
                </div>
            <% } %>
            <% if(App.serverInfo.country === 'IL') { %>
                <div class="col s12 m3">
                    <a id="auditCard" class="card-panel z-depth-1 sequence-card hoverable white-text waves-effect waves-light" style="background-color: #A4D391;  min-height: 170px; max-height: 170px;" href="javascript:void(0)">
                        <i class="material-icons" style="display: flex; font-size: 48px; justify-content: center;">send</i>
                        <p style="font-size: 18px; font-weight: bold;" align="center">{Literal}Create IL Audit Files{/Literal}</p>
                    </a>
                </div>
            <% } %>
            <div class="col s12 m3">
                <a class="card-panel z-depth-2 sequence-card hoverable white-text waves-effect waves-light" style="background-color: #b48383;  min-height: 170px; max-height: 170px;" href="#/import-export-data">
                    <i class="material-icons" style="display: flex; font-size: 48px; justify-content: center;">import_export</i>
                    <p style="font-size: 18px; font-weight: bold;" align="center">{Literal}Import{/Literal} / {Literal}Export{/Literal}</p>
                </a>
            </div>
            <div class="col s12 m3">
                <a class="card-panel z-depth-2 sequence-card hoverable white-text waves-effect waves-light" style="background-color: #43a740d9;  min-height: 170px; max-height: 170px;" href="#/scheduled-email-reports">
                    <i class="material-icons" style="display: flex; font-size: 48px; justify-content: center;">email</i>
                    <p style="font-size: 18px; font-weight: bold;" align="center">{Literal}Scheduled Email Reports{/Literal}</p>
                </a>
            </div>
            <div class="col s12 m3">
                <a class="card-panel z-depth-2 sequence-card hoverable white-text waves-effect waves-light" style="background-color: #95228dd9;  min-height: 170px; max-height: 170px;" href="#/server-configuration">
                    <i class="material-icons" style="display: flex; font-size: 48px; justify-content: center;">computer</i>
                    <p style="font-size: 18px; font-weight: bold;" align="center">{Literal}Server Configuration{/Literal}</p>
                </a>
            </div>
        </div>
    </div>
</div>
<div id="audit-modal" class="modal modal-fixed-footer" style="color: black; width: 55% !important; height: 50% !important;">
    <div class="modal-content" style="color: black;">
        <h3 style="font-size: 2.28em;">{Literal}Please enter your starting date and ending date to Audit{/Literal}</h3>
        <div class="row">
            <div class="input-field col s12 m4">
                <input class="datepicker" id="startDay" placeholder="{Literal}Start Date{/Literal}" type="text" style="border-bottom: ridge;">
            </div>
            <div class="input-field col s12 m4">
                <input class="datepicker" id="endDay" placeholder="{Literal}End Date{/Literal}" type="text" style="border-bottom: ridge;">
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" id="cancelAuditModal" class="waves-effect waves-light btn-flat" style="top: -20%;">{Literal}Cancel{/Literal}</a>
        <a href="javascript:void(0)" id="saveAuditModal" class="waves-effect waves-green right btn green">{Literal}Confirm{/Literal}</a>
    </div>
</div>