<div class="row ml-5 mt-5">
    <label for="search-groups" class="mr-3 mt-2 h5">Group</label>
    <div class="form-group col-md-9">

        <input id="search-groups" class="form-control w-100" type="text" placeholder="Search" aria-label="Search"
            style="height: 50px;">
        @include('dashboard.users.partials._session')

    </div>

</div>
<div class="form-group text-center mt-3">
    <button class="btn btn-primary px-3 py-2 my-2 my-sm-0 srm-button search-filter" type="submit"><i
            class="fas fa-search"></i> Search</button>
    <button class="btn btn-outline-primary px-3 py-2 my-2 ml-2 my-sm-0 srm-button reset-filter" type="button"><i
            class="fa-solid fa-eye"></i> Show All</button>
</div>

<div class="mt-2 d-flex justify-content-end">

    <button class="btn btn-primary add-group-button px-3 py-2 mb-3 float-right srm-button " type="button"
        data-toggle="modal" data-target="#add-group-modal">
        <i class="fas fa-plus"></i> Add New Group
    </button>
</div>

<div class="clearfix card-body mt-3">
    <table id="groups" class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>Group</th>
                <th>Creation Date</th>
                <th>User Count</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($groups as $group)

            <tr>
                <td>{{ $group->name }}</td>
                <td>{{ $group->created_at }}</td>
                <td>{{ $group->users_count }}</td>
                <td>
                    <div class="dropdown">
                        <button type="button" id="ellipsisMenu1" data-toggle="dropdown" aria-haspopup="true"
                            aria-expanded="false" style="border:none;background:none">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
                                <path
                                    d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
                            </svg>
                        </button>
                        <div class="dropdown-menu" aria-labelledby="ellipsisMenu">
                            <a class="dropdown-item edit-group"
                                data-url="{{ route('groups.edit',$group->group_ID) }}">Edit</a>
                            <a id="openModalButton" class="dropdown-item delete-group" data-toggle="modal"
                                data-target="#delete-group-modal"
                                data-url="{{ route('groups.destroy',$group->group_ID) }}">Delete</a>
                        </div>
                    </div>


                </td>
            </tr>
            @endforeach

        </tbody>
    </table>
</div>
