@page "/city/{CityId:int}"
@if(City == null){
    <Loading></Loading>
} else
{
    <PageHeader Name="Ville" NameType="Détails" LinkType="LinkType.Edit" Link="@($"/city/{City.Id}/edit")"></PageHeader>
    <Card HeaderTitle="Informations sur la ville">
        <div class="datagrid">
            <div class="datagrid-item">
                <div class="datagrid-title">Nom</div>
                <div class="datagrid-content">@City.Name</div>
            </div>
            <div class="datagrid-item">
                <div class="datagrid-title">Description</div>
                <div class="datagrid-content">@City.Description</div>
            </div>
        </div>
    </Card>
    <Card HeaderTitle="Liste des points d'intérêts">
        <table class="table table-responsive">
            <thead>
                <tr>
                    <th>#</th>
                    <th class="text-nowrap">Nom</th>
                    <th class="text-nowrap">Détails</th>
                </tr>
            </thead>
            <tbody>
                @if (City == null)
                {
                    <tr>
                        <td colspan="3">
                            <Loading></Loading>
                        </td>
                    </tr>
                }
                else
                {
                    @foreach (var pointOfInterest in PointsOfInterest)
                    {
                        <tr>
                            <th>@pointOfInterest.Id</th>
                            <td>@pointOfInterest.Name</td>
                            <td>
                                <a class="btn btn-primary" href="@($"/city/{City.Id}/pointofinterest/{pointOfInterest.Id}")">Détails</a>
                            </td>
                        </tr>
                    }
                }
            </tbody>
        </table>
    </Card>
}