@page "/geolocation"
@inject IStringLocalizer<Geolocations> Localizer
@inject IGeoLocationService GeoLocationService
@implements IAsyncDisposable

<h3>@Localizer["GeolocationsTitle"]</h3>

<DemoBlock Title="@Localizer["GeolocationNormalText"]" Introduction="@Localizer["GeolocationNormalIntro"]" Name="Normal">
    <p>@Localizer["GeolocationNormalIntro2"]</p>
    <Tips>
        <p>@Localizer["GeolocationNormalIntro3"]</p>
    </Tips>
    <div>
        @if (WatchID == 0)
        {
            <Button Text="@Localizer["GetLocationButtonText"]" OnClick="GetLocation"></Button>
            <Button Text="@Localizer["WatchPositionButtonText"]" OnClick="WatchPosition"></Button>
        }
        else
        {
            <Button Text="@Localizer["ClearWatchPositionButtonText"]" OnClick="ClearWatchPosition"></Button>
        }
        @if (Model != null)
        {
            <div class="form-inline row g-3 mt-3">
                <div class="col-12 col-sm-4">
                    <Display Value="@Model.Longitude" ShowLabel="true" DisplayText="@Localizer["Longitude"]" />
                </div>
                <div class="col-12 col-sm-4">
                    <Display Value="@Model.Latitude" ShowLabel="true" DisplayText="@Localizer["Latitude"]" />
                </div>
                <div class="col-12 col-sm-4">
                    <Display Value="@Model.Accuracy" ShowLabel="true" DisplayText="@Localizer["Accuracy"]" />
                </div>
                <div class="col-12 col-sm-4">
                    <Display Value="@Model.Altitude" ShowLabel="true" DisplayText="@Localizer["Altitude"]" />
                </div>
                <div class="col-12 col-sm-4">
                </div>
                <div class="col-12 col-sm-4">
                    <Display Value="@Model.AltitudeAccuracy" ShowLabel="true" DisplayText="@Localizer["AltitudeAccuracy"]" />
                </div>
                <div class="col-12 col-sm-4">
                    <Display Value="@Model.Heading" ShowLabel="true" DisplayText="@Localizer["Heading"]" />
                </div>
                <div class="col-12 col-sm-4">
                </div>
                <div class="col-12 col-sm-4">
                    <Display Value="@Model.Speed" ShowLabel="true" DisplayText="@Localizer["Speed"]" />
                </div>
                <div class="col-12 col-sm-4">
                    <Display Value="@Model.CurrentDistance" ShowLabel="true" DisplayText="@Localizer["CurrentDistance"]" />
                </div>
                <div class="col-12 col-sm-4">
                    <Display Value="@Model.TotalDistance" ShowLabel="true" DisplayText="@Localizer["TotalDistance"]" />
                </div>
                <div class="col-12 col-sm-4">
                    <Display Value="@Model.LastUpdateTime" ShowLabel="true" DisplayText="@Localizer["LastUpdateTime"]" />
                </div>
            </div>
        }
        <ConsoleLogger @ref="Logger" />
    </div>
</DemoBlock>
