<section class="section">
    <div class="w-layout-blockcontainer body-container w-container">
        <div class="page-header">
            <div class="w-layout-grid grid-2">
                <div class="page-header-left">
                    <div class="breadcrumbs">
                        <div class="breadcrumb">Audience</div>
                        <div class="breadcrumb-divider">/</div>
                        <a href="#" class="breadcrumb">Manage Contacts</a>
                    </div>
                    <div class="tab-heading-container-for-button">
                        <div>
                            <h1>Contacts<br></h1>
                            <div class="subheading">Add and Manage Contacts</div>
                        </div>
                        <div class="flex">

                            <!-- START Import Contacts button - launches import wizard modals -->

                            <a href="#" class="button secondary w-inline-block">
                                <div>Import Contacts</div>
                            </a>

                            <!-- END Import Contacts button -->

                            <!-- START Add Contact button - launches create Contact modal -->

                            <a href="#" class="button w-inline-block">
                                <div>Add Contact</div>
                            </a>

                            <!-- END Add Contact Button -->

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-area">
            <form id="contacts" name="contacts" method="get">
                <div class="table-outline">
                    <div class="table-scroll-container">
                        <table class="table">
                            <thead class="table-head">
                                <tr class="table-header-row">
                                    <th class="table-checkbox-column">
                                        <label class="w-checkbox table-checkbox-field">
                                            <div class="w-checkbox-input w-checkbox-input--inputType-custom table-checkbox"></div>
                                            <input type="checkbox" name="" data-name="" style="opacity:0;position:absolute;z-index:-1">
                                        </label>
                                    </th>
                                    <th>
                                        <div class="table-cell-content">
                                            <div class="table-heading">Name</div>
                                            <div class="table-sort-button w-embed"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
                                                <defs>
                                                    <style>.cls-1{fill:none;}</style>
                                                </defs>
                                                <polygon points="16 28 9 21 10.41 19.59 16 25.17 21.59 19.59 23 21 16 28">
                                                    <polygon points="16 4 23 11 21.59 12.41 16 6.83 10.41 12.41 9 11 16 4">
                                                        <rect id="Transparent_Rectangle" data-name="Transparent Rectangle" class="cls-1"></rect>
                                                    </polygon></polygon></svg></div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="table-cell-content">
                                            <div class="table-heading">Email</div>
                                            <div class="table-sort-button w-embed"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
                                                <defs>
                                                    <style>.cls-1{fill:none;}</style>
                                                </defs>
                                                <title>chevron--sort</title>
                                                <polygon points="16 28 9 21 10.41 19.59 16 25.17 21.59 19.59 23 21 16 28">
                                                    <polygon points="16 4 23 11 21.59 12.41 16 6.83 10.41 12.41 9 11 16 4">
                                                        <rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1"></rect>
                                                    </polygon></polygon></svg></div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="table-cell-content">
                                            <div class="table-heading">PulseChecks</div>
                                            <div class="table-sort-button w-embed"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
                                                <defs>
                                                    <style>.cls-1{fill:none;}</style>
                                                </defs>
                                                <title>chevron--sort</title>
                                                <polygon points="16 28 9 21 10.41 19.59 16 25.17 21.59 19.59 23 21 16 28">
                                                    <polygon points="16 4 23 11 21.59 12.41 16 6.83 10.41 12.41 9 11 16 4">
                                                        <rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1"></rect>
                                                    </polygon></polygon></svg></div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="table-cell-content">
                                            <div class="table-heading">Tags</div>
                                            <div class="table-sort-button w-embed"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
                                                <defs>
                                                    <style>.cls-1{fill:none;}</style>
                                                </defs>
                                                <title>chevron--sort</title>
                                                <polygon points="16 28 9 21 10.41 19.59 16 25.17 21.59 19.59 23 21 16 28">
                                                    <polygon points="16 4 23 11 21.59 12.41 16 6.83 10.41 12.41 9 11 16 4">
                                                        <rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1"></rect>
                                                    </polygon></polygon></svg></div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="table-cell-content">
                                            <div class="table-heading">Status</div>
                                            <div class="table-sort-button w-embed"><svg version="1.1" fill="currentColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewbox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
                                                <style type="text/css">	.st0{fill:none;}</style>
                                                <polygon points="16,28 9,21 10.4,19.6 16,25.2 21.6,19.6 23,21 ">
                                                    <rect id="Transparent_Rectangle" class="st0" width="32" height="32"></rect>
                                                </polygon></svg></div>
                                        </div>
                                    </th>
                                    <th class="action-column">
                                        <div class="table-header-icon-container">

                                            <!-- START Filter Button - opens Filter modal and filters table data base on tag filters -->

                                            <a href="#" class="table-header-button w-inline-block">
                                                <div class="table-button-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
                                                    <line x1="12" y1="5" x2="12" y2="19"></line>
                                                    <line x1="5" y1="12" x2="19" y2="12"></line>
                                                    </svg></div>
                                            </a>

                                            <!-- END Filter Button -->

                                            <!-- START Remove Filter Button - show only if table is filtered by tag(s) -->

                                            <a href="#" class="table-header-button w-inline-block">
                                                <div class="table-button-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
                                                    <line x1="12" y1="5" x2="12" y2="19"></line>
                                                    <line x1="5" y1="12" x2="19" y2="12"></line>
                                                    </svg></div>
                                            </a>

                                            <!-- END Remove Filter Button -->

                                            <!-- START Add Contact Button -->
                                            <a href="#" class="table-header-button w-inline-block">
                                                <div class="table-button-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
                                                    <line x1="12" y1="5" x2="12" y2="19"></line>
                                                    <line x1="5" y1="12" x2="19" y2="12"></line>
                                                    </svg></div>
                                            </a>
                                            <!-- END Add Contact Button -->


                                            <div data-delay="0" data-hover="false" class="table-menu-container w-dropdown">
                                                <div class="table-menu-button w-dropdown-toggle">
                                                    <div class="table-header-button">
                                                        <div class="table-button-icon w-embed"><svg version="1.1" fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewbox="0 0 32 32">
                                                            <circle cx="16" cy="8" r="2"></circle>
                                                            <circle cx="16" cy="16" r="2"></circle>
                                                            <circle cx="16" cy="24" r="2"></circle>
                                                            </svg></div>
                                                    </div>
                                                </div>
                                                <nav class="table-menu w-dropdown-list">

                                                    <!-- END Add to PulseCheck option - opens "Assign to PulseCheck" modal (not the one called "Add to PulseCheck")-->

                                                    <a href="#" class="table-menu-item w-inline-block">
                                                        <div class="table-menu-item-icon w-embed">
                                                            <svg fill="currentColor" width="32" height="32" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                                                                <path d="M432,272a48.09,48.09,0,0,0-45.25,32H347.53l-28.35-85.06a16,16,0,0,0-30.56.66L244.11,375.36l-52.33-314a16,16,0,0,0-31.3-1.25L99.51,304H48a16,16,0,0,0,0,32h64a16,16,0,0,0,15.52-12.12l45.34-181.37,51.36,308.12A16,16,0,0,0,239.1,464c.3,0,.6,0,.91,0a16,16,0,0,0,15.37-11.6l49.8-174.28,15.64,46.94A16,16,0,0,0,336,336h50.75A48,48,0,1,0,432,272Z"></path>
                                                            </svg>
                                                        </div>
                                                        <div>Add to PulseCheck</div>
                                                    </a>

                                                    <!-- END Add to PulseCheck option -->

                                                    <!-- START Add Tag option - opens add tag modal to add a tag to selected contacts -->

                                                    <a href="#" class="table-menu-item w-inline-block">
                                                        <div class="table-menu-item-icon w-embed">
                                                            <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
                                                                <path d="M10,14a4,4,0,1,1,4-4A4.0045,4.0045,0,0,1,10,14Zm0-6a2,2,0,1,0,1.998,2.0044A2.002,2.002,0,0,0,10,8Z" transform="translate(0 0)"></path>
                                                                <path d="M16.6436,29.4145,2.5858,15.3555A2,2,0,0,1,2,13.9414V4A2,2,0,0,1,4,2h9.9413a2,2,0,0,1,1.4142.5858L29.4144,16.6436a2.0005,2.0005,0,0,1,0,2.8285l-9.9424,9.9425a2.0008,2.0008,0,0,1-2.8285,0ZM4,4v9.9417L18.0578,28,28,18.0579,13.9416,4Z" transform="translate(0 0)"></path>
                                                            </svg>
                                                        </div>
                                                        <div>Add Tag</div>
                                                    </a>

                                                    <!-- END Add Tag option -->

                                                    <!-- START Delete Selected Option - if 1 user open Remove Contact, elseif > 1 open Remove Contacts modal to remove a tag to selected contacts -->

                                                    <a href="#" class="table-menu-item w-inline-block">
                                                        <div class="table-menu-item-icon w-embed">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2">
                                                                <polyline points="3 6 5 6 21 6"></polyline>
                                                                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                                                                <line x1="10" y1="11" x2="10" y2="17"></line>
                                                                <line x1="14" y1="11" x2="14" y2="17"></line>
                                                            </svg>
                                                        </div>
                                                        <div class="table-menu-item-text">Delete Selected</div>
                                                    </a>

                                                    <!-- END Delete Selected Option -->

                                                    <div class="divider"></div>

                                                    <!-- START Import CSV Option - launces import wizard modal -->
                                                    <a href="#" class="table-menu-item w-inline-block">
                                                        <div class="table-menu-item-icon w-embed">
                                                            <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
                                                                <polygon points="6 18 7.41 19.41 15 11.83 15 30 17 30 17 11.83 24.59 19.41 26 18 16 8 6 18">
                                                                    <path d="M6,8V4H26V8h2V4a2,2,0,0,0-2-2H6A2,2,0,0,0,4,4V8Z"></path>
                                                                </polygon></svg>
                                                        </div>
                                                        <div>Import CSV</div>
                                                    </a>

                                                    <!-- END Import CSV Option -->

                                                    <!-- START Export to CSV option - downloads a CSV to their device -->
                                                    <a href="#" class="table-menu-item w-inline-block">
                                                        <div class="table-menu-item-icon w-embed"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
                                                            <polygon points="5 18 5 20 10.586 20 3 27.586 4.414 29 12 21.414 12 27 14 27 14 18 5 18">
                                                                <path d="M27,3H5A2,2,0,0,0,3,5V15H5V11H15v4h2V11H27v7H17v2H27v7H17v2H27a2,2,0,0,0,2-2V5A2,2,0,0,0,27,3Zm0,6H5V5H27Z"></path>
                                                            </polygon></svg></div>
                                                        <div>Export CSV</div>
                                                    </a>
                                                    <!-- END Export to CSV option -->
                                                </nav>
                                            </div>
                                        </div>
                                    </th>
                                </tr>
                                <tr class="table-filter-row">
                                    <th class="table-checkbox-column"> </th>
                                    <th>
                                        <div class="table-filter-cell-content">
                                            <input class="input-filter w-input" maxlength="256" name="filter-name" placeholder="Filter" type="text" id="filter-name">
                                        </div>
                                    </th>
                                    <th>
                                        <div class="table-filter-cell-content">
                                            <input class="input-filter w-input" maxlength="256" name="filter-email" placeholder="Filter" type="text" id="filter-email">
                                        </div>
                                    </th>
                                    <th>
                                        <div class="table-filter-cell-content">
                                            <div data-hover="false" data-delay="0" class="dropdown w-dropdown">
                                                <div class="dropdown-closed table-filter w-dropdown-toggle">
                                                    <div class="filter-dropdown-arrow w-icon-dropdown-toggle"></div>
                                                    <div class="dropdown-text-content">All PulseChecks</div>
                                                </div>
                                                <nav class="dropdown-open w-dropdown-list">
                                                    <div class="dropdown-option-container">
                                                        <a href="#" class="dropdown-option-simple w-inline-block">
                                                            <div class="dropdown-option-selected-icon-container">
                                                                <div class="dropdown-option-selected-icon selected w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
                                                                    <polyline points="20 6 9 17 4 12"></polyline>
                                                                    </svg></div>
                                                            </div>
                                                            <div class="dropdown-option-text">All PulseChecks</div>
                                                        </a>

                                                        <!-- START PulseChecks - repeat for each pulsecheck -->

                                                        <a href="#" class="dropdown-option-simple w-inline-block">
                                                            <div class="dropdown-option-selected-icon-container">
                                                                <div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
                                                                    <polyline points="20 6 9 17 4 12"></polyline>
                                                                    </svg></div>
                                                            </div>
                                                            <div class="dropdown-option-text">{PulseCheck Name}</div>
                                                        </a>

                                                        <!-- END PulseChecks -->

                                                    </div>
                                                </nav>
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="table-filter-cell-content">
                                            <div data-hover="false" data-delay="0" class="dropdown w-dropdown">
                                                <div class="dropdown-closed table-filter w-dropdown-toggle">
                                                    <div class="filter-dropdown-arrow w-icon-dropdown-toggle"></div>
                                                    <div class="dropdown-text-content">All Tags</div>
                                                </div>
                                                <nav class="dropdown-open w-dropdown-list">
                                                    <div class="dropdown-option-container">
                                                        <a href="#" class="dropdown-option-simple w-inline-block">
                                                            <div class="dropdown-option-selected-icon-container">
                                                                <div class="dropdown-option-selected-icon selected w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
                                                                    <polyline points="20 6 9 17 4 12"></polyline>
                                                                    </svg></div>
                                                            </div>
                                                            <div class="dropdown-option-text">All Tags</div>
                                                        </a>

                                                        <!-- START Tags - repeat for each tag (note this only filters if a contact has a tag, not by a value) -->
                                                        <a href="#" class="dropdown-option-simple w-inline-block">
                                                            <div class="dropdown-option-selected-icon-container">
                                                                <div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
                                                                    <polyline points="20 6 9 17 4 12"></polyline>
                                                                    </svg></div>
                                                            </div>
                                                            <div class="dropdown-option-text">{Tag Name}</div>
                                                        </a>

                                                        <!-- END Tags -->

                                                    </div>
                                                </nav>
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="table-filter-cell-content">
                                            <div data-hover="false" data-delay="0" class="dropdown w-dropdown">
                                                <div class="dropdown-closed table-filter w-dropdown-toggle">
                                                    <div class="filter-dropdown-arrow w-icon-dropdown-toggle"></div>
                                                    <div class="dropdown-text-content">All Statuses</div>
                                                </div>
                                                <nav class="dropdown-open right w-dropdown-list">
                                                    <div class="dropdown-option-container">
                                                        <a href="#" class="dropdown-option-simple w-inline-block">
                                                            <div class="dropdown-option-selected-icon-container">
                                                                <div class="dropdown-option-selected-icon selected w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
                                                                    <polyline points="20 6 9 17 4 12"></polyline>
                                                                    </svg></div>
                                                            </div>
                                                            <div class="dropdown-option-text">All Statuses</div>
                                                        </a>
                                                        <a href="#" class="dropdown-option-simple w-inline-block">
                                                            <div class="dropdown-option-selected-icon-container">
                                                                <div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
                                                                    <polyline points="20 6 9 17 4 12"></polyline>
                                                                    </svg></div>
                                                            </div>
                                                            <div class="dropdown-option-text">Active</div>
                                                        </a>
                                                        <a href="#" class="dropdown-option-simple w-inline-block">
                                                            <div class="dropdown-option-selected-icon-container">
                                                                <div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
                                                                    <polyline points="20 6 9 17 4 12"></polyline>
                                                                    </svg></div>
                                                            </div>
                                                            <div class="dropdown-option-text">Unsubscribed</div>
                                                        </a>
                                                    </div>
                                                </nav>
                                            </div>
                                        </div>
                                    </th>
                                    <th class="action-column"> </th>
                                </tr>
                            </thead>
                            <tbody class="table-body">

                                <!-- START Contact - repeat for each contact -->

                                <tr class="table-row {if last row in table, add the class .last-row}">
                                    <td class="table-checkbox-column"><label class="w-checkbox table-checkbox-field">
                                        <div class="w-checkbox-input w-checkbox-input--inputType-custom table-checkbox"></div>
                                        <input type="checkbox" name="" data-name="" style="opacity:0;position:absolute;z-index:-1">
                                        </label>
                                    </td>
                                    <td class="table-cell">
                                        <div class="table-cell-content">
                                            <div class="table-data">{First Name} {Last Name}</div>
                                        </div>
                                    </td>
                                    <td class="table-cell">
                                        <div class="table-cell-content">
                                            <div class="table-data">{Email Address}</div>
                                        </div>
                                    </td>
                                    <td class="table-cell">
                                        <div class="table-cell-content">
                                            <div class="table-data">
                                                <a href="#" data-tippy-content="&lt;p&gt;&lt;strong&gt;PulseChecks&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;
                                                                                <!-- START PulseChecks Repeat for each PulseCheck contact is subscribed to -->
                                                                                - {PulseCheck Name}&lt;br&gt;
                                                                                - Client Happiness&lt;br&gt;
                                                                                - Employee <!-- no br on the last one -->
                                                                                <!-- END PulseChecks -->
                                                                                &lt;/p&gt;">1</a>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="table-cell">
                                        <div class="table-cell-content">
                                            <div class="table-cell-left">
                                                <div class="table-data">
                                                    <a href="#" data-tippy-content="&lt;p&gt;&lt;strong&gt;Tags&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;
                                                                                    <!-- START Tags Repeat for each Tag contact has -->
                                                                                    - {tag}: {value}&lt;br&gt;
                                                                                    - Company: ABC Corp&lt;br&gt;
                                                                                    - Department: Accounting <!-- no br on the last one -->

                                                                                    <!-- END Tags -->

                                                                                    &lt;/p&gt;">2</a>
                                                </div>
                                            </div>
                                            <div class="table-cell-right"> </div>
                                        </div>
                                    </td>
                                    <td class="table-cell">
                                        <div class="table-cell-content">
                                            <div class="table-cell-left">
                                                <div class="table-data success">Active</div>
                                            </div>
                                            <div class="table-cell-right"> </div>
                                        </div>
                                    </td>
                                    <td class="action-column">
                                        <div class="table-row-action-button-container">
                                            <div data-tippy-content="Contact Details" class="table-row-action-button">

                                                <!-- Start Contact Details Button - opens Contact details screen -->

                                                <a href="#" class="table-row-action-button-icon w-embed">
                                                    <svg width="32" height="32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
                                                        <polygon points="4 20 4 22 8.586 22 2 28.586 3.414 30 10 23.414 10 28 12 28 12 20 4 20">
                                                            <rect x="24.0001" y="21" width="2" height="5"></rect>
                                                            <rect x="20.0001" y="16" width="2" height="10"></rect>
                                                            <rect x="16" y="18" width="2" height="8"></rect>
                                                            <path d="M28,2H4A2.002,2.002,0,0,0,2,4V16H4V13H28.001l.001,15H16v2H28a2.0027,2.0027,0,0,0,2-2V4A2.0023,2.0023,0,0,0,28,2ZM12,11H4V4h8Zm2,0V4H28l.0007,7Z"></path>
                                                        </polygon></svg>
                                                </a>

                                                <!-- END Contact Details Button -->

                                            </div>

                                            <div data-tippy-content="Delete" class="table-row-action-button">

                                                <!-- START Delete Contact button - opens Remove Contact modal -->

                                                <a href="#" class="table-row-action-button-icon delete w-embed">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
                                                </a>

                                                <!-- END Delete Contact button -->

                                            </div>
                                        </div>
                                    </td>
                                </tr>

                                <!-- END Contact -->


                            </tbody>
                        </table>
                    </div>
                    <div class="table-pagination">
                        <div class="pagination-left">
                            <div class="items-per-page-container">
                                <div>Items per page:</div>
                                <div data-hover="false" data-delay="0" class="dropdown w-dropdown">
                                    <div class="dropdown-closed table-filter w-dropdown-toggle">
                                        <div class="filter-dropdown-arrow w-icon-dropdown-toggle"></div>
                                        <div class="dropdown-text-content">10</div>
                                    </div>
                                    <nav class="dropdown-open top-left w-dropdown-list">
                                        <div class="dropdown-option-container">
                                            <a href="#" class="dropdown-option-simple w-inline-block">
                                                <div class="dropdown-option-selected-icon-container">
                                                    <div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
                                                        <polyline points="20 6 9 17 4 12"></polyline>
                                                        </svg></div>
                                                </div>
                                                <div class="dropdown-option-text">10</div>
                                            </a>
                                            <a href="#" class="dropdown-option-simple w-inline-block">
                                                <div class="dropdown-option-selected-icon-container">
                                                    <div class="dropdown-option-selected-icon selected w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
                                                        <polyline points="20 6 9 17 4 12"></polyline>
                                                        </svg></div>
                                                </div>
                                                <div class="dropdown-option-text">25</div>
                                            </a>
                                            <a href="#" class="dropdown-option-simple w-inline-block">
                                                <div class="dropdown-option-selected-icon-container">
                                                    <div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
                                                        <polyline points="20 6 9 17 4 12"></polyline>
                                                        </svg></div>
                                                </div>
                                                <div class="dropdown-option-text">50</div>
                                            </a>
                                            <a href="#" class="dropdown-option-simple w-inline-block">
                                                <div class="dropdown-option-selected-icon-container">
                                                    <div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
                                                        <polyline points="20 6 9 17 4 12"></polyline>
                                                        </svg></div>
                                                </div>
                                                <div class="dropdown-option-text">100</div>
                                            </a>
                                        </div>
                                    </nav>
                                </div>
                            </div>
                            <div class="paginaton-total-items">
                                <div>1–10 of 103 items<br></div>
                            </div>
                        </div>
                        <div class="pagination-right">
                            <div class="pagination-pages-dropdown">
                                <div data-hover="false" data-delay="0" class="dropdown w-dropdown">
                                    <div class="dropdown-closed table-filter w-dropdown-toggle">
                                        <div class="filter-dropdown-arrow w-icon-dropdown-toggle"></div>
                                        <div class="dropdown-text-content">#</div>
                                    </div>
                                    <nav class="dropdown-open w-dropdown-list">
                                        <div class="dropdown-option-container">
                                            <a href="#" class="dropdown-option-simple w-inline-block">
                                                <div class="dropdown-option-selected-icon-container">
                                                    <div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
                                                        <polyline points="20 6 9 17 4 12"></polyline>
                                                        </svg></div>
                                                </div>
                                                <div class="dropdown-option-text">1</div>
                                            </a>
                                            <a href="#" class="dropdown-option-simple w-inline-block">
                                                <div class="dropdown-option-selected-icon-container">
                                                    <div class="dropdown-option-selected-icon selected w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
                                                        <polyline points="20 6 9 17 4 12"></polyline>
                                                        </svg></div>
                                                </div>
                                                <div class="dropdown-option-text">2</div>
                                            </a>
                                            <a href="#" class="dropdown-option-simple w-inline-block">
                                                <div class="dropdown-option-selected-icon-container">
                                                    <div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
                                                        <polyline points="20 6 9 17 4 12"></polyline>
                                                        </svg></div>
                                                </div>
                                                <div class="dropdown-option-text">3</div>
                                            </a>
                                            <a href="#" class="dropdown-option-simple w-inline-block">
                                                <div class="dropdown-option-selected-icon-container">
                                                    <div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
                                                        <polyline points="20 6 9 17 4 12"></polyline>
                                                        </svg></div>
                                                </div>
                                                <div class="dropdown-option-text">3</div>
                                            </a>
                                        </div>
                                    </nav>
                                </div>
                                <div>of 11 pages</div>
                            </div>
                            <div class="pagination-button">
                                <div class="pagination-icon w-embed"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32" xml:space="preserve">
                                    <polygon points="20,24 10,16 20,8 ">
                                    </polygon></svg></div>
                            </div>
                            <div class="pagination-button">
                                <div class="pagination-icon w-embed"><svg version="1.1" fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewbox="0 0 32 32" xml:space="preserve">
                                    <polygon points="12,8 22,16 12,24 ">
                                    </polygon></svg></div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="page-footer">
            <div id="poweredBy" class="powered-by">
                <p class="paragraph">Powered by <a href="https://www.userfirstdigital.com">User First</a>
                </p>
            </div>
            <div class="legal-links">
                <a href="#">Privacy</a>
                <a href="#">Terms of Use</a>
            </div>
        </div>
    </div>
</section>