<!-- [DEF:ConnectionsSettingsPage:Component] -->
<!--
@SEMANTICS: settings, connections, page
@PURPOSE: Page for managing database connection configurations.
@LAYER: UI
-->
<script>
    import ConnectionForm from '../../../components/tools/ConnectionForm.svelte';
    import ConnectionList from '../../../components/tools/ConnectionList.svelte';

    let listComponent;

    // [DEF:handleSuccess:Function]
    /* @PURPOSE: Refreshes the connection list after a successful creation.
       @PRE: listComponent must be bound.
       @POST: Triggers the fetchConnections method on the list component.
    */
    function handleSuccess() {
        if (listComponent) {
            listComponent.fetchConnections();
        }
    }
    // [/DEF:handleSuccess:Function]
</script>

<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
    <div class="px-4 py-6 sm:px-0">
        <h1 class="text-2xl font-semibold text-gray-900 mb-6">Connection Management</h1>
        
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <div>
                <ConnectionForm on:success={handleSuccess} />
            </div>
            <div>
                <ConnectionList bind:this={listComponent} />
            </div>
        </div>
    </div>
</div>
<!-- [/DEF:ConnectionsSettingsPage:Component] -->