<div class="subtask-item {{ $sub->is_completed ? 'is-completed' : '' }}" data-id="{{ $sub->id }}" style="--depth: {{ $level }};" x-data="{ editing: false, collapsed: false }">
    <div class="subtask-drag-handle" title="Drag to reorder">
        <svg viewBox="0 0 24 24" fill="currentColor" width="14" height="14"><circle cx="9" cy="5" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="9" cy="19" r="1.5"/><circle cx="15" cy="5" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="15" cy="19" r="1.5"/></svg>
    </div>

    {{-- Animated Check Circle --}}
    <button type="button" class="subtask-check {{ $sub->is_completed ? 'checked' : '' }}" @click="toggleComplete({{ $sub->id }}, $el)" aria-label="Toggle complete">
        <svg viewBox="0 0 24 24" class="subtask-check-svg">
            <circle cx="12" cy="12" r="10" class="subtask-check-circle" />
            <polyline points="8 12 11 15 16 9" class="subtask-check-mark" />
        </svg>
    </button>

    {{-- Title & Meta --}}
    <div class="subtask-body">
        <div class="subtask-title-row">
            <input type="text" class="subtask-title {{ $sub->is_completed ? 'done' : '' }}"
                   value="{{ $sub->title }}"
                   @change="updateSubtask({{ $sub->id }}, 'title', $event.target.value)"
                   @focus="editing = true"
                   @blur="editing = false"
                   @keydown.enter="$el.blur()">
            {{-- Open full detail page --}}
            <a href="{{ route('tasks.show', $sub->id) }}" class="subtask-open-btn" title="Open subtask details" @click.stop>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
            </a>
        </div>

        <div class="subtask-details">
            {{-- Priority Badge --}}
            <div class="subtask-priority-badge" data-priority="{{ $sub->priority }}">
                <span class="subtask-priority-dot" style="background: {{ $sub->priority_color }};"></span>
                <select @change="updateSubtask({{ $sub->id }}, 'priority', $event.target.value); $el.parentElement.dataset.priority = $event.target.value" class="subtask-detail-select">
                    @foreach(['low','medium','high','urgent'] as $p)
                        <option value="{{ $p }}" {{ $sub->priority == $p ? 'selected' : '' }}>{{ ucfirst($p) }}</option>
                    @endforeach
                </select>
            </div>

            {{-- Assignee --}}
            <div class="subtask-assignee-wrap">
                @if($sub->assignee)
                    <div class="subtask-assignee-avatar" title="{{ $sub->assignee->name }}">{{ $sub->assignee->initials }}</div>
                @else
                    <div class="subtask-assignee-avatar unassigned" title="Unassigned">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                    </div>
                @endif
                <select @change="updateSubtask({{ $sub->id }}, 'assignee_id', $event.target.value)" class="subtask-detail-select subtask-assignee-select">
                    <option value="">Unassigned</option>
                    @foreach($users as $u)
                        <option value="{{ $u->id }}" {{ $sub->assignee_id == $u->id ? 'selected' : '' }}>{{ $u->name }}</option>
                    @endforeach
                </select>
            </div>

            {{-- Due Date --}}
            <div class="subtask-due-wrap {{ $sub->due_date && $sub->due_date->isPast() && !$sub->is_completed ? 'overdue' : '' }}">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                @if($sub->due_date)
                    <span class="subtask-due-text">{{ $sub->due_date->format('M j') }}</span>
                @endif
                <input type="date" value="{{ $sub->due_date?->format('Y-m-d') }}" @change="updateSubtask({{ $sub->id }}, 'due_date', $event.target.value)" class="subtask-date-input">
            </div>

            {{-- Comment Count --}}
            @if(($sub->comments_count ?? 0) > 0)
                <a href="{{ route('tasks.show', $sub->id) }}" class="subtask-indicator" title="{{ $sub->comments_count }} comment(s)">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                    <span>{{ $sub->comments_count }}</span>
                </a>
            @endif

            {{-- Attachment Count --}}
            @if(($sub->attachments_count ?? 0) > 0)
                <a href="{{ route('tasks.show', $sub->id) }}" class="subtask-indicator" title="{{ $sub->attachments_count }} attachment(s)">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
                    <span>{{ $sub->attachments_count }}</span>
                </a>
            @endif
        </div>
    </div>

    {{-- Actions (hover reveal) --}}
    <div class="subtask-actions-group">
        @if($sub->subtasksRecursive->count())
            <button type="button" class="subtask-action-btn" @click="collapsed = !collapsed" :title="collapsed ? 'Expand' : 'Collapse'">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14" :class="{ 'rotated': !collapsed }"><polyline points="6 9 12 15 18 9"/></svg>
            </button>
        @endif
        @if($level < 2)
        <button type="button" class="subtask-action-btn" title="Add nested subtask" @click="showNestedForm({{ $sub->id }})">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
        </button>
        @endif
        <button type="button" class="subtask-action-btn danger" title="Delete subtask" @click="deleteSubtask({{ $sub->id }}, $el)">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
        </button>
    </div>
</div>

{{-- Nested Subtasks --}}
@if($sub->subtasksRecursive->count())
    <div class="subtask-children" data-parent="{{ $sub->id }}" x-show="!collapsed" x-transition.opacity.duration.200ms>
        @foreach($sub->subtasksRecursive as $nestedSub)
            @include('tasks.partials.subtask-item', ['sub' => $nestedSub, 'users' => $users, 'level' => $level + 1])
        @endforeach
    </div>
@endif

{{-- Nested subtask inline form --}}
@if($level < 2)
<div class="subtask-nested-form" id="nested-form-{{ $sub->id }}" style="display:none; --depth: {{ $level + 1 }};">
    <div class="subtask-nested-form-inner">
        <input type="text" class="subtask-nested-input" placeholder="What needs to be done?" data-project="{{ $sub->project_id }}" data-parent="{{ $sub->id }}">
        <div class="subtask-nested-form-actions">
            <button type="button" class="btn btn-primary btn-sm" onclick="submitNestedSubtask(this)">Add</button>
            <button type="button" class="btn btn-ghost btn-sm" onclick="this.closest('.subtask-nested-form').style.display='none'">Cancel</button>
        </div>
    </div>
</div>
@endif
