@using TaskTracker.Api.Pages
@using TaskTracker.Core.Enums
@model BoardModel

@if (Model.UpcomingTasks.Count > 0)
{
    <section class="upcoming-tasks" aria-labelledby="upcoming-tasks-heading">
        <div class="upcoming-tasks-header">
            <h2 id="upcoming-tasks-heading">Upcoming tasks</h2>
            <span>@Model.UpcomingTasks.Count due soon</span>
        </div>
        <div class="upcoming-task-list">
            @foreach (var task in Model.UpcomingTasks)
            {
                var categoryColor = BoardModel.GetCategoryColor(task.Category);
                var dueAt = task.DueAt!.Value;
                var dueAtUtc = dueAt.ToUniversalTime().ToString("O");
                var localDueAt = dueAt.ToLocalTime().ToString("ddd, MMM d, h:mm tt");
                <article class="upcoming-task"
                         hx-get="/board?handler=TaskDetail&id=@task.Id"
                         hx-target="#detail-panel"
                         hx-swap="innerHTML">
                    <div class="upcoming-task-title">@task.Title</div>
                    <div class="upcoming-task-meta">
                        <span class="upcoming-task-status upcoming-task-status--@task.Status.ToString().ToLowerInvariant()">@task.Status</span>
                        @if (!string.IsNullOrEmpty(task.Category))
                        {
                            <span class="task-card-category-dot" style="background: @categoryColor"></span>
                            <span>@task.Category</span>
                        }
                    </div>
                    <time class="task-countdown" aria-live="off" data-due-at="@dueAtUtc" datetime="@dueAtUtc" title="@localDueAt">@localDueAt</time>
                </article>
            }
        </div>
    </section>
}