Product Templates
Create a catalog template by selecting SYNNEX and private products, add pricing in the catalog template.
<!--Catalog Management Templates-->
<div class="storefront-rightbar catalog-management templates">
<div class="row">
<div class="col-md-12">
<h3>Product Templates</h3>
<p>Create a catalog template by selecting SYNNEX and private products, add pricing in the catalog template.</p>
</div>
<div class="col-md-12">
<div class="products-search">
<div class="search-input-col">
<i class="icon-cross" style="display: none;"></i>
<i class="icon-search"></i>
<input type="text" class="form-control form-control-padding search-category" placeholder="Search by template or customer name" autocomplete="off">
</div>
<button class="btn btn-outline openRtFly" data-flyout="create-new-temp"><i class="icon-plus"></i> Create New Template</button>
</div>
</div>
<div class="col-md-12">
<div class="list-view-tile summary-tab-table templates">
<table class="table custom-table adminTable">
<thead class="thead-light">
<tr>
<th scope="col" width="25%">Template Name </th>
<th scope="col" width="25%">Customers</th>
<th scope="col" width="25%">Last Modify Date</th>
<th scope="col" width="25%"> </th>
</tr>
</thead>
<tbody>
<tr class="prod-row newCategoryRow">
<td><span class="text-blue"><strong>Default Template</strong></span></td>
<td>All Customer</td>
<td>11/25/2020</td>
<td>
<div class="table-action-link">
<div class="link-text-more moreMainDiv">
<a href="javascript:void(0);" class="openMoreFly"><i class="icon-subscriptions" data-toggle="tooltip" data-placement="top" title="Copy Template" ><span class="path1"></span><span class="path2"></span></i></a>
<div class="text-more-flyout" style="display: none;">
<i class="icon-dropdown-arrow"></i>
<h6>Copy Template</h6>
<div class="temp-details">
<label class="mt-2">Template Name <span class="asterisk">*</span></label>
<div class="search-input-col">
<i class="icon-cross" style="display: none;"></i>
<input type="text" class="form-control form-control-padding " placeholder="Enter template name">
</div>
<div class="mini-flyout-footer-btns">
<input type="button" class="btn btn-outline ml-auto cancelCopy" value="Cancel">
<input type="button" class="btn btn-primary disabled createCopy" value="Create Copy">
</div>
</div>
</div>
</div>
<a href="javascript:void()" class="row-expand-icon" data-toggle="tooltip" data-placement="top" title="" data-original-title="Collapse"><i class="icon-arrow-bottom"></i></a>
</div>
</td>
</tr>
<tr class="addOnRow addon-shadow sub-product" style="display: none;">
<td colspan="4" class="p-0 border-0">
<div class="total-customer-col">
<div class="cutomer-container tempSubTable">
<div class="table-search">
<h1>Product List</h1>
<div class="products-search position-relative">
<div class="search-input-col">
<i class="icon-search"></i>
<input type="text" class="form-control form-control-padding ui-autocomplete-input" placeholder="Search by product name" autocomplete="off">
</div>
<button class="btn btn-outline ml-auto openRtFly col-auto" data-flyout="upload-product-price">Upload Products & Price</button>
<button class="btn btn-outline ml-2 openRtFly col-auto" data-flyout="batch-price">Batch Price Adjustment</button>
<button class="btn btn-outline ml-2 openRtFly col-auto" data-flyout="tempAddProducts">Add Product</button>
<button class="btn btn-outline ml-2" onClick="parent.location='preview.html'"><i class="icon-document-eye m-0" data-toggle="tooltip" data-placement="top" title="Preview"></i></button>
<button class="btn btn-outline ml-2 permissionBtn"><i class="icon-user--permission-control m-0" data-toggle="tooltip" data-placement="top" title="Permission Control"></i></button>
<button class="btn btn-outline del ml-2" data-delete="delAllProd" data-toggle="tooltip" data-placement="top" title="Delete All"><i class="icon-delete m-0" data-toggle="modal" data-target="#alertModal"></i></button>
<div class="text-more-flyout permission-flyout" style="display: none;">
<i class="icon-dropdown-arrow"></i>
<h6>Change Permission Control Values</h6>
<div class="temp-details">
<ul class="pl-0 mb-0">
<li>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="Radio16" name="example31" value="View Only">
<label class="custom-control-label" for="Radio16"><span>View Only</span></label>
</div>
</li>
<li>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="Radio17" name="example31" value="Enable">
<label class="custom-control-label" for="Radio17"><span>Enable </span></label>
</div>
</li>
<li>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="Radio18" name="example31" value="Disable">
<label class="custom-control-label" for="Radio18"><span>Disable</span></label>
</div>
</li>
</ul>
<div class="mini-flyout-footer-btns">
<input type="button" class="btn btn-outline ml-auto cancel" value="Cancel">
<input type="button" class="btn btn-primary ml-0 disabled apply" value="Apply">
</div>
</div>
</div>
</div>
</div>
<div class="customers-box">
<div class="customer-tabel-col pt-0 position-relative">
<table>
<thead>
<tr>
<th width="20%">Product Name</th>
<th width="12%">Min Qty/Max Qty</th>
<th width="12%">Permimission Control</th>
<th width="12%">Action Allowed</th>
<th width="7%" class="text-right">Your Price (USD)</th>
<th width="7%" class="text-right">MSRP (USD)</th>
<th width="10%" class="text-right">Customer Price (USD)</th>
<th width="10%" class="text-right">Global Customer Price (USD)</th>
<th width="10%" class="text-right">Actions</th>
</tr>
</thead>
<tbody>
<tr class="no-products" style="display: none;">
<td colspan="9">
<div class="no-products text-center py-4">
<i class="icon-resources"></i>
<span class="noprod-txt">No products</span>
<span class="selectVendor-Txt">Upload or add products to see products</span>
</div>
</td>
</tr>
<tr>
<td><span class="product-name">One Drive For Business Plan 1</span><span class="snx-sku">SNX SKU# 4006192</span></td>
<td>
<span class="non-edit">1-15 </span>
<div class=" editTd" style="display: none;">
<div class="d-flex " >
<div class="search-input-col">
<i class="icon-cross" style="display: none;"></i>
<input type="text" class="form-control form-control-padding " value="">
</div>
<div class="search-input-col ml-2">
<i class="icon-cross" style="display: none;"></i>
<input type="text" class="form-control form-control-padding " value="">
</div>
</div>
</div>
</td>
<td>
<span class="non-edit permissionTxt">View Only </span>
<div class="search-input-col editTd" style="display: none;">
<div class="custom-dropdown dropdown cards-custom-dropdown">
<button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-arrow-bottom"></i>
<span class="selected-value">Select</span>
</button>
<div class="dropdown-menu active-menu">
<div class="">
<a class="dropdown-item " href="javascript:void(0);"><span>View Only</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Enable</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Disable</span></a>
</div>
</div>
</div>
</div>
</td>
<td>
<span class="non-edit">Upgrade</span>
<div class="search-input-col editTd" style="display: none;">
<div class="custom-dropdown dropdown cards-custom-dropdown">
<button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-arrow-bottom"></i>
<span class="selected-value">Select</span>
</button>
<div class="dropdown-menu active-menu">
<div class="">
<a class="dropdown-item " href="javascript:void(0);">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="Check1" name="example1">
<label class="custom-control-label" for="Check1">Add-on</label>
</div>
</a>
<a class="dropdown-item " href="javascript:void(0);">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="Check2" name="example1">
<label class="custom-control-label" for="Check2">Cancel</label>
</div>
</a>
<a class="dropdown-item " href="javascript:void(0);">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="Check3" name="example1">
<label class="custom-control-label" for="Check3">Reactive</label>
</div>
</a>
<a class="dropdown-item " href="javascript:void(0);">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="Check5" name="example1">
<label class="custom-control-label" for="Check5">Upgrade</label>
</div>
</a>
</div>
</div>
</div>
</div>
</td>
<td class="text-right">4.40</td>
<td class="text-right">5.00</td>
<td class="text-right">
5.00
<div class="cal-flyout" >
<a href="javascript:void(0)" class="priceFly"><i class="icon-cal" data-toggle="tooltip" data-placement="top" title="Price Adjustment"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span></i></a>
<div class="text-more-flyout price-table-cal" style="display: none;">
<i class="icon-dropdown-arrow"></i>
<div class="temp-details custPriceBtns" >
<div class="service-label">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="Radio22" name="service22" value="price" checked="">
<label class="custom-control-label" for="Radio22"><span>Price Markup</span></label>
</div>
<div class="custom-control custom-radio label2">
<input type="radio" class="custom-control-input" id="Radio69" name="service22" value="msrp">
<label class="custom-control-label" for="Radio69"><span>MSRP Adjustment</span></label>
</div>
<div class="custom-control custom-radio label2">
<input type="radio" class="custom-control-input" id="Radio99" name="service22" value="fix">
<label class="custom-control-label" for="Radio99"><span>Fixed Amount</span></label>
</div>
</div>
<div class="grey-selection-box mt-2 price">
<div class="group-btn-list">
<div class="input-group input-percantage">
<input type="text" class="form-control " placeholder="00.00" aria-label="00.00" aria-describedby="basic-addon2" align="center">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">%</span>
</div>
</div>
<input type="button" class="btn btn-primary disabled ml-2 calculate" value="Calculate">
<button type="button" class="btn btn-outline disabled ml-2 removePrice">Remove Customer Price</button>
</div>
</div>
<div class="grey-selection-box msrp" style="display: none;">
<div class="group-btn-list">
<span class="inc-decrease-btns">
<button type="button" class="btn btn-default btn-number btn-add-input more" data-type="plus" data-field="quant[1]" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add Quantity">
<i class="icon-plus"></i>
</button>
<button type="button" class="btn btn-default btn-number btn-minus-input disabled" data-type="plus" data-field="quant[1]" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add Quantity">
<img src="images/minus-icon.png" class="minus-img">
</button>
</span>
<div class="input-group input-percantage">
<input type="text" class="form-control" placeholder="00.00" aria-label="00.00" aria-describedby="basic-addon2" align="center" disabled="">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">%</span>
</div>
</div>
<input type="button" class="btn btn-primary disabled ml-2 calculate" value="Calculate">
<button type="button" class="btn btn-outline disabled ml-2 removePrice">Remove Customer Price</button>
</div>
</div>
<div class="grey-selection-box fix" style="display: none;">
<div class="row">
<div class="col-md-6">
<div class="search-input-col">
<i class="icon-cross" style="display: none;"></i>
<input type="text" class="form-control form-control-padding fix" placeholder="--" >
</div>
</div>
</div>
</div>
<div class="mini-flyout-footer-btns">
<input type="button" class="btn btn-outline ml-auto cancel" value="Cancel">
<input type="button" class="btn btn-primary ml-0 save" value="Save">
</div>
</div>
</div>
</div>
</td>
<td class="text-right">4.84</td>
<td>
<div class="table-action-link">
<a href="javascript:void(0)" class="editTd cross-circle cancelEditing" style="display: none;"><i class="icon-cross-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="Cancel Editing"><span class="path1"></span><span class="path2"></span></i></a>
<a href="javascript:void(0)" class="editTd cross-circle cancelEditing" style="display: none;"><i class="icon-file-v1" data-toggle="tooltip" data-placement="top" title="Save"><span class="path1"></span><span class="path2"></span></i></a>
<a href="javascript:void();" class="non-edit editTemplate">
<div class="circle-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit Template"></i></div>
</a>
<a href="javascript:void();" class="non-edit delete" data-delete="delTemp" data-toggle="modal" data-target="#alertModal" ><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete Template"><span class="path1"></span><span class="path2"></span></i></a>
</div>
</td>
</tr>
<tr>
<td><span class="product-name">One Drive For Business Plan 1</span><span class="snx-sku">SNX SKU# 4006192</span></td>
<td></td>
<td><span class="permissionTxt">Enable</span></td>
<td>Reactive</td>
<td class="text-right">4.40</td>
<td class="text-right">5.00</td>
<td class="text-right">5.00 <a href="javascript:void(0)"><i class="icon-cal" data-toggle="tooltip" data-placement="top" title="Price Adjustment"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span></i></a></td>
<td class="text-right">4.84</td>
<td>
<div class="table-action-link">
<a href="javascript:void();">
<div class="circle-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit Template"></i></div>
</a>
<a href="javascript:void();" data-toggle="modal" data-target="#alertModal" class="delete"><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete Template"><span class="path1"></span><span class="path2"></span></i></a>
</div>
</td>
</tr>
<tr>
<td><span class="product-name">One Drive For Business Plan 1</span><span class="snx-sku">SNX SKU# 4006192</span></td>
<td></td>
<td><span class="permissionTxt"></span></td>
<td>Cancel</td>
<td class="text-right">4.40</td>
<td class="text-right">5.00</td>
<td class="text-right">5.00 <a href="javascript:void(0)"><i class="icon-cal" data-toggle="tooltip" data-placement="top" title="Price Adjustment"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span></i></a></td>
<td class="text-right">4.84</td>
<td>
<div class="table-action-link">
<a href="javascript:void();">
<div class="circle-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit Template"></i></div>
</a>
<a href="javascript:void();" data-toggle="modal" data-target="#alertModal" class="delete"><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete Template"><span class="path1"></span><span class="path2"></span></i></a>
</div>
</td>
</tr>
<tr>
<td><span class="product-name">One Drive For Business Plan 1</span><span class="snx-sku">SNX SKU# 4006192</span></td>
<td>1-10</td>
<td><span class="permissionTxt">Enable</span></td>
<td>Add-On</td>
<td class="text-right">4.40</td>
<td class="text-right">5.00</td>
<td class="text-right">5.00 <a href="javascript:void(0)"><i class="icon-cal" data-toggle="tooltip" data-placement="top" title="Price Adjustment"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span></i></a></td>
<td class="text-right">4.84</td>
<td>
<div class="table-action-link">
<a href="javascript:void();">
<div class="circle-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit Template"></i></div>
</a>
<a href="javascript:void();" data-toggle="modal" data-target="#alertModal" class="delete"><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete Template"><span class="path1"></span><span class="path2"></span></i></a>
</div>
</td>
</tr>
<tr>
<td><span class="product-name">One Drive For Business Plan 1</span><span class="snx-sku">SNX SKU# 4006192</span></td>
<td>1-100</td>
<td><span class="permissionTxt">Enable</span></td>
<td>Reactive</td>
<td class="text-right">4.40</td>
<td class="text-right">5.00</td>
<td class="text-right">5.00 <a href="javascript:void(0)"><i class="icon-cal" data-toggle="tooltip" data-placement="top" title="Price Adjustment"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span></i></a> </td>
<td class="text-right">4.84</td>
<td>
<div class="table-action-link">
<a href="javascript:void();">
<div class="circle-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit Template"></i></div>
</a>
<a href="javascript:void();" data-toggle="modal" data-target="#alertModal" class="delete"><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete Template"><span class="path1"></span><span class="path2"></span></i></a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<nav aria-label="navigation" class="pagination-col">
<span class="item-dropdown-col">
View
<div class="items-dropdown">
<i class="icon-arrow-bottom"></i>
<select>
<option>16</option>
</select>
</div>
<span class="view-text">Items Per Page</span>
</span>
<div class="pagination-holder m-auto">
</div>
<ul class="next-prev-page">
<li><a href="javascript:void(0);"><i class="icon-left-arrow-double mr-1"></i>First</a></li>
<li><a href="javascript:void(0);"><i class="icon-left-arrow mr-1"></i>Previous</a></li>
<li><span class="page-count">1 of 12</span></li>
<li><a href="javascript:void(0);">Next<i class="icon-right-arrow-b ml-1"></i></a></li>
<li class="last-page"><a href="javascript:void(0);">Last <i
class="icon-left-arrow-double pr-1"></i></a></li>
</ul>
</nav>
</div>
</div>
</div>
</td>
</tr>
<tr class="prod-row">
<td class="non-edit"><strong>Azure</strong></td>
<td class="editTd" style="display: none;">
<div class="search-input-col">
<i class="icon-cross" style="display: none;"></i>
<input type="text" class="form-control form-control-padding " value="Azure">
</div>
</td>
<td class="non-edit">All Customer</td>
<td class="editTd" colspan="2" style="display: none;">
<div class="search-input-col reseller-input temp-input" >
<div class="tooltip-flyout" style="display:none">
<i class="icon-action-arrow"></i>
<div class="tagsinput"><span class="tag"><span class="tag-text">445674, A ...</span><a href="javascript:void(0)"><i class="icon-cross"></i></a>
</span>
<span class="tag"><span class="tag-text">34, AX(go. ...</span><a href="javascript:void(0)"><i class="icon-cross"></i></a>
</span>
<span class="tag"><span class="tag-text">Azure (/ge...</span><a href="javascript:void(0)"><i class="icon-cross"></i></a>
</span>
<span class="tag"><span class="tag-text">37246, AZT..</span><a href="javascript:void(0)"><i class="icon-cross"></i></a>
</span>
<span class="tag"><span class="tag-text">World Expo...</span><a href="javascript:void(0)"><i class="icon-cross"></i></a>
</span>
</div>
</div>
<div class="admin-custom-dropdown">
<!-- <input type="text" class="form-control form-control-padding" placeholder="Enter or search reseller (You can select Multiple Resellers)"> -->
<div class="price-select" >
<div class="admin-tags"></div>
<div class="multiselect-listing" style="display: none;">
<a class="dropdown-item " href="javascript:void(0);">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck101" name="example91">
<label class="custom-control-label" for="customCheck101">All Customers</label>
</div>
</a>
<a class="dropdown-item " href="javascript:void(0);">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck102" name="example91">
<label class="custom-control-label" for="customCheck102">Allard0402 Shen21</label>
</div>
</a>
<a class="dropdown-item " href="javascript:void(0);">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck103" name="example91">
<label class="custom-control-label" for="customCheck103">Alfonso Capizzo</label>
</div>
</a>
<a class="dropdown-item " href="javascript:void(0);">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck104" name="example91">
<label class="custom-control-label" for="customCheck104">Allied Towing Service INC </label>
</div>
</a>
<a class="dropdown-item " href="javascript:void(0);">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck105" name="example91">
<label class="custom-control-label" for="customCheck105">AZ Custom Coatings (UPG)</label>
</div>
</a>
<a class="dropdown-item " href="javascript:void(0);">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck106" name="example91">
<label class="custom-control-label" for="customCheck106">Aurora Township (SOIL)</label>
</div>
</a>
<a class="dropdown-item " href="javascript:void(0);">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck10" name="example91">
<label class="custom-control-label" for="customCheck106">Acuity INC</label>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="tags-val-list" style="display: none;">
<div class="tagsinput"><span class="tag"><span class="tag-text">All Customers</span><a href="javascript:void(0)"><i class="icon-cross"></i></a>
</span>
<span class="tag"><span class="tag-text">Allard0402..</span><a href="javascript:void(0)"><i class="icon-cross"></i></a>
</span>
<span class="tag"><span class="tag-text">Alfonso Capo...</span><a href="javascript:void(0)"><i class="icon-cross"></i></a>
</span>
<span class="tag"><span class="tag-text">Allied ...</span><a href="javascript:void(0)"><i class="icon-cross"></i></a>
</span>
<span class="tag"><span class="tag-text">Graphics S...</span><a href="javascript:void(0)"><i class="icon-cross"></i></a>
</span>
<span class="tag"><span class="tag-text">Graphics S...</span><a href="javascript:void(0)"><i class="icon-cross"></i></a>
</span>
<span class="tag"><span class="tag-text">347246, A ...</span><a href="javascript:void(0)"><i class="icon-cross"></i></a>
</span>
<span class="tag"><span class="tag-text">34, AX(go. ...</span><a href="javascript:void(0)"><i class="icon-cross"></i></a>
</span>
<span class="tag"><span class="tag-text">Azure (/ge...</span><a href="javascript:void(0)"><i class="icon-cross"></i></a>
</span>
<span class="tag"><span class="tag-text">37246, AZT..</span><a href="javascript:void(0)"><i class="icon-cross"></i></a>
</span>
<span class="tag"><span class="tag-text">World Expo...</span><a href="javascript:void(0)"><i class="icon-cross"></i></a>
</span>
<span class="tag"><span class="tag-text">37246, AZT..</span><a href="javascript:void(0)"><i class="icon-cross"></i></a>
</span>
</div>
<div class="filter-more">
<span class="viewMoreFilter">View More <i class="icon-arrow-bottom"></i></span> <span class="viewLessFilter" style="display:none;">View Less <i class="icon-arrow-bottom"></i></span>
</div>
</div>
</td>
<td class="non-edit">11/25/2020</td>
<td >
<div class="table-action-link">
<a href="javascript:void(0)" class="editTd cross-circle cancelEditing" style="display: none;"><i class="icon-cross-circle" data-toggle="tooltip" data-placement="top" title="Cancel Editing"><span class="path1"></span><span class="path2"></span></i></a>
<a href="javascript:void(0)" class="editTd cross-circle saveRow" style="display: none;"><i class="icon-file-v1" data-toggle="tooltip" data-placement="top" title="Save"><span class="path1"></span><span class="path2"></span></i></a>
<a href="javascript:void(0);" class="non-edit"><i class="icon-subscriptions" data-toggle="tooltip" data-placement="top" title="Copy Template" ><span class="path1"></span><span class="path2"></span></i></a>
<a href="javascript:void();" class="non-edit editTemplate">
<div class="circle-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit Template"></i></div>
</a>
<a href="javascript:void();" class="non-edit"><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="Delete Template" ><span class="path1"></span><span class="path2"></span></i></a>
<a href="javascript:void()" class="non-edit row-expand-icon" data-toggle="tooltip" data-placement="top" title="Expand"><i class="icon-arrow-bottom"></i></a>
</div>
</td>
</tr>
<tr class="addOnRow addon-shadow" style="display: none;">
<td colspan="4" class="p-0 border-0">
<div class="total-customer-col">
<div class="cutomer-container">
<div class="table-search">
<h1>Product List</h1>
<div class="products-search">
<div class="search-input-col">
<i class="icon-search"></i>
<input type="text" class="form-control form-control-padding ui-autocomplete-input" placeholder="Search by product name/SKU#" autocomplete="off">
</div>
<button class="btn btn-outline ml-auto openRtFly" data-flyout="addProducts">Add Product</button>
<button class="btn btn-outline del" data-toggle="modal" data-target="#alertModal" data-delete="delProd" ><i class="icon-delete m-0"></i></button>
</div>
</div>
<div class="customers-box">
<div class="customer-tabel-col pt-0">
<table>
<thead>
<tr>
<th class="th-col-1">Product Name</th>
<th class="th-col-2 text-right">MSRP (USD)</th>
<th class="th-col-3 text-right">Unit Price (USD)</th>
<th class="th-col-4 text-center">Billing Type</th>
<th class="th-col-5 text-right">Actions</th>
</tr>
</thead>
<tbody tabindex="5" style="overflow-y: hidden; outline: none;">
<tr>
<td><span class="product-name">One Drive For Business Plan 1</span><span class="snx-sku">SNX SKU# 4006192</span></td>
<td class="text-right">6.00</td>
<td class="text-right">4.94</td>
<td class="text-center">Monthly</td>
<td>
<div class="table-action-link">
<a href="javascript:void();">
<div class="circle-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit Template"></i></div>
</a>
<a href="javascript:void();" data-toggle="modal" data-target="#alertModal" class="delete"><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete Template"><span class="path1"></span><span class="path2"></span></i></a>
</div>
</td>
</tr>
<tr>
<td><span class="product-name">One Drive For Business Plan 1</span><span class="snx-sku">SNX SKU# 4006192</span></td>
<td class="text-right">6.00</td>
<td class="text-right">4.94</td>
<td class="text-center">Monthly</td>
<td>
<div class="table-action-link">
<a href="javascript:void();">
<div class="circle-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit Template"></i></div>
</a>
<a href="javascript:void();" data-toggle="modal" data-target="#alertModal" class="delete"><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete Template"><span class="path1"></span><span class="path2"></span></i></a>
</div>
</td>
</tr>
<tr>
<td><span class="product-name">One Drive For Business Plan 1</span><span class="snx-sku">SNX SKU# 4006192</span></td>
<td class="text-right">12.00</td>
<td class="text-right">9.94</td>
<td class="text-center">Monthly</td>
<td>
<div class="table-action-link">
<a href="javascript:void();">
<div class="circle-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit Template"></i></div>
</a>
<a href="javascript:void();" data-toggle="modal" data-target="#alertModal" class="delete"><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete Template"><span class="path1"></span><span class="path2"></span></i></a>
</div>
</td>
</tr>
<tr>
<td><span class="product-name">One Drive For Business Plan 1</span><span class="snx-sku">SNX SKU# 4006192</span></td>
<td class="text-right">12.00</td>
<td class="text-right">9.94</td>
<td class="text-center">Monthly</td>
<td>
<div class="table-action-link">
<a href="javascript:void();">
<div class="circle-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit Template"></i></div>
</a>
<a href="javascript:void();" data-toggle="modal" data-target="#alertModal" class="delete"><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete Template"><span class="path1"></span><span class="path2"></span></i></a>
</div>
</td>
</tr>
<tr>
<td><span class="product-name">One Drive For Business Plan 1</span><span class="snx-sku">SNX SKU# 4006192</span></td>
<td class="text-right">18.00</td>
<td class="text-right">14.76</td>
<td class="text-center">Monthly</td>
<td>
<div class="table-action-link">
<a href="javascript:void();">
<div class="circle-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit Template"></i></div>
</a>
<a href="javascript:void();" data-toggle="modal" data-target="#alertModal" class="delete"><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete Template"><span class="path1"></span><span class="path2"></span></i></a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<nav aria-label="navigation" class="pagination-col">
<span class="item-dropdown-col">
View
<div class="items-dropdown">
<i class="icon-arrow-bottom"></i>
<select>
<option>16</option>
</select>
</div>
<span class="view-text">Items Per Page</span>
</span>
<div class="pagination-holder m-auto">
</div>
<ul class="next-prev-page">
<li><a href="javascript:void(0);"><i class="icon-left-arrow-double mr-1"></i>First</a></li>
<li><a href="javascript:void(0);"><i class="icon-left-arrow mr-1"></i>Previous</a></li>
<li><span class="page-count">1 of 12</span></li>
<li><a href="javascript:void(0);">Next<i class="icon-right-arrow-b ml-1"></i></a></li>
<li class="last-page"><a href="javascript:void(0);">Last <i
class="icon-left-arrow-double pr-1"></i></a></li>
</ul>
</nav>
</div>
</div>
</div>
</td>
</tr>
<tr class="prod-row">
<td><strong>Brandon S3521</strong></td>
<td>Brandon S3521</td>
<td>11/25/2020</td>
<td>
<div class="table-action-link">
<a href="javascript:void(0);"><i class="icon-subscriptions" data-toggle="tooltip" data-placement="top" title="Copy Template" ><span class="path1"></span><span class="path2"></span></i></a>
<a href="javascript:void();">
<div class="circle-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit Template"></i></div>
</a>
<a href="javascript:void();"><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="Delete Template" ><span class="path1"></span><span class="path2"></span></i></a>
<a href="javascript:void()" class="row-expand-icon" data-toggle="tooltip" data-placement="top" title="Expand"><i class="icon-arrow-bottom"></i></a>
</div>
</td>
</tr>
<tr class="prod-row">
<td><strong>Brandon 3421</strong></td>
<td>Brandon 3421</td>
<td>11/25/2020</td>
<td>
<div class="table-action-link">
<a href="javascript:void(0);"><i class="icon-subscriptions" data-toggle="tooltip" data-placement="top" title="Copy Template" ><span class="path1"></span><span class="path2"></span></i></a>
<a href="javascript:void();">
<div class="circle-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit Template"></i></div>
</a>
<a href="javascript:void();"><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="Delete Template" ><span class="path1"></span><span class="path2"></span></i></a>
<a href="javascript:void()" class="row-expand-icon" data-toggle="tooltip" data-placement="top" title="Expand"><i class="icon-arrow-bottom"></i></a>
</div>
</td>
</tr>
<tr class="prod-row">
<td><strong>Staffing</strong></td>
<td>24 Hour Staffing LLC... <a href="javascript:void(0);">2 more</a></td>
<td>11/25/2020</td>
<td>
<div class="table-action-link">
<a href="javascript:void(0);"><i class="icon-subscriptions" data-toggle="tooltip" data-placement="top" title="Copy Template" ><span class="path1"></span><span class="path2"></span></i></a>
<a href="javascript:void();">
<div class="circle-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit Template"></i></div>
</a>
<a href="javascript:void();"><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="Delete Template" ><span class="path1"></span><span class="path2"></span></i></a>
<a href="javascript:void()" class="row-expand-icon" data-toggle="tooltip" data-placement="top" title="Expand"><i class="icon-arrow-bottom"></i></a>
</div>
</td>
</tr>
<tr class="prod-row">
<td><strong>Resturant</strong></td>
<td>
1610 Resturant LLC...
<div class="link-text-more moreMainDiv">
<a href="javascript:void(0);" class="openMoreFly">5 more</a>
<div class="text-more-flyout" style="display: none;">
<i class="icon-dropdown-arrow"></i>
<a href="javascript:void()"><i class="icon-cross"></i></a>
<ul class="pl-0">
<li>81 Properties LLC</li>
<li>1440 OPCO LLC</li>
<li>1710 Plate Associates</li>
<li>Brandon S3521</li>
<li>Brandon S3421</li>
</ul>
</div>
</div>
</td>
<td>11/25/2020</td>
<td>
<div class="table-action-link">
<a href="javascript:void(0);"><i class="icon-subscriptions" data-toggle="tooltip" data-placement="top" title="Copy Template" ><span class="path1"></span><span class="path2"></span></i></a>
<a href="javascript:void();">
<div class="circle-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit Template"></i></div>
</a>
<a href="javascript:void();"><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="Delete Template" ><span class="path1"></span><span class="path2"></span></i></a>
<a href="javascript:void()" class="row-expand-icon" data-toggle="tooltip" data-placement="top" title="Expand"><i class="icon-arrow-bottom"></i></a>
</div>
</td>
</tr>
<tr class="prod-row">
<td><strong>Corporation</strong></td>
<td>2461 Corporation... <a href="javascript:void(0);">1 more</a></td>
<td>11/25/2020</td>
<td>
<div class="table-action-link">
<a href="javascript:void(0);"><i class="icon-subscriptions" data-toggle="tooltip" data-placement="top" title="Copy Template" ><span class="path1"></span><span class="path2"></span></i></a>
<a href="javascript:void();">
<div class="circle-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit Template"></i></div>
</a>
<a href="javascript:void();"><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="Delete Template" ><span class="path1"></span><span class="path2"></span></i></a>
<a href="javascript:void()" class="row-expand-icon" data-toggle="tooltip" data-placement="top" title="Expand"><i class="icon-arrow-bottom"></i></a>
</div>
</td>
</tr>
<tr class="prod-row">
<td><strong>OPCO LLC</strong></td>
<td>1440 OPCO LLC</td>
<td>11/25/2020</td>
<td>
<div class="table-action-link">
<a href="javascript:void(0);"><i class="icon-subscriptions" data-toggle="tooltip" data-placement="top" title="Copy Template" ><span class="path1"></span><span class="path2"></span></i></a>
<a href="javascript:void();">
<div class="circle-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit Template"></i></div>
</a>
<a href="javascript:void();"><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="Delete Template" ><span class="path1"></span><span class="path2"></span></i></a>
<a href="javascript:void()" class="row-expand-icon" data-toggle="tooltip" data-placement="top" title="Expand"><i class="icon-arrow-bottom"></i></a>
</div>
</td>
</tr>
<tr class="prod-row">
<td><strong>Properties</strong></td>
<td>81 Properties LLC</td>
<td>11/25/2020</td>
<td>
<div class="table-action-link">
<a href="javascript:void(0);"><i class="icon-subscriptions" data-toggle="tooltip" data-placement="top" title="Copy Template" ><span class="path1"></span><span class="path2"></span></i></a>
<a href="javascript:void();">
<div class="circle-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit Template"></i></div>
</a>
<a href="javascript:void();"><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="Delete Template" ><span class="path1"></span><span class="path2"></span></i></a>
<a href="javascript:void()" class="row-expand-icon" data-toggle="tooltip" data-placement="top" title="Expand"><i class="icon-arrow-bottom"></i></a>
</div>
</td>
</tr>
<tr class="prod-row">
<td><strong>Plate Associates</strong></td>
<td>1710 Plate Associates</td>
<td>11/25/2020</td>
<td>
<div class="table-action-link">
<a href="javascript:void(0);"><i class="icon-subscriptions" data-toggle="tooltip" data-placement="top" title="Copy Template" ><span class="path1"></span><span class="path2"></span></i></a>
<a href="javascript:void();">
<div class="circle-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit Template"></i></div>
</a>
<a href="javascript:void();"><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="Delete Template" ><span class="path1"></span><span class="path2"></span></i></a>
<a href="javascript:void()" class="row-expand-icon" data-toggle="tooltip" data-placement="top" title="Expand"><i class="icon-arrow-bottom"></i></a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<nav aria-label="navigation" class="pagination-col pt-2">
<span class="item-dropdown-col">
View
<div class="items-dropdown">
<i class="icon-arrow-bottom"></i>
<select>
<option>10</option>
<option>15</option>
<option>20</option>
</select>
</div>
<span class="view-text">Items Per Page</span>
</span>
<ul class="table-count-list m-auto">
<li class="left-arrow"><a href="javascript:void(0);"><i class="icon-arrow-right"></i></a></li>
<li class="active"><a href="javascript:void(0);"><span>1</span></a></li>
<li><a href="#page-2" class=""> <span>2</span></a></li>
<li class="right-arrow"><a href="javascript:void(0);"><i class="icon-arrow-right"></i></a></li>
</ul>
<ul class="next-prev-page">
<li><a href="javascript:void(0);"><i class="icon-left-arrow-double mr-1"></i>First</a></li>
<li><a href="javascript:void(0);"><i class="icon-left-arrow mr-1"></i>Previous</a></li>
<li><span class="page-count">1 of 12</span></li>
<li><a href="javascript:void(0);">Next<i class="icon-right-arrow-b ml-1"></i></a></li>
<li class="last-page"><a href="javascript:void(0);">Last <i class="icon-left-arrow-double pr-1"></i></a></li>
</ul>
</nav>
</div>
</div>
</div>
<!--Catalog Management Templates-->