<div class="row storefront-rightbar company-contracts contracts">
  <div class="col-md-12">
     <h1 class="profile-heading my-4">Company Contacts</h1>
     <div class="row align-items-center">
        <div class="col-md-6 input-group align-items-center customer-search">
           <div class="search-w-dropdown selectedTab">
              <i class="icon-search"></i>
              <div class="input-group-prepend">
                 <button type="button" class="btn btn-outline-secondary dropdown-toggle cust-dropdown" data-toggle="dropdown" aria-expanded="false">
                 <span class="btn-txt">Contact Name</span> <i class="icon-arrow-bottom ml-2"></i>
                 </button>
                 <div class="dropdown-menu" style="">
                    <a class="dropdown-item" href="#">Contact Name</a>
                    <a class="dropdown-item" href="#">Zip Code</a>
                    <a class="dropdown-item" href="#">Email Address</a>
                 </div>
              </div>
              <span class="border-mid-sep">|</span>
              <input type="text" class="form-control cust-input-search" placeholder="Search">
           </div>
        </div>
     </div>
     <div class="row">
        <div class="col-md-12">
           <div class="contracts-table-col mt-3">
              <div class="list-view-tile summary-tab-table contTbl">
                 <table class="table custom-table endCustTbl">
                    <thead class="thead-light">
                       <tr>
                          <th scope="col" width="15%">Contact Name/ID </th>
                          <th scope="col" width="12%">Title</th>
                          <th scope="col" width="12%">Phone Number</th>
                          <th scope="col" width="22%">Address</th>
                          <th scope="col" width="8%">Email Address </th>
                          <th scope="col" width="31%">Actions</th>
                       </tr>
                    </thead>
                    <tbody tabindex="5" style="overflow-y: hidden; outline: none;">
                       <tr>
                          <td><span class="contactName">David Parker</span><br>62881</td>
                          <td>Owner</td>
                          <td>864-289-4114</td>
                          <td>3797 Spinnaker Court, Fremont, California, 92538</td>
                          <td>davidp@synnex.com</td>
                          <td>
                             <div class="sync-to-contact">
                                <div data-toggle="tooltip" data-placement="top" title="Synchronize reseller’s contact, address information to existing contracts."><a href="javascript:void(0);" class="sync-to"  data-toggle="modal" data-target="#synccontractModal"><i class="icon-sync"></i> Sync to Contract</a> </div>
                                <div class="set-default-btn primary-contact">
                                   <span class="toggle-btn">
                                   <label class="switch "><input type="checkbox"  checked class="openModalOnToggle"  ><span class="slider round"></span></label>
                                   </span><span class="set-default-lbl">Primary Contact</span>
                                </div>
                             </div>
                          </td>
                       </tr>
                       <tr>
                          <td><span class="contactName">Jeff Maclean 1</span><br>70814</td>
                          <td>SE</td>
                          <td>888-688-7558</td>
                          <td>3797 Spinnaker Court, Fremont, California, 92538</td>
                          <td>jeffm@synnex.com</td>
                          <td>
                             <div class="sync-to-contact">
                                <div data-toggle="tooltip" data-placement="top" title="Synchronize reseller’s contact, address information to existing contracts."><a href="javascript:void(0);" class="sync-to"  data-toggle="modal" data-target="#synccontractModal"><i class="icon-sync"></i> Sync to Contract</a> </div>
                                <div class="set-default-btn primary-contact">
                                   <span class="toggle-btn">
                                   <label class="switch "><input type="checkbox"    class="openModalOnToggle"><span class="slider round"></span></label>
                                   </span><span class="set-default-lbl">Primary Contact</span>
                                </div>
                             </div>
                          </td>
                       </tr>
                       <tr>
                          <td><span class="contactName">Kirk Samuels</span><br>84699</td>
                          <td>Information Analyst</td>
                          <td>416-240-2888</td>
                          <td>3797 Spinnaker Court, Fremont, California, 92538</td>
                          <td>kirks@synnex.com</td>
                          <td>
                             <div class="sync-to-contact">
                                <div data-toggle="tooltip" data-placement="top" title="Synchronize reseller’s contact, address information to existing contracts."><a href="javascript:void(0);" class="sync-to"  data-toggle="modal" data-target="#synccontractModal"><i class="icon-sync"></i> Sync to Contract</a> </div>
                                <div class="set-default-btn primary-contact">
                                   <span class="toggle-btn">
                                   <label class="switch "><input type="checkbox"   class="openModalOnToggle"><span class="slider round"></span></label>
                                   </span><span class="set-default-lbl">Primary Contact</span>
                                </div>
                             </div>
                          </td>
                       </tr>
                       <tr>
                          <td><span class="contactName">EC Services</span><br>90021</td>
                          <td>Support</td>
                          <td>456-123-3789</td>
                          <td>3797 Spinnaker Court, Fremont, California, 92538</td>
                          <td>ecsupport@synnex.com</td>
                          <td>
                             <div class="sync-to-contact">
                                <div data-toggle="tooltip" data-placement="top" title="Synchronize reseller’s contact, address information to existing contracts."><a href="javascript:void(0);" class="sync-to"  data-toggle="modal" data-target="#synccontractModal"><i class="icon-sync"></i> Sync to Contract</a> </div>
                                <div class="set-default-btn primary-contact">
                                   <span class="toggle-btn">
                                   <label class="switch "><input type="checkbox"    class="openModalOnToggle"><span class="slider round"></span></label>
                                   </span><span class="set-default-lbl">Primary Contact</span>
                                </div>
                             </div>
                          </td>
                       </tr>
                       <tr>
                          <td><span class="contactName">Tang Zhihong</span><br>94629</td>
                          <td>Support</td>
                          <td>123-456-3789</td>
                          <td>3797 Spinnaker Court, Fremont, California, 92538</td>
                          <td>zhihongt@synnex.com</td>
                          <td>
                             <div class="sync-to-contact">
                                <div data-toggle="tooltip" data-placement="top" title="Synchronize reseller’s contact, address information to existing contracts."><a href="javascript:void(0);" class="sync-to"  data-toggle="modal" data-target="#synccontractModal"><i class="icon-sync"></i> Sync to Contract</a> </div>
                                <div class="set-default-btn primary-contact">
                                   <span class="toggle-btn">
                                   <label class="switch "><input type="checkbox"    class="openModalOnToggle"><span class="slider round"></span></label>
                                   </span><span class="set-default-lbl">Primary Contact</span>
                                </div>
                             </div>
                          </td>
                       </tr>
                       <tr>
                          <td><span class="contactName">Stephanie</span><br>98245</td>
                          <td>TL Marketing</td>
                          <td>343-456-4513</td>
                          <td>3797 Spinnaker Court, Fremont, California, 92538</td>
                          <td>stephanie_pawlyshyn@tripplite.com</td>
                          <td>
                             <div class="sync-to-contact">
                                <div data-toggle="tooltip" data-placement="top" title="Synchronize reseller’s contact, address information to existing contracts."><a href="javascript:void(0);" class="sync-to"  data-toggle="modal" data-target="#synccontractModal"><i class="icon-sync"></i> Sync to Contract</a> </div>
                                <div class="set-default-btn primary-contact">
                                   <span class="toggle-btn">
                                   <label class="switch "><input type="checkbox"  class="openModalOnToggle"  ><span class="slider round"></span></label>
                                   </span><span class="set-default-lbl">Primary Contact</span>
                                </div>
                             </div>
                          </td>
                       </tr>
                       <tr>
                          <td><span class="contactName">Mary Alice Rau</span><br>107808</td>
                          <td>Corporate Trainer</td>
                          <td>864-289-4114</td>
                          <td>3797 Spinnaker Court, Fremont, California, 92538</td>
                          <td>maryal@synnex.com</td>
                          <td>
                             <div class="sync-to-contact">
                                <div data-toggle="tooltip" data-placement="top" title="Synchronize reseller’s contact, address information to existing contracts."><a href="javascript:void(0);" class="sync-to"  data-toggle="modal" data-target="#synccontractModal"><i class="icon-sync"></i> Sync to Contract</a> </div>
                                <div class="set-default-btn primary-contact">
                                   <span class="toggle-btn">
                                   <label class="switch "><input type="checkbox"    class="openModalOnToggle"><span class="slider round"></span></label>
                                   </span><span class="set-default-lbl">Primary Contact</span>
                                </div>
                             </div>
                          </td>
                       </tr>
                       <tr>
                          <td><span class="contactName">David Zhang</span><br>119766</td>
                          <td>Engineer</td>
                          <td>864-349-4260</td>
                          <td>3797 Spinnaker Court, Fremont, California, 92538</td>
                          <td>ecittest@synnex.com</td>
                          <td>
                             <div class="sync-to-contact">
                                <div data-toggle="tooltip" data-placement="top" title="Synchronize reseller’s contact, address information to existing contracts."><a href="javascript:void(0);" class="sync-to"  data-toggle="modal" data-target="#synccontractModal"><i class="icon-sync"></i> Sync to Contract</a> </div>
                                <div class="set-default-btn primary-contact">
                                   <span class="toggle-btn">
                                   <label class="switch "><input type="checkbox"    class="openModalOnToggle"><span class="slider round"></span></label>
                                   </span><span class="set-default-lbl">Primary Contact</span>
                                </div>
                             </div>
                          </td>
                       </tr>
                    </tbody>
                 </table>
                 <nav aria-label="navigation" class="pagination-col pt-2 selectedTab invoices subs" style="">
                    <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>
     </div>
  </div>
</div>