<div>
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="fw-bold mb-0">My Tasks</h5>
        @unless($showAdd)
            <button type="button" class="btn btn-sm btn-outline-primary" wire:click="showAddTask">
                <i class="mdi mdi-plus"></i> Add
            </button>
        @endunless
    </div>

    @if($showAdd)
        <form wire:submit.prevent="addTask" class="mb-3 border rounded p-2 bg-light">
            <div class="mb-2">
                <input type="text" class="form-control form-control-sm" placeholder="Task title" wire:model="title">
                @error('title') <div class="text-danger extra-small">{{ $message }}</div> @enderror
            </div>
            <div class="mb-2">
                <input type="text" class="form-control form-control-sm" placeholder="Description (optional)" wire:model="description">
                @error('description') <div class="text-danger extra-small">{{ $message }}</div> @enderror
            </div>
            <div class="mb-2">
                <input type="datetime-local" class="form-control form-control-sm" wire:model="due_at">
                @error('due_at') <div class="text-danger extra-small">{{ $message }}</div> @enderror
            </div>
            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-sm btn-primary">Save</button>
                <button type="button" class="btn btn-sm btn-light" wire:click="hideAddTask">Cancel</button>
            </div>
        </form>
    @endif

    <div class="list-group list-group-flush">
        @forelse($tasks as $task)
            <div class="list-group-item px-0 py-2 position-relative {{ $task->completed_at ? 'opacity-75' : '' }}">
                <div class="d-flex align-items-center gap-2">
                    <p class="mb-0 fw-semibold small {{ $task->completed_at ? 'text-decoration-line-through text-muted' : '' }}">
                        {{ $task->title }}
                    </p>
                    @if($task->completed_at)
                        <span class="badge bg-secondary">Done</span>
                    @endif
                </div>

                @if($task->description)
                    <small class="text-muted d-block">{{ $task->description }}</small>
                @endif

                @if($task->due_at)
                    <small class="{{ $task->completed_at ? 'text-muted' : ($task->due_at->isPast() ? 'text-danger' : 'text-primary') }}">
                        @if($task->completed_at)
                            Completed {{ $task->completed_at->format('d/m/Y') }}
                        @else
                            Due {{ $task->due_at->format('d/m/Y H:i') }}
                        @endif
                    </small>
                @endif

                <div class="position-absolute top-0 end-0 d-flex gap-1">
                    @unless($task->completed_at)
                        <i class="mdi mdi-check-circle text-success btn btn-sm p-1" title="Complete"
                           wire:click="completeTask({{ $task->id }})"></i>
                    @endunless
                    <i class="mdi mdi-trash-can text-danger btn btn-sm p-1" title="Delete"
                       wire:click="deleteTask({{ $task->id }})"></i>
                </div>
            </div>
        @empty
            <p class="text-muted small mb-0">No tasks yet.</p>
        @endforelse
    </div>
</div>
