@page "/ElementList"

@inject Salmon.Core.Instance Salmon;

<h3>Éléments</h3>

<div Style="display:flex;flex-wrap:wrap; height:100%;">
    @foreach(var e in Elements)
    {
        <Card Class="col-6" Style="width:18rem;margin:10px;">
            <CardHeader>
                @e.LastType
            </CardHeader>
            <CardBody>
                <CardTitle>@e.ShortName</CardTitle>
                <CardSubTitle>
                    <NavLink href=@($"Element/{System.Web.HttpUtility.UrlEncode(e.UniqueId)}")>@e.LongName</NavLink>
                </CardSubTitle>
                <CardText>@e.Description</CardText>
            </CardBody>
            <ul class="list-group list-group-flush">
                @foreach(var kv in e.ImportantProperties())
                {
                    <li class="list-group-item">@kv.Key: @kv.Value</li>
                }
                <li class="list-group-item"><small>id: @e.UniqueId</small></li>
            </ul>
            @if(Salmon.GetLastElementUpdate(e.UniqueId) is not null)
            {
                <CardFooter>
                    <small class="text-muted">Last updated <i>@TimespanHelper.GetReadableTimespan(DateTime.Now - Salmon.GetLastElementUpdate(e.UniqueId).Value)</i></small>
                </CardFooter>
            }
        </Card>
    }
</div>

@code {
    List<Element> Elements = new();
    private static System.Timers.Timer Time = new System.Timers.Timer(5000);


    protected async override Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        Time.Elapsed += async (Object? source, System.Timers.ElapsedEventArgs e) =>
        {
            await InvokeAsync(() => Refresh());
        };
        Time.AutoReset = true;
        Time.Enabled = true;

        Refresh();
    }




    public void Refresh()
    {
        Elements = Salmon.GetAllElements().ToList();
        StateHasChanged();
    }
}