<div id="sales-taxes-form-modal" class="modal modal-fixed-footer" style="max-height: 100%" <%= (App.rtl ? 'style="direction:rtl"' : '') %>></div>
    <div class="modal-content">
        <div id="sales-taxes-form-content">
            <div style="padding-bottom: 50px">
                <h4 style="font-size: 1.2rem">{Literal}Tax Details{/Literal}</h4>
            </div>
            <form>
                <div class="row">
                    <div class="col s12 m3">
                        <div id="taxAuth1" class="card-panel card-panel-entity ap-blue z-depth-1 sequence-card hoverable white-text waves-effect waves-light">
                            <div>
                                <% if (salesTaxes.taxAuth1 == '') { %>
                                    <div class="row description truncate" style="position: relative; bottom: 8px; width: 150%; height: 48px;">
                                        {Literal}Tax Authority 1{/Literal}
                                    </div>
                                <% } %>
                                <% if (salesTaxes.taxAuth1 != '') { %>
                                    <div class="row description truncate" style="position: relative; bottom: 8px; width: 150%; height: 48px;">
                                        <%= salesTaxes.taxAuth1 %>
                                    </div>
                                <% } %>
                            </div>
                            <div class="edit" style="display: none">
                                <a href="javascript:void(0)" class="btn-floating btn-large waves-effect waves-light ap-dark-blue edit-taxAuth1-trigger">
                                    <i class="material-icons">edit</i>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="col s12 m3">
                        <div id="taxAuth2" class="card-panel card-panel-entity ap-blue z-depth-1 sequence-card hoverable white-text waves-effect waves-light">
                            <div>
                                <% if (salesTaxes.taxAuth2 == '') { %>
                                    <div class="row description truncate" style="position: relative; bottom: 8px; width: 150%; height: 48px;">
                                        {Literal}Tax Authority 2{/Literal}
                                    </div>
                                <% } %>
                                <% if (salesTaxes.taxAuth2 != '') { %>
                                    <div class="row description truncate" style="position: relative; bottom: 8px; width: 150%; height: 48px;">
                                        <%= salesTaxes.taxAuth2 %>
                                    </div>
                                <% } %>
                            </div>
                            <div class="edit" style="display: none">
                                <a href="javascript:void(0)" class="btn-floating btn-large waves-effect waves-light ap-dark-blue edit-taxAuth2-trigger">
                                    <i class="material-icons">edit</i>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="col s12 m3">
                        <div id="taxAuth3" class="card-panel card-panel-entity ap-blue z-depth-1 sequence-card hoverable white-text waves-effect waves-light">
                            <div>
                                <% if (salesTaxes.taxAuth3 == '') { %>
                                    <div class="row description truncate" style="position: relative; bottom: 8px; width: 150%; height: 48px;">
                                        {Literal}Tax Authority 3{/Literal}
                                    </div>
                                <% } %>
                                <% if (salesTaxes.taxAuth3 != '') { %>
                                    <div class="row description truncate" style="position: relative; bottom: 8px; width: 150%; height: 48px;">
                                        <%= salesTaxes.taxAuth3 %>
                                    </div>
                                <% } %>
                            </div>
                            <div class="edit" style="display: none">
                                <a href="javascript:void(0)" class="btn-floating btn-large waves-effect waves-light ap-dark-blue edit-taxAuth3-trigger">
                                    <i class="material-icons">edit</i>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="col s12 m3">
                        <div id="taxAuth4" class="card-panel card-panel-entity ap-blue z-depth-1 sequence-card hoverable white-text waves-effect waves-light">
                            <div>
                                <% if (salesTaxes.taxAuth4 == '') { %>
                                    <div class="row description truncate" style="position: relative; bottom: 8px; width: 150%; height: 48px;">
                                        {Literal}Tax Authority 4{/Literal}
                                    </div>
                                <% } %>
                                <% if (salesTaxes.taxAuth4 != '') { %>
                                    <div class="row description truncate" style="position: relative; bottom: 8px; width: 150%; height: 48px;">
                                        <%= salesTaxes.taxAuth4 %>
                                    </div>
                                <% } %>
                            </div>
                            <div class="edit" style="display: none">
                                <a href="javascript:void(0)" class="btn-floating btn-large waves-effect waves-light ap-dark-blue edit-taxAuth4-trigger">
                                    <i class="material-icons">edit</i>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="col s12 m3">
                        <div id="taxAuth5" class="card-panel card-panel-entity ap-blue z-depth-1 sequence-card hoverable white-text waves-effect waves-light">
                            <div>
                                <% if (salesTaxes.taxAuth5 == '') { %>
                                    <div class="row description truncate" style="position: relative; bottom: 8px; width: 150%; height: 48px;">
                                        {Literal}Tax Authority 5{/Literal}
                                    </div>
                                <% } %>
                                <% if (salesTaxes.taxAuth5 != '') { %>
                                    <div class="row description truncate" style="position: relative; bottom: 8px; width: 150%; height: 48px;">
                                        <%= salesTaxes.taxAuth5 %>
                                    </div>
                                <% } %>
                            </div>
                            <div class="edit" style="display: none">
                                <a href="javascript:void(0)" class="btn-floating btn-large waves-effect waves-light ap-dark-blue edit-taxAuth5-trigger">
                                    <i class="material-icons">edit</i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal-footer">
    <a href="#delete-tax-modal" class="waves-effect waves-light btn-flat red-text left modal-trigger delete-tax-button left">{Literal}Delete{/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-tax-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 tax code{/Literal}?</p>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" id="delete-tax-confirm" class="modal-close waves-effect waves-green btn red left" data-tax-id="<%= salesTaxes.id%>">{Literal}Delete{/Literal}</a>
        <input type="hidden" id="delete-tax-id" />
        <a href="javascript:void(0)" class="modal-close waves-effect waves-light btn-flat left">{Literal}Cancel{/Literal}</a>
    </div>
</div>

<div id="tax-authority-modal" class="modal modal-fixed-footer">
    <div class="modal-content">
        <div style="padding-bottom: 50px">
            <h4>Tax Authority</h4>
        </div>
        <div class="row">
            <div class="col s12">
                <div class="col s12 m4 offset-m2">
                    <div class="input-field">
                        <input id="id" type="text" value="" class="validate">
                        <label class="active" for="id">{Literal}Authority ID{/Literal}</label>
                        <span class="helper-text" data-error="This field is mandatory and cannot contain special characters" data-success=""></span>
                    </div>
                </div>

                <div class="col s12 m4"  >
                    <div class="input-field">
                        <input id="rate" step="any" type="number" value="" class="validate">
                        <label class="active" for="rate">{Literal}Rate %{/Literal}</label>
                        <span class="helper-text" data-error="This field is mandatory and cannot contain special characters" data-success=""></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col s12">
                <div class="col s12 m4 offset-m2" <%= (!App.serverInfo.hasAccounting ? 'style="display:none;"' : '')%>>
                    <div class="input-field">
                        <input id="glAccount" type="text">
                        <label class="active" for="glAccount">{Literal}G.L. Account{/Literal}</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a href="#delete-tax-authority-modal" class="waves-effect waves-light btn-flat red-text right modal-trigger delete-authority-button">{Literal}Delete{/Literal}</a>
        <a href="javascript:void(0)" class="waves-effect waves-green btn green left save-authority-button">{Literal}Save{/Literal}</a>
        <a href="javascript:void(0)" class="modal-close waves-effect waves-light left btn-flat">{Literal}Cancel{/Literal}</a>
    </div>
</div>

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