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

<div id="subtask-list-@Model.Id">
    <h3 class="detail-section-label">Subtasks</h3>

    @foreach (var sub in Model.SubTasks)
    {
        <div class="subtask-row">
            @if (sub.Status == WorkTaskStatus.Completed)
            {
                <span class="subtask-check subtask-check--done">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                         stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="20 6 9 17 4 12" />
                    </svg>
                </span>
                <span class="subtask-title subtask-title--done">@sub.Title</span>
            }
            else
            {
                <button class="subtask-check"
                        hx-put="/board?handler=CompleteSubtask&id=@sub.Id"
                        hx-target="#subtask-list-@Model.Id"
                        hx-swap="outerHTML">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="3" width="18" height="18" rx="3" ry="3" />
                    </svg>
                </button>
                <span class="subtask-title">@sub.Title</span>
            }
        </div>
    }

    <!-- Add subtask form -->
    <form hx-post="/board?handler=AddSubtask&id=@Model.Id"
          hx-target="#subtask-list-@Model.Id"
          hx-swap="outerHTML"
          class="subtask-add-form"
          style="margin-top: 8px;">
        <input type="text" name="title" placeholder="Add subtask..." class="input"
               style="font-size: 13px; padding: 6px 10px;"
               autocomplete="off" />
    </form>
</div>