<?php require_once "head.php";?>

<?php require_once "header.php";?>

<main class="layout bg-gray-15">
    <div class="ss-section">
        <div class="ss-section-inner ss-um with-padding">
            <div class="ss-um-head">
                <div class="ss-um-container">
                    <div class="ss-bp-head">
                        <div class="ss-bp-head-left d-flex align-items-center">
                            <h1 class="h1">Audiences</h1>
                            <div class="ss-dropdown dropdown js-single-select-withicon ms-5">
                                <a href="javascript:;" role="button" class="ss-dropdown-toggle-inline theme-b" data-bs-offset="0,8" data-bs-toggle="dropdown" aria-expanded="false">
                                    <span class="ss-badge-icon sm bg-danger">Ma</span>
                                    <span class="ss-dropdown-toggle-txt">Marketing Team</span>
                                    <i class="ss-icon-chevron-down"><svg><use xlink:href="#ss-icon-chevron-down"></use></svg></i>
                                </a>
                                <div class="dropdown-menu dropdown-menu-start">
                                    <ul class="search-overflow-scroll">
                                        <li>
                                            <a href="javascript:;" class="dropdown-item ss-dpitem-badge active">
                                                <span class="ss-badge-icon sm bg-danger">Ma</span>
                                                <span class="dropdown-item-text">Marketing Team</span>
                                                <i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:;" class="dropdown-item ss-dpitem-badge">
                                                <span class="ss-badge-icon sm bg-secondary">Le</span>
                                                <span class="dropdown-item-text">Leadership Group</span>
                                                <i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:;" class="dropdown-item ss-dpitem-badge">
                                                <span class="ss-badge-icon sm bg-yellow">De</span>
                                                <span class="dropdown-item-text">Design team</span>
                                                <i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:;" class="dropdown-item ss-dpitem-badge">
                                                <span class="ss-badge-icon sm bg-dark">HR</span>
                                                <span class="dropdown-item-text">HR team</span>
                                                <i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="ss-bp-head-right">
                            <a class="btn btn-primary" href="#ss-aud-cal-modal" data-bs-toggle="modal">Create List</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ss-um-body">
                <div class="ss-um-container">
                    <div class="ss-bp-body">
                        <ul class="nav ss-um-nav">
                            <li class="nav-item" role="presentation">
                                <a href="audience-standard-list.php" class="nav-link text-uppercase active">Standard Lists</a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a href="audience-target-list.php" class="nav-link text-uppercase">Target Lists</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <!-- Start [ Audience standard list Tab ] -->
                            <div class="tab-pane fade show active">

                                <div class="ss-aud-body">
                                    <ul class="ss-breadcrumb p2 mb-5">
                                        <li>
                                            <a href="audience-standard-list.php">All Lists</a>
                                        </li>
                                        <li>
                                            <i class="ss-icon-chevron-right"><svg><use xlink:href="#ss-icon-chevron-right"></use></svg></i>
                                        </li>
                                        <li>
                                            <span>Manage List</span>
                                        </li>
                                    </ul>
                                    <label class="form-label text-uppercase">Current List</label>
                                    <div class="ss-aud-mng-h">
                                        <div class="ss-aud-mng-h-l">
                                            <div class="form-group">
                                                <span class="form-control-wrapper">
                                                    <select name="ati_target_list" class="form-control" data-placeholder="Please Select">
                                                        <!-- don't rmeove below blank option because it's for show placeholder -->
                                                        <option label="placeholder"></option>
                                                        <option value="1" selected>Sales Team</option>
                                                        <option value="2">Marketing Team</option>
                                                        <option value="3">Internal Team</option>
                                                        <option value="3">HR Team</option>
                                                    </select>
                                                </span>
                                            </div>
                                            <span class="ss-tag m-0 dark">
                                                <span class="ss-tag-txt">Standard List</span>
                                            </span>
                                        </div>
                                        <div class="ss-aud-mng-h-r">
                                            <span class="d-block p2 me-4">7 Contacts</span>
                                            <a class="ss-badge-icon light" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-original-title="Add to Contact List" aria-label="Add to Contact List">
                                                <i class="ss-icon-user-plus-fill"><svg><use xlink:href="#ss-icon-user-plus-fill"></use></svg></i>
                                            </a>
                                        </div>
                                    </div>
                                    <hr class="ss-aud-mng-sep">
                                    <div class="ss-aud-mng-grid">
                                        <div class="ss-aud-mng-l">
                                            <a class="ss-aud-mng-link active">Active Contacts</a>
                                            <a class="ss-aud-mng-link">Archived</a>
                                            <a class="ss-aud-mng-link">Bounced</a>
                                        </div>
                                        <div class="ss-aud-mng-r">
                                            <table class="ss-table mb-5 highlight-onhover">
                                                <thead>
                                                    <tr>
                                                        <th style="width: 40px;">&nbsp;</th>
                                                        <th>EMAIL / PHONE NUMBER</th>
                                                        <th>First Name</th>
                                                        <th>Last Name</th>
                                                        <th>Group</th>
                                                        <th class="text-end">&nbsp;</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td style="width: 40px;">
                                                            <label class="ss-checkradio primary">
                                                                <input type="checkbox" value="" name="aud_standard_list[]">
                                                                <span class="ss-checkradio-ui">
                                                                    <i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i>
                                                                </span>
                                                            </label>
                                                        </td>
                                                        <td class="text-nowrap"><i class="ss-icon-envelope"><svg><use xlink:href="#ss-icon-envelope"></use></svg></i>eve@example.com</td>
                                                        <td>Eve</td>
                                                        <td>Doe</td>
                                                        <td>Peer</td>
                                                        <td class="text-end">
                                                            <div class="ss-dropdown dropdown ms-3">
                                                                <button type="button" class="btn-icon" data-bs-offset="0,8" data-bs-toggle="dropdown" aria-expanded="false">
                                                                    <i class="ss-icon-ellipsis-v"><svg><use xlink:href="#ss-icon-ellipsis-v"></use></svg></i>
                                                                </button>
                                                                <ul class="dropdown-menu dropdown-menu-end">
                                                                    <li>
                                                                        <a href="javascript:;" class="dropdown-item ss-dpitem-icon">
                                                                            <span class="dropdown-item-text">Edit Contact</span>
                                                                            <i class="ss-icon-chevron-right"><svg><use xlink:href="#ss-icon-chevron-right"></use></svg></i>
                                                                        </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;" class="dropdown-item ss-dpitem-icon">
                                                                            <span class="dropdown-item-text">Move to List</span>
                                                                            <i class="ss-icon-chevron-right"><svg><use xlink:href="#ss-icon-chevron-right"></use></svg></i>
                                                                        </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;" class="dropdown-item ss-dpitem-icon">
                                                                            <span class="dropdown-item-text">Archive</span>
                                                                            <i class="ss-icon-chevron-right"><svg><use xlink:href="#ss-icon-chevron-right"></use></svg></i>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td style="width: 40px;">
                                                            <label class="ss-checkradio primary">
                                                                <input type="checkbox" value="" name="aud_standard_list[]">
                                                                <span class="ss-checkradio-ui">
                                                                    <i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i>
                                                                </span>
                                                            </label>
                                                        </td>
                                                        <td class="text-nowrap"><i class="ss-icon-mobile"><svg><use xlink:href="#ss-icon-mobile"></use></svg></i>+43 123 456 7890</td>
                                                        <td>Eve</td>
                                                        <td>Doe</td>
                                                        <td>Peer</td>
                                                        <td class="text-end">
                                                            <div class="ss-dropdown dropdown ms-3">
                                                                <button type="button" class="btn-icon" data-bs-offset="0,8" data-bs-toggle="dropdown" aria-expanded="false">
                                                                    <i class="ss-icon-ellipsis-v"><svg><use xlink:href="#ss-icon-ellipsis-v"></use></svg></i>
                                                                </button>
                                                                <ul class="dropdown-menu dropdown-menu-end">
                                                                    <li>
                                                                        <a href="javascript:;" class="dropdown-item ss-dpitem-icon">
                                                                            <span class="dropdown-item-text">Edit Contact</span>
                                                                            <i class="ss-icon-chevron-right"><svg><use xlink:href="#ss-icon-chevron-right"></use></svg></i>
                                                                        </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;" class="dropdown-item ss-dpitem-icon">
                                                                            <span class="dropdown-item-text">Move to List</span>
                                                                            <i class="ss-icon-chevron-right"><svg><use xlink:href="#ss-icon-chevron-right"></use></svg></i>
                                                                        </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;" class="dropdown-item ss-dpitem-icon">
                                                                            <span class="dropdown-item-text">Archive</span>
                                                                            <i class="ss-icon-chevron-right"><svg><use xlink:href="#ss-icon-chevron-right"></use></svg></i>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td style="width: 40px;">
                                                            <label class="ss-checkradio primary">
                                                                <input type="checkbox" value="" name="aud_standard_list[]">
                                                                <span class="ss-checkradio-ui">
                                                                    <i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i>
                                                                </span>
                                                            </label>
                                                        </td>
                                                        <td class="text-nowrap"><i class="ss-icon-envelope"><svg><use xlink:href="#ss-icon-envelope"></use></svg></i>eve@example.com</td>
                                                        <td>Eve</td>
                                                        <td>Doe</td>
                                                        <td>Peer</td>
                                                        <td class="text-end">
                                                            <div class="ss-dropdown dropdown ms-3">
                                                                <button type="button" class="btn-icon" data-bs-offset="0,8" data-bs-toggle="dropdown" aria-expanded="false">
                                                                    <i class="ss-icon-ellipsis-v"><svg><use xlink:href="#ss-icon-ellipsis-v"></use></svg></i>
                                                                </button>
                                                                <ul class="dropdown-menu dropdown-menu-end">
                                                                    <li>
                                                                        <a href="javascript:;" class="dropdown-item ss-dpitem-icon">
                                                                            <span class="dropdown-item-text">Edit Contact</span>
                                                                            <i class="ss-icon-chevron-right"><svg><use xlink:href="#ss-icon-chevron-right"></use></svg></i>
                                                                        </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;" class="dropdown-item ss-dpitem-icon">
                                                                            <span class="dropdown-item-text">Move to List</span>
                                                                            <i class="ss-icon-chevron-right"><svg><use xlink:href="#ss-icon-chevron-right"></use></svg></i>
                                                                        </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;" class="dropdown-item ss-dpitem-icon">
                                                                            <span class="dropdown-item-text">Archive</span>
                                                                            <i class="ss-icon-chevron-right"><svg><use xlink:href="#ss-icon-chevron-right"></use></svg></i>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td style="width: 40px;">
                                                            <label class="ss-checkradio primary">
                                                                <input type="checkbox" value="" name="aud_standard_list[]">
                                                                <span class="ss-checkradio-ui">
                                                                    <i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i>
                                                                </span>
                                                            </label>
                                                        </td>
                                                        <td class="text-nowrap"><i class="ss-icon-mobile"><svg><use xlink:href="#ss-icon-mobile"></use></svg></i>+43 123 456 7890</td>
                                                        <td>Eve</td>
                                                        <td>Doe</td>
                                                        <td>Peer</td>
                                                        <td class="text-end">
                                                            <div class="ss-dropdown dropdown ms-3">
                                                                <button type="button" class="btn-icon" data-bs-offset="0,8" data-bs-toggle="dropdown" aria-expanded="false">
                                                                    <i class="ss-icon-ellipsis-v"><svg><use xlink:href="#ss-icon-ellipsis-v"></use></svg></i>
                                                                </button>
                                                                <ul class="dropdown-menu dropdown-menu-end">
                                                                    <li>
                                                                        <a href="javascript:;" class="dropdown-item ss-dpitem-icon">
                                                                            <span class="dropdown-item-text">Edit Contact</span>
                                                                            <i class="ss-icon-chevron-right"><svg><use xlink:href="#ss-icon-chevron-right"></use></svg></i>
                                                                        </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;" class="dropdown-item ss-dpitem-icon">
                                                                            <span class="dropdown-item-text">Move to List</span>
                                                                            <i class="ss-icon-chevron-right"><svg><use xlink:href="#ss-icon-chevron-right"></use></svg></i>
                                                                        </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;" class="dropdown-item ss-dpitem-icon">
                                                                            <span class="dropdown-item-text">Archive</span>
                                                                            <i class="ss-icon-chevron-right"><svg><use xlink:href="#ss-icon-chevron-right"></use></svg></i>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td style="width: 40px;">
                                                            <label class="ss-checkradio primary">
                                                                <input type="checkbox" value="" name="aud_standard_list[]">
                                                                <span class="ss-checkradio-ui">
                                                                    <i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i>
                                                                </span>
                                                            </label>
                                                        </td>
                                                        <td class="text-nowrap"><i class="ss-icon-envelope"><svg><use xlink:href="#ss-icon-envelope"></use></svg></i>eve@example.com</td>
                                                        <td>Eve</td>
                                                        <td>Doe</td>
                                                        <td>Peer</td>
                                                        <td class="text-end">
                                                            <div class="ss-dropdown dropdown ms-3">
                                                                <button type="button" class="btn-icon" data-bs-offset="0,8" data-bs-toggle="dropdown" aria-expanded="false">
                                                                    <i class="ss-icon-ellipsis-v"><svg><use xlink:href="#ss-icon-ellipsis-v"></use></svg></i>
                                                                </button>
                                                                <ul class="dropdown-menu dropdown-menu-end">
                                                                    <li>
                                                                        <a href="javascript:;" class="dropdown-item ss-dpitem-icon">
                                                                            <span class="dropdown-item-text">Edit Contact</span>
                                                                            <i class="ss-icon-chevron-right"><svg><use xlink:href="#ss-icon-chevron-right"></use></svg></i>
                                                                        </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;" class="dropdown-item ss-dpitem-icon">
                                                                            <span class="dropdown-item-text">Move to List</span>
                                                                            <i class="ss-icon-chevron-right"><svg><use xlink:href="#ss-icon-chevron-right"></use></svg></i>
                                                                        </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;" class="dropdown-item ss-dpitem-icon">
                                                                            <span class="dropdown-item-text">Archive</span>
                                                                            <i class="ss-icon-chevron-right"><svg><use xlink:href="#ss-icon-chevron-right"></use></svg></i>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                                <!-- Start [ no data block:: remove class "d-none" If there is no data to show  ] -->
                                <div class="ss-aud-nodata d-none">
                                    <div class="ss-cc-block text-center">
                                        <h2 class="h2">You have no Standard Lists yet</h2>
                                        <div class="ss-cc-desc p1">
                                            <p>To create your first standard list, simply click the “Create List” button and select the type of list you want to create. </p>
                                        </div>
                                        <div class="ss-cc-btns justify-content-center">
                                            <a class="btn btn-primary with-icon">
                                                <i class="ss-icon-plus"><svg><use xlink:href="#ss-icon-plus"></use></svg></i>
                                                <span>Create List</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <!-- Start [ no data block ] -->

                            </div>
                            <!-- End   [ Audience standard list Tab ] -->
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<?php require_once "modal-create-audience-list.php";?>
<?php require_once "modal-add-target-info.php";?>
<?php require_once "modal-add-organization-info.php";?>
<?php require_once "modal-add-contact-tolist.php";?>
<?php require_once "modal-upload-file.php";?>
<?php require_once "modal-send-list-request.php";?>
<?php require_once "modal-add-contact-tolist-manual-target-list.php";?>
<?php require_once "modal-add-contact-tolist-manual-standard-list.php";?>
<?php require_once "modal-edit-contact.php";?>

<?php require_once "footer.php";?>
