@using TaskTracker.Api.Pages
@using TaskTracker.Core.Enums
@model TaskTracker.Core.Entities.WorkTask

@{
    var isActive = Model.Status == WorkTaskStatus.Active;
    var cardClasses = "task-card card-glow" + (isActive ? " task-card--active" : "");
    var catColor = BoardModel.GetCategoryColor(Model.Category);
    var elapsed = BoardModel.FormatElapsed(Model.StartedAt, Model.CompletedAt);
    var completedSubtasks = Model.SubTasks.Count(st => st.Status == WorkTaskStatus.Completed || st.Status == WorkTaskStatus.Abandoned);
    var totalSubtasks = Model.SubTasks.Count;
}

<div class="@cardClasses"
     id="task-@Model.Id"
     data-task-id="@Model.Id"
     hx-get="/board?handler=TaskDetail&id=@Model.Id"
     hx-target="#detail-panel"
     hx-swap="innerHTML">
    <div class="task-card-title">
        @if (isActive)
        {
            <span class="live-dot"></span>
        }
        @Model.Title
    </div>
    <div class="task-card-meta">
        @if (!string.IsNullOrEmpty(Model.Category))
        {
            <span class="task-card-category-dot" style="background: @catColor"></span>
            <span>@Model.Category</span>
        }
        @if (Model.StartedAt is not null)
        {
            <span class="task-card-elapsed ml-auto">
                <svg class="icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="10" />
                    <polyline points="12 6 12 12 16 14" />
                </svg>
                @elapsed
            </span>
        }
    </div>
    @if (totalSubtasks > 0)
    {
        <div class="task-card-subtasks">
            @foreach (var st in Model.SubTasks)
            {
                var isDone = st.Status == WorkTaskStatus.Completed || st.Status == WorkTaskStatus.Abandoned;
                <span class="task-card-subtask-dot @(isDone ? "task-card-subtask-dot--done" : "")"></span>
            }
            <span class="text-xs text-secondary ml-auto">@completedSubtasks/@totalSubtasks</span>
        </div>
    }
</div>