<div class="absolute inset-0 flex min-w-0 flex-col overflow-hidden">
    <mat-drawer-container
        class="bg-card h-full flex-auto dark:bg-transparent"
        (backdropClick)="onBackdropClicked()"
    >
        <!-- Drawer -->
        <mat-drawer
            class="w-full dark:bg-gray-900 sm:w-128"
            [mode]="drawerMode"
            [opened]="false"
            [position]="'end'"
            [disableClose]="true"
            #matDrawer
        >
            <router-outlet></router-outlet>
        </mat-drawer>

        <mat-drawer-content class="flex flex-col">
            <!-- Main -->
            <div class="flex flex-auto flex-col">
                <!-- Header -->
                <div
                    class="flex flex-col items-start px-6 py-8 sm:flex-row sm:items-center sm:justify-between md:px-8"
                >
                    <!-- Title -->
                    <div>
                        <div
                            class="text-4xl font-extrabold leading-none tracking-tight"
                        >
                            Tasks
                        </div>
                        <div class="text-secondary ml-0.5 font-medium">
                            @if (tasksCount.incomplete === 0) {
                                <span>All tasks completed!</span>
                            }
                            @if (tasksCount.incomplete !== 0) {
                                <span
                                    >{{ tasksCount.incomplete }} remaining
                                    tasks</span
                                >
                            }
                        </div>
                    </div>
                    <!-- Actions -->
                    <div class="mt-4 sm:mt-0">
                        <!-- Add section button -->
                        <button
                            mat-flat-button
                            [color]="'accent'"
                            (click)="createTask('section')"
                            [matTooltip]="'Shortcut: Ctrl + .'"
                        >
                            <mat-icon
                                [svgIcon]="'heroicons_outline:plus'"
                            ></mat-icon>
                            <span class="ml-2 mr-1">Add Section</span>
                        </button>
                        <!-- Add task button -->
                        <button
                            class="ml-3"
                            mat-flat-button
                            [color]="'primary'"
                            (click)="createTask('task')"
                            [matTooltip]="'Shortcut: Ctrl + /'"
                        >
                            <mat-icon
                                [svgIcon]="'heroicons_outline:plus'"
                            ></mat-icon>
                            <span class="ml-2 mr-1">Add Task</span>
                        </button>
                    </div>
                </div>

                <!-- Tasks list -->
                @if (tasks && tasks.length > 0) {
                    <div
                        class="divide-y"
                        cdkDropList
                        [cdkDropListData]="tasks"
                        (cdkDropListDropped)="dropped($event)"
                    >
                        <!-- Task -->
                        @for (
                            task of tasks;
                            track trackByFn($index, task);
                            let first = $first
                        ) {
                            <div
                                [id]="'task-' + task.id"
                                class="group w-full select-none dark:hover:bg-hover hover:bg-gray-100"
                                [ngClass]="{
                                    'h-12 bg-gray-50 text-lg font-semibold dark:bg-transparent':
                                        task.type === 'section',
                                    'h-16': task.type === 'task',
                                    'text-hint': task.completed,
                                }"
                                [class.border-t]="first"
                                cdkDrag
                                [cdkDragLockAxis]="'y'"
                            >
                                <!-- Drag preview -->
                                <div
                                    class="flex h-0 w-0 flex-0"
                                    *cdkDragPreview
                                ></div>

                                <!-- Task content -->
                                <div
                                    class="relative flex h-full items-center pl-10"
                                >
                                    <!-- Selected indicator -->
                                    @if (
                                        selectedTask &&
                                        selectedTask.id === task.id
                                    ) {
                                        <div
                                            class="absolute -bottom-px -top-px right-0 z-10 flex w-1 flex-0 bg-primary"
                                        ></div>
                                    }

                                    <!-- Drag handle -->
                                    <div
                                        class="absolute inset-y-0 left-0 flex w-8 cursor-move items-center justify-center md:hidden md:group-hover:flex"
                                        cdkDragHandle
                                    >
                                        <mat-icon
                                            class="text-hint icon-size-5"
                                            [svgIcon]="'heroicons_solid:bars-3'"
                                        ></mat-icon>
                                    </div>

                                    <!-- Complete task button -->
                                    @if (task.type === 'task') {
                                        <button
                                            class="-ml-2.5 mr-2 leading-none"
                                            (click)="toggleCompleted(task)"
                                            mat-icon-button
                                        >
                                            @if (task.completed) {
                                                <mat-icon
                                                    class="text-primary"
                                                    [svgIcon]="
                                                        'heroicons_outline:check-circle'
                                                    "
                                                ></mat-icon>
                                            }
                                            @if (!task.completed) {
                                                <mat-icon
                                                    class="text-hint"
                                                    [svgIcon]="
                                                        'heroicons_outline:check-circle'
                                                    "
                                                ></mat-icon>
                                            }
                                        </button>
                                    }

                                    <!-- Task link -->
                                    <a
                                        class="flex h-full min-w-0 flex-auto items-center pr-7"
                                        [routerLink]="[task.id]"
                                    >
                                        <!-- Title & Placeholder -->
                                        <div class="mr-2 flex-auto truncate">
                                            @if (task.title) {
                                                <span>{{ task.title }}</span>
                                            }
                                            @if (!task.title) {
                                                <span
                                                    class="text-hint select-none"
                                                    >{{
                                                        task.type | titlecase
                                                    }}
                                                    title</span
                                                >
                                            }
                                        </div>
                                        <!-- Priority -->
                                        @if (task.type === 'task') {
                                            <div class="mr-3 h-4 w-4">
                                                <!-- Low -->
                                                @if (task.priority === 0) {
                                                    <mat-icon
                                                        class="text-green-600 icon-size-4 dark:text-green-400"
                                                        [svgIcon]="
                                                            'heroicons_mini:arrow-long-down'
                                                        "
                                                        [title]="'Low'"
                                                    ></mat-icon>
                                                }
                                                <!-- High -->
                                                @if (task.priority === 2) {
                                                    <mat-icon
                                                        class="text-red-600 icon-size-4 dark:text-red-400"
                                                        [svgIcon]="
                                                            'heroicons_mini:arrow-long-up'
                                                        "
                                                        [title]="'High'"
                                                    ></mat-icon>
                                                }
                                            </div>
                                        }
                                        <!-- Due date -->
                                        @if (task.type === 'task') {
                                            <div
                                                class="text-secondary whitespace-nowrap text-sm"
                                            >
                                                {{
                                                    task.dueDate
                                                        | date: 'LLL dd'
                                                }}
                                            </div>
                                        }
                                    </a>
                                </div>
                            </div>
                        }
                    </div>
                } @else {
                    <div
                        class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent"
                    >
                        <mat-icon
                            class="icon-size-24"
                            [svgIcon]="
                                'heroicons_outline:clipboard-document-list'
                            "
                        ></mat-icon>
                        <div
                            class="text-secondary mt-4 text-2xl font-semibold tracking-tight"
                        >
                            Add a task to start planning!
                        </div>
                    </div>
                }
            </div>
        </mat-drawer-content>
    </mat-drawer-container>
</div>
