<div id="product-line-container"> 
    <div class="row" id="product-lines-wrapper">
        <% _.each(productLines, function(productLine) { %>
        <div class="col s12 m3 xl2">
            <div class="card-panel card-panel-entity z-depth-1 sequence-card hoverable white-text <%= productLine.cardStyleClass %> waves-effect waves-light" data-id="<%= productLine.id %>" data-selected='0' style="padding-top: 5px !important;">
                
                <div>
                    <div class="row description truncate" style="color: #3970b7;">
                        <%= productLine.description %>
                    </div>
                    <div class="row type truncate" style="font-size: .95rem; margin-bottom: 0px; color: gray;">
                        <%= productLine.type %>
                    </div>
                    <div class="row menu-page truncate" style="font-size: .95rem; margin-bottom: 0px; color: gray;">
                        {Literal}Menu Page{/Literal}: <%= productLine.menuKeyPage %>
                    </div>
                    <div class="row taxable truncate" style="font-size: .95rem; margin-bottom: 0px; color: gray;">
                        <% if(productLine.taxable) { %>
                            {Literal}Taxable{/Literal}
                        <% } %>
                        <% if(!productLine.taxable) { %>
                            {Literal}Non-Taxable{/Literal}
                        <% } %>
                    </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-product-line-trigger"
                        data-id="<%= productLine.id %>">
                        <i class="material-icons">edit</i>
                    </a>
                </div>
            </div>
        </div>
        <% }); %>
    </div>
</div>
<div id="delete-product-line-modal" class="modal delete-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 product line?{/Literal}</p>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" class="modal-close waves-effect waves-light btn-flat">{Literal}Cancel{/Literal}</a>
        <a href="javascript:void(0)" id="delete-product-line-confirm" class="modal-close waves-effect waves-green btn red">{Literal}Delete{/Literal}</a>
        <input type="hidden" id="delete-product-line-id" val=""/>
    </div>
</div>

<div id="product-line-form-modal" class="modal modal-fixed-footer" style="max-height: 100%">

</div>

<a class="modal-trigger btn-floating btn-large waves-effect waves-light ap-blue floating-action-button-fixed z-depth-4 add-product-line">
    <i class="material-icons">add</i>
</a>