@inject NavigationManager Navigation
@inherits LayoutComponentBase
@inject IJSRuntime JS

<ToastHost />

<div class="app-shell">
    <nav class="app-navbar d-flex justify-content-between align-items-center">
        <a class="navbar-brand" href="">
            <strong>Dümpelkas</strong> <small class="text-muted">Kassenbuch</small>
        </a>
        <div class="reading-controls">
            <a class="btn btn-outline-secondary" href="hilfe">Hilfe</a>
            <label for="text-scale">Textgröße</label>
            <select id="text-scale" @bind="fontScale" @bind:after="ApplyTextScale">
                <option value="100">Normal</option><option value="125">Groß (125 %)</option>
                <option value="150">Sehr groß (150 %)</option><option value="200">200 %</option>
            </select>
        </div>
    </nav>

    <main class="flex-grow-1 overflow-auto p-3">
        <AppErrorBoundary @key="Navigation.Uri">@Body</AppErrorBoundary>
    </main>

    <footer class="app-footer d-flex align-items-center justify-content-center gap-2">
        <span>Dümpelkas &copy; @DateTime.Now.Year &middot; Version @AppVersion</span> &middot;<button type="button" class="app-footer-about btn btn-link" @onclick="OpenAboutDialog">Über</button>
    </footer>
</div>

@if (showAboutDialog)
{
    <ModalDialog Title="Über Dümpelkas" OnCancel="CloseAboutDialog">
            <h5>Über Dümpelkas &middot; Version @AppVersion</h5>
            <p class="mb-2">Entwickler: Andre Beging</p>
            <p class="mb-3">E-Mail: <a href="mailto:mail@beging.de" style="color: var(--color-text);">mail@beging.de</a></p>
            <div class="d-flex justify-content-end">
                <button type="button" class="btn btn-outline-secondary" @onclick="CloseAboutDialog">
                    <i class="bi bi-x-lg"></i> Schließen
                </button>
            </div>
    </ModalDialog>
}