<!-- #region DashboardPage [C:3] [TYPE Page] [SEMANTICS sveltekit, dashboard, plugins, tools, list] -->
<!-- @BRIEF Page component: pages/Dashboard.svelte -->
<!-- @LAYER Page -->
<!--
@SEMANTICS: dashboard, plugins, tools, list
@PURPOSE: Displays the list of available plugins and allows selecting one.
@LAYER UI
@RELATION IMPLEMENTS -> [PageContracts]
@RELATION DEPENDS_ON -> [EXT:frontend:stores]
@UX_STATE: Loading -> Plugin list is fetched when the page mounts.
@UX_STATE: Ready -> Available tools are rendered as selectable tiles.
@UX_STATE: Empty -> No plugin tiles are shown when the list is empty.

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

    // #region onMount:Function [TYPE 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();
    });
    // #endregion onMount:Function

    // #region selectPlugin:Function [TYPE 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);
    }
    // #endregion 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] -->

<!-- #endregion DashboardPage -->
