@page "/tech-stack"
@using MudBlazor
@using WebAssembly.Services
@inject IMyDialogService DialogService

<div class="techStackPage">
    <h1>Tech Stack</h1>
    
    <div class="techStackGrid">
        @foreach (var tech in Data.TechStackData.RawData)
        {
            <div class="techStackItem @(tech.InUse ? "" : "notInUse")" @onclick="() => OpenDialog(tech)">
                <div class="techStackName">@tech.Name</div>
                <div class="techStackDescription">@tech.Description</div>
            </div>
        }
    </div>
</div>

<style>
    .techStackPage {
        padding: 20px;
        color: white;
    }

    h1 {
        margin-bottom: 30px;
    }

    .techStackGrid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
    }

    .techStackItem {
        background-color: var(--paper);
        border: 1px solid var(--paper-border);
        border-radius: var(--dialog-radius);
        padding: 20px;
        cursor: pointer;
        transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
    }

    .techStackItem:hover {
        background-color: var(--paper-hover);
        border-color: var(--paper-border-hover);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    }

    .techStackItem.notInUse {
        opacity: 0.5;
        filter: grayscale(1);
    }

    .techStackName {
        font-size: 1.5em;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .techStackDescription {
        font-size: 1em;
        color: #ccc;
    }
</style>

@code {
    private void OpenDialog(Data.TechStack tech)
    {
        DialogService.Show(new DialogContents
        {
            Title = tech.Name,
            TechStack = tech
        });
    }
}