App.razor

@using SerbleWebsite.Data
@inject Localiser Localiser

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"/>
        <FocusOnNavigate RouteData="@routeData" Selector="h1"/>
    </Found>
    
    <NotFound>
        <PageTitle>@Localiser["not-found"]</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <PageTitle>@Localiser["serble"] - @Localiser["not-found"]</PageTitle>
            <div class="text-center" style="justify-content: center; display: contents;">
                <h1 class="display-4">@Localiser["404-not-found"]</h1>
                <p role="alert">
                    @Localiser["sorry-not-found"].Replace("[", "<a href=\"/\">").Replace("]", "</a>").MarkupString() <br>
                    <hr class="my-4">
                    <div style="display: flex; justify-content: center">
                        <img src="https://http.cat/404" style="text-align: center;" alt="A picture of a cat hiding under paper"/>
                    </div>
                </p>
            </div>
        </LayoutView>
    </NotFound>
    
</Router>