<?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-new-group-modal" data-bs-toggle="modal">Create Group</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">Users</a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a href="user-management-groups.php" class="nav-link active">Groups</a>
                            </li>
                        </ul>
                        <div class="tab-content">

                            <!-- Start [ Group 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>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 groups-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>Create Group</span>
                                        </a>
                                    </div>
                                    <div class="ss-um-col">
                                        <div class="ss-um-box">
                                            <div class="ss-um-box-top">
                                                <div class="ss-um-g-head">
                                                    <div class="ss-um-g-head-l">
                                                        <div class="ss-um-g-badge">
                                                            <div class="ss-um-g-badge-l">
                                                                <span class="ss-badge-icon bg-hot-pink">Hu</span>
                                                            </div>
                                                            <div class="ss-um-g-badge-r">
                                                                <h3 class="h3">Human Resources</h3>
                                                                <div class="p2">9 Users</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="ss-um-g-head-r">
                                                        <div class="ss-dropdown dropdown sm">
                                                            <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">
                                                                        <i class="ss-icon-edit-square-two"><svg><use xlink:href="#ss-icon-edit-square-two"></use></svg></i>
                                                                        <span class="dropdown-item-text">Edit</span>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="#ss-modal-delete" class="dropdown-item ss-dpitem-icon" data-bs-toggle="modal">
                                                                        <i class="ss-icon-trash text-danger"><svg><use xlink:href="#ss-icon-trash"></use></svg></i>
                                                                        <span class="dropdown-item-text">Delete</span>
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="ss-um-g-grid">
                                                    <div class="ss-um-g-col">
                                                        <span class="ss-um-g-avtar">
                                                            <span class="lazy-loader">
                                                                <span class="lazyload" data-original="images/avtar-80x80.png"></span>
                                                            </span>
                                                        </span>
                                                    </div>
                                                    <div class="ss-um-g-col">
                                                        <span class="ss-um-g-avtar">
                                                            <span class="lazy-loader">
                                                                <span class="lazyload" data-original="images/avtar-80x80.png"></span>
                                                            </span>
                                                        </span>
                                                    </div>
                                                    <div class="ss-um-g-col">
                                                        <span class="ss-um-g-avtar">
                                                            <span class="lazy-loader">
                                                                <span class="lazyload" data-original="images/avtar-80x80.png"></span>
                                                            </span>
                                                        </span>
                                                    </div>
                                                    <div class="ss-um-g-col">
                                                        <span class="ss-um-g-avtar">
                                                            <span class="lazy-loader">
                                                                <span class="lazyload" data-original="images/avtar-80x80.png"></span>
                                                            </span>
                                                        </span>
                                                    </div>
                                                    <div class="ss-um-g-col">
                                                        <span class="ss-um-g-avtar more">
                                                            <strong>+5</strong>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="ss-um-box-bottom">
                                                <div class="ss-um-g-footer">
                                                    <div class="ss-um-g-footer-l">
                                                        <p>Created: 4/23/2020</p>
                                                    </div>
                                                    <div class="ss-um-g-footer-r">
                                                        <a class="btn btn-light btn-sm">View</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ss-um-col">
                                        <div class="ss-um-box">
                                            <div class="ss-um-box-top">
                                                <div class="ss-um-g-head">
                                                    <div class="ss-um-g-head-l">
                                                        <div class="ss-um-g-badge">
                                                            <div class="ss-um-g-badge-l">
                                                                <span class="ss-badge-icon bg-yellow-dark">Su</span>
                                                            </div>
                                                            <div class="ss-um-g-badge-r">
                                                                <h3 class="h3">Sales</h3>
                                                                <div class="p2">3 Users</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="ss-um-g-head-r">
                                                        <div class="ss-dropdown dropdown sm">
                                                            <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">
                                                                        <i class="ss-icon-edit-square-two"><svg><use xlink:href="#ss-icon-edit-square-two"></use></svg></i>
                                                                        <span class="dropdown-item-text">Edit</span>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="#ss-modal-delete" class="dropdown-item ss-dpitem-icon" data-bs-toggle="modal">
                                                                        <i class="ss-icon-trash text-danger"><svg><use xlink:href="#ss-icon-trash"></use></svg></i>
                                                                        <span class="dropdown-item-text">Delete</span>
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="ss-um-g-grid">
                                                    <div class="ss-um-g-col">
                                                        <span class="ss-um-g-avtar">
                                                            <span class="lazy-loader">
                                                                <span class="lazyload" data-original="images/avtar-80x80.png"></span>
                                                            </span>
                                                        </span>
                                                    </div>
                                                    <div class="ss-um-g-col">
                                                        <span class="ss-um-g-avtar">
                                                            <span>JS</span>
                                                        </span>
                                                    </div>
                                                    <div class="ss-um-g-col">
                                                        <span class="ss-um-g-avtar">
                                                            <span class="lazy-loader">
                                                                <span class="lazyload" data-original="images/avtar-80x80.png"></span>
                                                            </span>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="ss-um-box-bottom">
                                                <div class="ss-um-g-footer">
                                                    <div class="ss-um-g-footer-l">
                                                        <p>Created: 4/23/2020</p>
                                                    </div>
                                                    <div class="ss-um-g-footer-r">
                                                        <a class="btn btn-light btn-sm">View</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ss-um-col">
                                        <div class="ss-um-box">
                                            <div class="ss-um-box-top">
                                                <div class="ss-um-g-head">
                                                    <div class="ss-um-g-head-l">
                                                        <div class="ss-um-g-badge">
                                                            <div class="ss-um-g-badge-l">
                                                                <span class="ss-badge-icon bg-green">De</span>
                                                            </div>
                                                            <div class="ss-um-g-badge-r">
                                                                <h3 class="h3">Design Team</h3>
                                                                <div class="p2">0 Users</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="ss-um-g-head-r">
                                                        <div class="ss-dropdown dropdown sm">
                                                            <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">
                                                                        <i class="ss-icon-edit-square-two"><svg><use xlink:href="#ss-icon-edit-square-two"></use></svg></i>
                                                                        <span class="dropdown-item-text">Edit</span>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="#ss-modal-delete" class="dropdown-item ss-dpitem-icon" data-bs-toggle="modal">
                                                                        <i class="ss-icon-trash text-danger"><svg><use xlink:href="#ss-icon-trash"></use></svg></i>
                                                                        <span class="dropdown-item-text">Delete</span>
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="ss-um-g-grid">
                                                    <div class="ss-um-g-col">
                                                        <span class="ss-um-g-avtar placeholder">
                                                            <i class="ss-icon-user-fill"><svg><use xlink:href="#ss-icon-user-fill"></use></svg></i>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="ss-um-box-bottom">
                                                <div class="ss-um-g-footer">
                                                    <div class="ss-um-g-footer-l">
                                                        <p>Created: 4/23/2020</p>
                                                    </div>
                                                    <div class="ss-um-g-footer-r">
                                                        <a class="btn btn-light btn-sm">View</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ss-um-col">
                                        <div class="ss-um-box">
                                            <div class="ss-um-box-top">
                                                <div class="ss-um-g-head">
                                                    <div class="ss-um-g-head-l">
                                                        <div class="ss-um-g-badge">
                                                            <div class="ss-um-g-badge-l">
                                                                <span class="ss-badge-icon bg-purple">En</span>
                                                            </div>
                                                            <div class="ss-um-g-badge-r">
                                                                <h3 class="h3">Engineering</h3>
                                                                <div class="p2">2 Users</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="ss-um-g-head-r">
                                                        <div class="ss-dropdown dropdown sm">
                                                            <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">
                                                                        <i class="ss-icon-edit-square-two"><svg><use xlink:href="#ss-icon-edit-square-two"></use></svg></i>
                                                                        <span class="dropdown-item-text">Edit</span>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="#ss-modal-delete" class="dropdown-item ss-dpitem-icon" data-bs-toggle="modal">
                                                                        <i class="ss-icon-trash text-danger"><svg><use xlink:href="#ss-icon-trash"></use></svg></i>
                                                                        <span class="dropdown-item-text">Delete</span>
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="ss-um-g-grid">
                                                    <div class="ss-um-g-col">
                                                        <span class="ss-um-g-avtar">
                                                            <span class="lazy-loader">
                                                                <span class="lazyload" data-original="images/avtar-80x80.png"></span>
                                                            </span>
                                                        </span>
                                                    </div>
                                                    <div class="ss-um-g-col">
                                                        <span class="ss-um-g-avtar">
                                                            <span class="lazy-loader">
                                                                <span class="lazyload" data-original="images/avtar-80x80.png"></span>
                                                            </span>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="ss-um-box-bottom">
                                                <div class="ss-um-g-footer">
                                                    <div class="ss-um-g-footer-l">
                                                        <p>Created: 4/23/2020</p>
                                                    </div>
                                                    <div class="ss-um-g-footer-r">
                                                        <a class="btn btn-light btn-sm">View</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ss-um-col">
                                        <div class="ss-um-box">
                                            <div class="ss-um-box-top">
                                                <div class="ss-um-g-head">
                                                    <div class="ss-um-g-head-l">
                                                        <div class="ss-um-g-badge">
                                                            <div class="ss-um-g-badge-l">
                                                                <span class="ss-badge-icon bg-sea-green">Ma</span>
                                                            </div>
                                                            <div class="ss-um-g-badge-r">
                                                                <h3 class="h3">Marketing</h3>
                                                                <div class="p2">0 Users</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="ss-um-g-head-r">
                                                        <div class="ss-dropdown dropdown sm">
                                                            <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">
                                                                        <i class="ss-icon-edit-square-two"><svg><use xlink:href="#ss-icon-edit-square-two"></use></svg></i>
                                                                        <span class="dropdown-item-text">Edit</span>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="#ss-modal-delete" class="dropdown-item ss-dpitem-icon" data-bs-toggle="modal">
                                                                        <i class="ss-icon-trash text-danger"><svg><use xlink:href="#ss-icon-trash"></use></svg></i>
                                                                        <span class="dropdown-item-text">Delete</span>
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="ss-um-g-grid">
                                                    <div class="ss-um-g-col">
                                                        <span class="ss-um-g-avtar placeholder">
                                                            <i class="ss-icon-user-fill"><svg><use xlink:href="#ss-icon-user-fill"></use></svg></i>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="ss-um-box-bottom">
                                                <div class="ss-um-g-footer">
                                                    <div class="ss-um-g-footer-l">
                                                        <p>Created: 4/23/2020</p>
                                                    </div>
                                                    <div class="ss-um-g-footer-r">
                                                        <a class="btn btn-light btn-sm">View</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End   [ Group Tab ] -->

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<?php require_once "modal-new-group.php";?>

<?php require_once "footer.php";?>
