<?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">
                            <ul class="ss-breadcrumb p2">
                                <li>
                                    <a href="#">Settings</a>
                                </li>
                                <li>
                                    <i class="ss-icon-chevron-right"><svg><use xlink:href="#ss-icon-chevron-right"></use></svg></i>
                                </li>
                                <li>
                                    <span>User Management</span>
                                </li>
                            </ul>
                            <h1 class="h1">User Management</h1>
                        </div>
                        <div class="ss-bp-head-right">
                            <a class="btn btn-primary" href="#ss-invite-users-modal" data-bs-toggle="modal">Invite Users</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="user-management-user.php" class="nav-link active">Users</a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a href="user-management-groups.php" class="nav-link">Groups</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <!-- Start [ User Tab ] -->
                            <div class="tab-pane fade show active">
                                <div class="ss-bp-filter-row">
                                    <div class="ss-bp-filter-left">
                                        <div class="form-group mb-0">
                                            <span class="form-control-wrapper with-icon-left">
                                                <input type="search" value="" name="project-search" class="form-control" placeholder="Search Users">
                                                <i class="ss-icon-search"><svg><use xlink:href="#ss-icon-search"></use></svg></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="ss-bp-filter-right">
                                        <div class="ss-dropdown dropdown js-single-select">
                                            <a href="javascript:;" role="button" class="ss-dropdown-toggle-inline fw-normal" data-bs-offset="0,8" data-bs-toggle="dropdown" aria-expanded="false">
                                                <span>Group:&nbsp;</span>
                                                <span class="ss-dropdown-toggle-txt">All</span>
                                                <i class="ss-icon-chevron-down"><svg><use xlink:href="#ss-icon-chevron-down"></use></svg></i>
                                            </a>
                                            <ul class="dropdown-menu dropdown-menu-end">
                                                <li>
                                                    <a href="javascript:;" class="dropdown-item active">
                                                        <span class="dropdown-item-text">All</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;" class="dropdown-item">
                                                        <span class="dropdown-item-text">Marketing</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;" class="dropdown-item">
                                                        <span class="dropdown-item-text">Engineering</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;" class="dropdown-item">
                                                        <span class="dropdown-item-text">HR</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="ss-dropdown dropdown js-single-select">
                                            <a href="javascript:;" role="button" class="ss-dropdown-toggle-inline fw-normal" data-bs-offset="0,8" data-bs-toggle="dropdown" aria-expanded="false">
                                                <span>Status:&nbsp;</span>
                                                <span class="ss-dropdown-toggle-txt">Invited</span>
                                                <i class="ss-icon-chevron-down"><svg><use xlink:href="#ss-icon-chevron-down"></use></svg></i>
                                            </a>
                                            <ul class="dropdown-menu dropdown-menu-end">
                                                <li>
                                                    <a href="javascript:;" class="dropdown-item active">
                                                        <span class="dropdown-item-text">Invited</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;" class="dropdown-item">
                                                        <span class="dropdown-item-text">Requested</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;" class="dropdown-item">
                                                        <span class="dropdown-item-text">Accepted</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="ss-dropdown dropdown js-single-select">
                                            <a href="javascript:;" role="button" class="ss-dropdown-toggle-inline fw-normal" data-bs-offset="0,8" data-bs-toggle="dropdown" aria-expanded="false">
                                                <span>NAME:&nbsp;</span>
                                                <span class="ss-dropdown-toggle-txt">A to Z</span>
                                                <i class="ss-icon-chevron-down"><svg><use xlink:href="#ss-icon-chevron-down"></use></svg></i>
                                            </a>
                                            <ul class="dropdown-menu dropdown-menu-end">
                                                <li>
                                                    <a href="javascript:;" class="dropdown-item active">
                                                        <span class="dropdown-item-text">A to Z</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;" class="dropdown-item">
                                                        <span class="dropdown-item-text">Z to A</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="ss-um-grid">
                                    <div class="ss-um-col">
                                        <a class="ss-um-box invite">
                                            <i class="ss-icon-plus"><svg><use xlink:href="#ss-icon-plus"></use></svg></i>
                                            <span>Invite Users</span>
                                        </a>
                                    </div>
                                    <div class="ss-um-col">
                                        <div class="ss-um-box">
                                            <div class="ss-dropdown dropdown position-absolute top-1 left-1">
                                                <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-start">
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item">
                                                            <span class="dropdown-item-text">Edit</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item">
                                                            <span class="dropdown-item-text">Resend</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item">
                                                            <span class="dropdown-item-text">Get Survey Password</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item">
                                                            <span class="dropdown-item-text text-danger">Remove</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="ss-um-box-top">
                                                <span class="ss-um-avtar">
                                                    <!-- <strong>Ab</strong> -->
                                                    <!-- <i class="ss-icon-user-fill"><svg><use xlink:href="#ss-icon-user-fill"></use></svg></i> -->
                                                    <span class="lazy-loader">
                                                        <span class="lazyload" data-original="images/avtar-80x80.png"></span>
                                                    </span>
                                                    <span class="ss-favorite-badge"><i class="ss-icon-star"><svg><use xlink:href="#ss-icon-star"></use></svg></i></span>
                                                </span>
                                                <strong class="ss-um-username">Jillian Clark</strong>
                                                <span class="ss-um-useremail">jillclark4321@email.com</span>
                                                <div class="ss-um-designations">
                                                    <span class="ss-um-userdesig">ORGANIZATION ADMIN</span>
                                                </div>
                                            </div>
                                            <div class="ss-um-box-bottom">
                                                <div class="ss-um-data">
                                                    <div class="ss-um-data-col">
                                                        <strong>13</strong>
                                                        <span>Projects</span>
                                                    </div>
                                                    <div class="ss-um-data-col">
                                                        <strong>3</strong>
                                                        <span>Groups</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ss-um-col">
                                        <div class="ss-um-box">
                                            <div class="ss-dropdown dropdown position-absolute top-1 left-1">
                                                <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-start">
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item">
                                                            <span class="dropdown-item-text">Edit</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item">
                                                            <span class="dropdown-item-text">Resend</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item">
                                                            <span class="dropdown-item-text">Get Survey Password</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item">
                                                            <span class="dropdown-item-text text-danger">Remove</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="ss-um-box-top">
                                                <span class="ss-um-avtar">
                                                    <!-- <strong>Ab</strong> -->
                                                    <!-- <i class="ss-icon-user-fill"><svg><use xlink:href="#ss-icon-user-fill"></use></svg></i> -->
                                                    <span class="lazy-loader">
                                                        <span class="lazyload" data-original="images/avtar-80x80.png"></span>
                                                    </span>
                                                    <span class="ss-favorite-badge"><i class="ss-icon-star"><svg><use xlink:href="#ss-icon-star"></use></svg></i></span>
                                                </span>
                                                <strong class="ss-um-username">Jillian Clark</strong>
                                                <span class="ss-um-useremail">jillclark4321@email.com</span>
                                                <div class="ss-um-designations">
                                                    <span class="ss-um-userdesig">ORGANIZATION ADMIN</span>
                                                </div>
                                            </div>
                                            <div class="ss-um-box-bottom">
                                                <div class="ss-um-data">
                                                    <div class="ss-um-data-col">
                                                        <strong>13</strong>
                                                        <span>Projects</span>
                                                    </div>
                                                    <div class="ss-um-data-col">
                                                        <strong>3</strong>
                                                        <span>Groups</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ss-um-col">
                                        <div class="ss-um-box">
                                            <div class="ss-dropdown dropdown position-absolute top-1 left-1">
                                                <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-start">
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item">
                                                            <span class="dropdown-item-text">Edit</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item">
                                                            <span class="dropdown-item-text">Resend</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item">
                                                            <span class="dropdown-item-text">Get Survey Password</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item">
                                                            <span class="dropdown-item-text text-danger">Remove</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="ss-um-box-top">
                                                <span class="ss-um-avtar">
                                                    <!-- <strong>Ab</strong> -->
                                                    <!-- <i class="ss-icon-user-fill"><svg><use xlink:href="#ss-icon-user-fill"></use></svg></i> -->
                                                    <span class="lazy-loader">
                                                        <span class="lazyload" data-original="images/avtar-80x80.png"></span>
                                                    </span>
                                                    <span class="ss-favorite-badge"><i class="ss-icon-star"><svg><use xlink:href="#ss-icon-star"></use></svg></i></span>
                                                </span>
                                                <strong class="ss-um-username">Jillian Clark</strong>
                                                <span class="ss-um-useremail">jillclark4321@email.com</span>
                                                <div class="ss-um-designations">
                                                    <span class="ss-um-userdesig">ORGANIZATION ADMIN</span>
                                                </div>
                                            </div>
                                            <div class="ss-um-box-bottom">
                                                <div class="ss-um-data">
                                                    <div class="ss-um-data-col">
                                                        <strong>13</strong>
                                                        <span>Projects</span>
                                                    </div>
                                                    <div class="ss-um-data-col">
                                                        <strong>3</strong>
                                                        <span>Groups</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ss-um-col">
                                        <div class="ss-um-box">
                                            <div class="ss-dropdown dropdown position-absolute top-1 left-1">
                                                <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-start">
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item">
                                                            <span class="dropdown-item-text">Edit</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item">
                                                            <span class="dropdown-item-text">Resend</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item">
                                                            <span class="dropdown-item-text">Get Survey Password</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item">
                                                            <span class="dropdown-item-text text-danger">Remove</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="ss-um-box-top">
                                                <span class="ss-um-avtar">
                                                    <strong>Ab</strong>
                                                    <!-- <i class="ss-icon-user-fill"><svg><use xlink:href="#ss-icon-user-fill"></use></svg></i> -->
                                                    <!-- <span class="lazy-loader">
                                                        <span class="lazyload" data-original="images/avtar-80x80.png"></span>
                                                    </span>
                                                    <span class="ss-favorite-badge"><i class="ss-icon-star"><svg><use xlink:href="#ss-icon-star"></use></svg></i></span> -->
                                                </span>
                                                <strong class="ss-um-username">Jillian Clark</strong>
                                                <span class="ss-um-useremail">jillclark4321@email.com</span>
                                                <!-- <div class="ss-um-designations">
                                                    <span class="ss-um-userdesig">ORGANIZATION ADMIN</span>
                                                </div> -->
                                            </div>
                                            <div class="ss-um-box-bottom">
                                                <div class="ss-um-data">
                                                    <div class="ss-um-data-col">
                                                        <strong>13</strong>
                                                        <span>Projects</span>
                                                    </div>
                                                    <div class="ss-um-data-col">
                                                        <strong>0</strong>
                                                        <span>Groups</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ss-um-col">
                                        <div class="ss-um-box dashed">
                                            <div class="ss-dropdown dropdown position-absolute top-1 left-1">
                                                <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-start">
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item">
                                                            <span class="dropdown-item-text">Edit</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item">
                                                            <span class="dropdown-item-text">Resend</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item">
                                                            <span class="dropdown-item-text">Get Survey Password</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item">
                                                            <span class="dropdown-item-text text-danger">Remove</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <span class="ss-badge bg-yellow-100 m-0">
                                                <span class="ss-badge-txt text-yellow text-uppercase">Invited</span>
                                            </span>
                                            <div class="ss-um-box-top">
                                                <span class="ss-um-avtar">
                                                    <!-- <strong>Ab</strong> -->
                                                    <i class="ss-icon-user-fill"><svg><use xlink:href="#ss-icon-user-fill"></use></svg></i>
                                                    <!-- <span class="lazy-loader">
                                                        <span class="lazyload" data-original="images/avtar-80x80.png"></span>
                                                    </span>
                                                    <span class="ss-favorite-badge"><i class="ss-icon-star"><svg><use xlink:href="#ss-icon-star"></use></svg></i></span> -->
                                                </span>
                                                <strong class="ss-um-username">Jillian Clark</strong>
                                                <span class="ss-um-useremail">jillclark4321@email.com</span>
                                                <!-- <div class="ss-um-designations">
                                                    <span class="ss-um-userdesig">ORGANIZATION ADMIN</span>
                                                </div> -->
                                            </div>
                                            <div class="ss-um-box-bottom">
                                                <a href="#" class="btn btn-light btn-block">Resend Invite</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ss-um-col">
                                        <div class="ss-um-box dashed"> 
                                            <div class="ss-dropdown dropdown position-absolute top-1 left-1">
                                                <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-start">
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item">
                                                            <span class="dropdown-item-text">Edit</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item">
                                                            <span class="dropdown-item-text">Resend</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item">
                                                            <span class="dropdown-item-text">Get Survey Password</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item">
                                                            <span class="dropdown-item-text text-danger">Remove</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>                                           
                                            <span class="ss-badge bg-secondary-200 m-0">
                                                <span class="ss-badge-txt text-secondary text-uppercase">Request to Join</span>
                                            </span>
                                            <div class="ss-um-box-top">
                                                <span class="ss-um-avtar">
                                                    <!-- <strong>Ab</strong> -->
                                                    <i class="ss-icon-user-fill"><svg><use xlink:href="#ss-icon-user-fill"></use></svg></i>
                                                    <!-- <span class="lazy-loader">
                                                        <span class="lazyload" data-original="images/avtar-80x80.png"></span>
                                                    </span>
                                                    <span class="ss-favorite-badge"><i class="ss-icon-star"><svg><use xlink:href="#ss-icon-star"></use></svg></i></span> -->
                                                </span>
                                                <strong class="ss-um-username">Jillian Clark</strong>
                                                <span class="ss-um-useremail">jillclark4321@email.com</span>
                                                <!-- <div class="ss-um-designations">
                                                    <span class="ss-um-userdesig">ORGANIZATION ADMIN</span>
                                                </div> -->
                                            </div>
                                            <div class="ss-um-box-bottom">
                                                <a href="#" class="btn btn-light btn-block">Resend Invite</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ss-um-col">
                                        <div class="ss-um-box">
                                            <div class="ss-dropdown dropdown position-absolute top-1 left-1">
                                                <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-start">
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item">
                                                            <span class="dropdown-item-text">Edit</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item">
                                                            <span class="dropdown-item-text">Resend</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item">
                                                            <span class="dropdown-item-text">Get Survey Password</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item">
                                                            <span class="dropdown-item-text text-danger">Remove</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="ss-um-box-top">
                                                <span class="ss-um-avtar">
                                                    <!-- <strong>Ab</strong> -->
                                                    <!-- <i class="ss-icon-user-fill"><svg><use xlink:href="#ss-icon-user-fill"></use></svg></i> -->
                                                    <span class="lazy-loader">
                                                        <span class="lazyload" data-original="images/avtar-80x80.png"></span>
                                                    </span>
                                                    <span class="ss-favorite-badge"><i class="ss-icon-star"><svg><use xlink:href="#ss-icon-star"></use></svg></i></span>
                                                </span>
                                                <strong class="ss-um-username">Jillian Clark</strong>
                                                <span class="ss-um-useremail">jillclark4321@email.com</span>
                                                <div class="ss-um-designations">
                                                    <span class="ss-um-userdesig">ORGANIZATION ADMIN</span>
                                                </div>
                                            </div>
                                            <div class="ss-um-box-bottom">
                                                <div class="ss-um-data">
                                                    <div class="ss-um-data-col">
                                                        <strong>13</strong>
                                                        <span>Projects</span>
                                                    </div>
                                                    <div class="ss-um-data-col">
                                                        <strong>3</strong>
                                                        <span>Groups</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End   [ User Tab ] -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<?php require_once "modal-invite-users.php";?>

<?php require_once "footer.php";?>
