@inject DownloadService DownloadService

<Drawer Placement="bottom" Class="download-queue" @bind-Visible="@Visible">
    <h2>In Progress</h2>
    @foreach (var queueItem in DownloadService.Queue.Where(qi => qi.State))
    {
        <div class="queue-item">
            <img src="@queueItem.CoverPath" />
            <div class="queue-item-info">
                <div>
                    <h4>@queueItem.Title | @queueItem</h4>
                    <span>@queueItem.BytesDownloaded / @queueItem.TotalBytes</span>
                </div>
            </div>
        </div>
    }

    <h2>Up Next</h2>
    @foreach (var queueItem in DownloadService.Queue.Where(qi => qi.Status == Enums.DownloadStatus.Idle))
    {
        <div class="queue-item">
            <img src="@queueItem.CoverPath" />
            <div class="queue-item-info">
                <div>
                    <h4>@queueItem.Title | @queueItem</h4>
                    <span>@queueItem.BytesDownloaded / @queueItem.TotalBytes</span>
                </div>
            </div>
        </div>
    }

    <h2>Completed</h2>
    @foreach (var queueItem in DownloadService.Queue.Where(qi => !qi.State))
    {
        <div class="queue-item">
            <img src="@queueItem.CoverPath" />
            <div class="queue-item-info">
                <div>
                    <h4>@queueItem.Title | @queueItem</h4>
                    <span>@queueItem.BytesDownloaded / @queueItem.TotalBytes</span>
                </div>
            </div>
        </div>
    }
</Drawer>

@code {
    [Parameter] public bool Visible { get; set; }
    [Parameter] public EventCallback<bool> VisibleChanged { get; set; }

    protected override async Task OnInitializedAsync()
    {
        DownloadService.OnQueueChanged += async () =>
        {
            StateHasChanged();
        };
    }
}