<!-- [DEF:Dashboard:Component] -->
<!--
@SEMANTICS: dashboard, plugins, tools, list
@PURPOSE: Displays the list of available plugins and allows selecting one.
@LAYER: UI
@RELATION: DEPENDS_ON -> frontend/src/lib/stores.js

@PROPS: None
@EVENTS: None
-->
<script>
    // [SECTION: IMPORTS]
    import { onMount } from 'svelte';
    import { plugins, fetchPlugins, selectedPlugin } from '../lib/stores.js';
    // [/SECTION]

    // [DEF:onMount:Function]
    /**
     * @purpose Fetch plugins when the component mounts.
     * @pre Component is mounting.
     * @post plugins store is populated with available tools.
     */
    onMount(async () => {
        console.log("[Dashboard][Entry] Component mounted, fetching plugins.");
        await fetchPlugins();
    });
    // [/DEF:onMount:Function]

    // [DEF:selectPlugin:Function]
    /**
     * @purpose Selects a plugin to display its form.
     * @pre plugin object is provided.
     * @post selectedPlugin store is updated.
     * @param {Object} plugin - The plugin object to select.
     */
    function selectPlugin(plugin) {
        console.log(`[Dashboard][Action] Selecting plugin: ${plugin.id}`);
        selectedPlugin.set(plugin);
    }
    // [/DEF:selectPlugin:Function]
</script>

<!-- [SECTION: TEMPLATE] -->
<div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-4">Available Tools</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {#each $plugins as plugin}
            <div 
                class="border rounded-lg p-4 cursor-pointer hover:bg-gray-100"
                onclick={() => selectPlugin(plugin)}
                role="button"
                tabindex="0"
                onkeydown={(e) => e.key === 'Enter' && selectPlugin(plugin)}
            >
                <h2 class="text-xl font-semibold">{plugin.name}</h2>
                <p class="text-gray-600">{plugin.description}</p>
                <span class="text-sm text-gray-400">v{plugin.version}</span>
            </div>
        {/each}
    </div>
</div>
<!-- [/SECTION] -->

<!-- [/DEF:Dashboard:Component] -->
