@page "/references/province-improvements"
@using AOW4.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>
