@page "/references/province-improvements"
@using WebAssembly.Data

<div class="page-container">
    <h1>Province Improvements Reference</h1>
    <p class="subtitle">A reference view of the `ProvinceImprovement` data loaded from
        `ProvinceImprovementsData.RawData`.</p>

    <div class="table-responsive">
        <table class="table table-striped table-hover">
            <thead>
            <tr>
                <th>Name</th>
                <th>Category</th>
                <th>Source</th>
                <th>Cost (Prod/Gold)</th>
                <th>Effects</th>
                <th>Requirements</th>
            </tr>
            </thead>
            <tbody>
            @foreach (var improvement in ProvinceImprovementsData.RawData)
            {
                <tr>
                    <td>@improvement.Name</td>
                    <td>@improvement.Category</td>
                    <td>@improvement.Source</td>
                    <td>@improvement.CostProduction / @improvement.CostGold</td>
                    <td>
                        <div class="preformatted">@improvement.Effects</div>
                    </td>
                    <td>
                        <div class="preformatted">@improvement.Requirements</div>
                    </td>
                </tr>
            }
            </tbody>
        </table>
    </div>
</div>

@code {
}

<style>
    .page-container {
        padding: 2rem;
        max-width: 1400px;
        margin: 0 auto;
    }

    .subtitle {
        color: #666;
        margin-bottom: 1.5rem;
    }

    .table-responsive {
        overflow-x: auto;
    }

    .preformatted {
        white-space: pre-wrap;
        font-family: var(--bs-font-sans-serif);
        color: #333;
    }

    .table {
        font-size: 0.9rem;
    }

    .table th {
        background-color: #f8f9fa;
        font-weight: 600;
    }
</style>