

    <div class="main-content">
    <div class="container">
        <h1>Branch Groups</h1>
        
        <!-- Form for Creating/Updating Branch Group -->
        <div class="form-wrapper">
            <form id="branchGroupForm">
                <label for="groupName">Group Name:</label>
                <input type="text" id="groupName" name="groupName" required>

                <input type="hidden" id="branchGroupId"> <!-- Hidden field for editing -->
                <button type="submit">Submit</button>
            </form>
        </div>

        <!-- Table for Displaying Branch Groups -->
        <div class="table-wrapper">
            <table id="branchGroupsTable">
                <thead>
                    <tr>
                        <th>Group Name</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Branch groups will be dynamically added here -->
                </tbody>
            </table>
        </div>
    </div>

    <script src="./js/branchGroups.js"></script>
</body>
</html>
