<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 clearCustomers" style="background-color: #ffffff" href="#clear-customers-modal">
                <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}Clear 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 clearItems" style="background-color: #ffffff">
                <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}Clear Item List{/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 clearSales" style="background-color: #ffffff">
                <i class="material-icons" style="display: flex; font-size: 48px; justify-content: center; color: #3970b7;" align="center">folder_special</i>
                <p style="font-size: 20px; font-weight: bold; color: #3970b7;" align="center">{Literal}Clear Sales Files{/Literal}</p>
            </div>
        </div>
    </div>
</div>

<div id="clear-customers-modal" class="modal modal-fixed-footer">
    <div class="modal-content">
        <div style="padding-bottom: 50px;">
            <h7>{Literal}Clear Customer Data{/Literal}</h7>
        </div>
        <p align="center">{Literal}Are you sure you want to clear all customer data{/Literal} <br>{Literal}from the AccuPOS Database{/Literal}?</p>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" id="clear-customers-confirm" class="modal-close waves-effect waves-green btn red left">{Literal}Clear{/Literal}</a>
        <a href="javascript:void(0)" class="modal-close waves-effect waves-light btn-flat left">{Literal}Cancel{/Literal}</a>
    </div>
</div>

<div id="clear-items-modal" class="modal modal-fixed-footer">
    <div class="modal-content">
        <div style="padding-bottom: 50px;">
            <h7>{Literal}Clear Items Data{/Literal}</h7>
        </div>
        <p align="center">{Literal}Are you sure you want to clear all items{/Literal} <br>{Literal}from the AccuPOS Database{/Literal}?</p>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" id="clear-items-confirm" class="modal-close waves-effect waves-green btn red left">{Literal}Clear{/Literal}</a>
        <a href="javascript:void(0)" class="modal-close waves-effect waves-light btn-flat left">{Literal}Cancel{/Literal}</a>
    </div>
</div>

<div id="clear-sales-dates" class="modal modal-fixed-footer">
    <div class="modal-content">
        <div style="padding-bottom: 50px;">
            <h7>{Literal}Clear Sales Data{/Literal}</h7>
        </div>
        <div class="row">
            <div class="col s12 m6 offset-m3">  
                <label class="active" for="startDate">{Literal}Choose a date to clear to{/Literal}</label>
                <input class="datepicker validate" id="startDate" type="text" >
                <span class="helper-text" data-error="This field contains invalid characters" data-success=""></span>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" id="open-clear-sales-confirm" class="waves-effect waves-green btn red left">{Literal}Clear{/Literal}</a>
        <a href="javascript:void(0)" class="modal-close waves-effect waves-light btn-flat right left">{Literal}Cancel{/Literal}</a>
    </div>
</div>

<div id="clear-sales-modal" class="modal modal-fixed-footer">
    <div class="modal-content">
        <h7>{Literal}Clear Sales Data{/Literal}</h7>
        <p align="center">{Literal}Are you sure you want to clear all sales{/Literal} <br>{Literal}from the AccuPOS Database{/Literal}?</p>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" id="clear-sales-confirm" class="modal-close waves-effect waves-green btn red left">{Literal}Clear{/Literal}</a>
        <a href="javascript:void(0)" class="modal-close waves-effect waves-light btn-flat left ">{Literal}Cancel{/Literal}</a>
    </div>
</div>