<div
    class="bg-card flex flex-auto flex-col overflow-y-auto dark:bg-default lg:overflow-hidden"
>
    @if (mail) {
        <!-- Header -->
        <div class="relative z-10 flex w-full flex-0 flex-col border-b">
            <!-- Toolbar -->
            <div
                class="flex min-h-16 items-center border-b bg-gray-50 px-4 dark:bg-transparent md:px-6"
            >
                <!-- Back button -->
                <a
                    class="md:-ml-2 lg:hidden"
                    mat-icon-button
                    [routerLink]="['./../']"
                >
                    <mat-icon
                        [svgIcon]="'heroicons_outline:arrow-long-left'"
                    ></mat-icon>
                </a>

                <!-- Toggle labels button & menu -->
                <button
                    class="ml-auto"
                    mat-icon-button
                    [matMenuTriggerFor]="toggleLabelMenu"
                >
                    <mat-icon [svgIcon]="'heroicons_outline:tag'"></mat-icon>
                </button>
                <mat-menu #toggleLabelMenu="matMenu">
                    @for (label of labels; track trackByFn($index, label)) {
                        <div
                            mat-menu-item
                            (click)="toggleLabel(label)"
                            matRipple
                        >
                            <mat-checkbox
                                class="pointer-events-none"
                                [color]="'primary'"
                                [checked]="mail.labels.includes(label.id)"
                                [disableRipple]="true"
                            >
                                {{ label.title }}
                            </mat-checkbox>
                        </div>
                    }
                </mat-menu>

                <!-- Toggle important button -->
                <button
                    class="ml-2"
                    mat-icon-button
                    (click)="toggleImportant()"
                >
                    <mat-icon
                        [ngClass]="{
                            'text-red-600 dark:text-red-500': mail.important,
                        }"
                        [svgIcon]="'heroicons_outline:exclamation-circle'"
                    ></mat-icon>
                </button>

                <!-- Toggle starred button -->
                <button class="ml-2" mat-icon-button (click)="toggleStar()">
                    <mat-icon
                        [ngClass]="{
                            'text-orange-500 dark:text-red-400': mail.starred,
                        }"
                        [svgIcon]="'heroicons_outline:star'"
                    ></mat-icon>
                </button>

                <!-- Other actions button & menu -->
                <button
                    class="ml-2"
                    mat-icon-button
                    [matMenuTriggerFor]="mailMenu"
                >
                    <mat-icon
                        [svgIcon]="'heroicons_outline:ellipsis-vertical'"
                    ></mat-icon>
                </button>
                <mat-menu #mailMenu="matMenu">
                    <!-- Mark as read / unread -->
                    @if (mail.unread) {
                        <button mat-menu-item (click)="toggleUnread(false)">
                            <mat-icon
                                [svgIcon]="'heroicons_outline:envelope-open'"
                            ></mat-icon>
                            <span>Mark as read</span>
                        </button>
                    }
                    @if (!mail.unread) {
                        <button mat-menu-item (click)="toggleUnread(true)">
                            <mat-icon
                                [svgIcon]="'heroicons_outline:envelope'"
                            ></mat-icon>
                            <span>Mark as unread</span>
                        </button>
                    }
                    <!-- Marks as spam / not span-->
                    @if (
                        getCurrentFolder() !== 'spam' &&
                        getCurrentFolder() !== 'drafts'
                    ) {
                        <button mat-menu-item (click)="moveToFolder('spam')">
                            <mat-icon
                                [svgIcon]="
                                    'heroicons_outline:exclamation-triangle'
                                "
                            ></mat-icon>
                            <span>Spam</span>
                        </button>
                    }
                    @if (getCurrentFolder() === 'spam') {
                        <button mat-menu-item (click)="moveToFolder('inbox')">
                            <mat-icon
                                [svgIcon]="
                                    'heroicons_outline:exclamation-triangle'
                                "
                            ></mat-icon>
                            <span>Not spam</span>
                        </button>
                    }
                    <!-- Delete -->
                    @if (getCurrentFolder() !== 'trash') {
                        <button mat-menu-item (click)="moveToFolder('trash')">
                            <mat-icon
                                [svgIcon]="'heroicons_outline:trash'"
                            ></mat-icon>
                            <span>Delete</span>
                        </button>
                    }
                </mat-menu>
            </div>

            <!-- Subject and Labels -->
            <div class="flex flex-wrap items-center px-6 py-5">
                <!-- Subject -->
                <div class="my-1 mr-4 flex flex-auto text-2xl">
                    {{ mail.subject }}
                </div>
                <!-- Labels -->
                @if (mail.labels && mail.labels.length > 0) {
                    <div
                        class="-mx-1 flex flex-wrap items-center justify-start"
                    >
                        @for (
                            label of mail.labels | fuseFindByKey: 'id' : labels;
                            track label
                        ) {
                            <div
                                class="m-1 whitespace-nowrap rounded-full px-2.5 py-0.5 text-sm font-medium"
                                [ngClass]="labelColors[label.color].combined"
                            >
                                {{ label.title }}
                            </div>
                        }
                    </div>
                }
            </div>
        </div>

        <!-- Threads -->
        <div
            class="flex flex-auto shrink-0 flex-col bg-gray-100 p-3 dark:bg-transparent lg:shrink lg:overflow-y-auto"
            fuseScrollReset
        >
            <!-- Thread -->
            <div
                class="bg-card flex w-full flex-0 flex-col overflow-hidden rounded-2xl shadow dark:bg-black dark:bg-opacity-10"
            >
                <div class="flex flex-col px-6 py-8">
                    <!-- Header -->
                    <div class="flex w-full items-center">
                        <!-- Sender avatar -->
                        <div
                            class="flex h-10 w-10 flex-0 items-center justify-center overflow-hidden rounded-full"
                        >
                            <img
                                class="h-full w-full"
                                [src]="mail.from.avatar"
                                alt="User avatar"
                            />
                        </div>

                        <!-- Info -->
                        <div class="ml-4 min-w-0">
                            <!-- From -->
                            <div class="truncate font-semibold">
                                {{ mail.from.contact.split('<')[0].trim() }}
                            </div>

                            <!-- To -->
                            <div class="mt-0.5 flex items-center leading-5">
                                <div>to</div>
                                <div class="ml-1 font-semibold">me</div>
                                @if (mail.ccCount + mail.bccCount > 0) {
                                    <div>
                                        <span class="ml-1">and</span>
                                        <span class="ml-1 font-semibold">{{
                                            mail.ccCount + mail.bccCount
                                        }}</span>
                                        <span
                                            class="ml-1 font-semibold"
                                            [ngPlural]="
                                                mail.ccCount + mail.bccCount
                                            "
                                        >
                                            <ng-template ngPluralCase="=1"
                                                >other</ng-template
                                            >
                                            <ng-template ngPluralCase="other"
                                                >others</ng-template
                                            >
                                        </span>
                                    </div>
                                }

                                <!-- Info details panel button -->
                                <button
                                    class="ml-1 h-5 min-h-5 w-5"
                                    mat-icon-button
                                    (click)="openInfoDetailsPanel()"
                                    #infoDetailsPanelOrigin
                                >
                                    <mat-icon
                                        class="icon-size-5"
                                        [svgIcon]="
                                            'heroicons_solid:chevron-down'
                                        "
                                    ></mat-icon>
                                </button>

                                <!-- Info details panel -->
                                <ng-template #infoDetailsPanel>
                                    <div
                                        class="bg-card flex w-full max-w-160 flex-col space-y-1.5 overflow-auto rounded border px-6 py-4 text-md shadow-md"
                                    >
                                        <!-- From -->
                                        <div class="flex">
                                            <div
                                                class="min-w-14 text-right font-medium"
                                            >
                                                from:
                                            </div>
                                            <div
                                                class="whitespace-pre-wrap pl-2"
                                            >
                                                {{ mail.from.contact }}
                                            </div>
                                        </div>
                                        <!-- To -->
                                        <div class="flex">
                                            <div
                                                class="min-w-14 text-right font-medium"
                                            >
                                                to:
                                            </div>
                                            <div
                                                class="whitespace-pre-wrap pl-2"
                                            >
                                                {{ mail.to }}
                                            </div>
                                        </div>
                                        <!-- Cc -->
                                        @if (mail.cc) {
                                            <div class="flex">
                                                <div
                                                    class="min-w-14 text-right font-medium"
                                                >
                                                    cc:
                                                </div>
                                                <div
                                                    class="whitespace-pre-wrap pl-2"
                                                >
                                                    {{ mail.cc.join(',\n') }}
                                                </div>
                                            </div>
                                        }
                                        <!-- Bbc -->
                                        @if (mail.bcc) {
                                            <div class="flex">
                                                <div
                                                    class="min-w-14 text-right font-medium"
                                                >
                                                    bcc:
                                                </div>
                                                <div
                                                    class="whitespace-pre-wrap pl-2"
                                                >
                                                    {{ mail.bcc.join(',\n') }}
                                                </div>
                                            </div>
                                        }
                                        <!-- Date -->
                                        <div class="flex">
                                            <div
                                                class="min-w-14 text-right font-medium"
                                            >
                                                date:
                                            </div>
                                            <div
                                                class="whitespace-pre-wrap pl-2"
                                            >
                                                {{
                                                    mail.date
                                                        | date
                                                            : 'EEEE, MMMM d, y - hh:mm a'
                                                }}
                                            </div>
                                        </div>
                                        <!-- Subject -->
                                        <div class="flex">
                                            <div
                                                class="min-w-14 text-right font-medium"
                                            >
                                                subject:
                                            </div>
                                            <div
                                                class="whitespace-pre-wrap pl-2"
                                            >
                                                {{ mail.subject }}
                                            </div>
                                        </div>
                                    </div>
                                </ng-template>
                            </div>
                        </div>
                    </div>

                    <!-- Content -->
                    <div
                        class="mt-8 flex whitespace-pre-line leading-relaxed"
                        [innerHTML]="mail.content"
                    ></div>

                    <!-- Attachments -->
                    @if (mail.attachments && mail.attachments.length > 0) {
                        <div class="flex w-full flex-col">
                            <!-- Title -->
                            <div class="mt-12 flex items-center">
                                <mat-icon
                                    class="icon-size-5"
                                    [svgIcon]="'heroicons_solid:paper-clip'"
                                ></mat-icon>
                                <div class="ml-2 font-semibold">
                                    {{ mail.attachments.length }} Attachments
                                </div>
                            </div>

                            <!-- Files -->
                            <div class="-m-3 mt-3 flex flex-wrap">
                                @for (
                                    attachment of mail.attachments;
                                    track attachment
                                ) {
                                    <div class="m-3 flex items-center">
                                        <!-- Preview -->
                                        @if (
                                            attachment.type.startsWith('image/')
                                        ) {
                                            <img
                                                class="h-10 w-10 overflow-hidden rounded-md"
                                                [src]="
                                                    'images/apps/mailbox/' +
                                                    attachment.preview
                                                "
                                            />
                                        }
                                        @if (
                                            attachment.type.startsWith(
                                                'application/'
                                            )
                                        ) {
                                            <div
                                                class="flex h-10 w-10 items-center justify-center overflow-hidden rounded-md bg-primary-100"
                                            >
                                                <div
                                                    class="text-primary-500-800 flex items-center justify-center text-sm font-semibold"
                                                >
                                                    {{
                                                        attachment.type
                                                            .split('/')[1]
                                                            .trim()
                                                            .toUpperCase()
                                                    }}
                                                </div>
                                            </div>
                                        }
                                        <!-- File info -->
                                        <div class="ml-3">
                                            <div
                                                class="truncate text-md font-medium"
                                                [title]="attachment.name"
                                            >
                                                {{ attachment.name }}
                                            </div>
                                            <div
                                                class="text-secondary truncate text-sm font-medium"
                                                [title]="attachment.size"
                                            >
                                                {{
                                                    attachment.size / 1000
                                                        | number: '1.0-2'
                                                }}
                                                KB
                                            </div>
                                        </div>
                                    </div>
                                }
                            </div>
                        </div>
                    }
                </div>

                <!-- Footer -->
                <div
                    class="flex w-full border-t bg-gray-50 p-6 dark:bg-transparent"
                >
                    <!-- Buttons -->
                    @if (!replyFormActive) {
                        <div class="-m-2 flex w-full flex-wrap">
                            <!-- Reply -->
                            <button
                                class="m-2"
                                mat-stroked-button
                                [color]="'primary'"
                                (click)="reply()"
                            >
                                <mat-icon
                                    class="icon-size-5"
                                    [svgIcon]="
                                        'heroicons_solid:arrow-uturn-left'
                                    "
                                ></mat-icon>
                                <span class="ml-2">Reply</span>
                            </button>
                            <!-- Reply all -->
                            <button
                                class="m-2"
                                mat-stroked-button
                                [color]="'primary'"
                                (click)="replyAll()"
                            >
                                <mat-icon
                                    class="icon-size-5"
                                    [svgIcon]="
                                        'heroicons_solid:arrow-uturn-left'
                                    "
                                ></mat-icon>
                                <span class="ml-2">Reply All</span>
                            </button>
                            <!-- Forward -->
                            <button
                                class="m-2"
                                mat-stroked-button
                                [color]="'primary'"
                                (click)="forward()"
                            >
                                <mat-icon
                                    class="icon-size-5"
                                    [color]="'primary'"
                                    [svgIcon]="
                                        'heroicons_solid:chevron-double-right'
                                    "
                                ></mat-icon>
                                <span class="ml-2">Forward</span>
                            </button>
                        </div>
                    }

                    <!-- Reply form -->
                    @if (replyFormActive) {
                        <div class="flex w-full flex-col" #replyForm>
                            <mat-form-field [subscriptSizing]="'dynamic'">
                                <textarea
                                    class="textarea"
                                    matInput
                                    [placeholder]="'Type your reply here'"
                                    [rows]="4"
                                ></textarea>
                            </mat-form-field>

                            <div
                                class="mt-4 flex flex-col justify-between sm:mt-6 sm:flex-row sm:items-center"
                            >
                                <div class="-ml-2">
                                    <!-- Attach file -->
                                    <button mat-icon-button>
                                        <mat-icon
                                            class="icon-size-5"
                                            [svgIcon]="
                                                'heroicons_solid:paper-clip'
                                            "
                                        ></mat-icon>
                                    </button>
                                    <!-- Insert link -->
                                    <button mat-icon-button>
                                        <mat-icon
                                            class="icon-size-5"
                                            [svgIcon]="'heroicons_solid:link'"
                                        ></mat-icon>
                                    </button>
                                    <!-- Insert emoji -->
                                    <button mat-icon-button>
                                        <mat-icon
                                            class="icon-size-5"
                                            [svgIcon]="
                                                'heroicons_solid:face-smile'
                                            "
                                        ></mat-icon>
                                    </button>
                                    <!-- Insert image -->
                                    <button mat-icon-button>
                                        <mat-icon
                                            class="icon-size-5"
                                            [svgIcon]="'heroicons_solid:photo'"
                                        ></mat-icon>
                                    </button>
                                </div>

                                <div class="mt-4 flex items-center sm:mt-0">
                                    <!-- Discard -->
                                    <button
                                        class="order-last ml-3 sm:order-first sm:ml-0"
                                        mat-button
                                        (click)="discard()"
                                    >
                                        Discard
                                    </button>
                                    <!-- Send -->
                                    <button
                                        class="sm:ml-3"
                                        mat-flat-button
                                        [color]="'primary'"
                                        (click)="send()"
                                    >
                                        Send
                                    </button>
                                </div>
                            </div>
                        </div>
                    }
                </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:envelope'"
            ></mat-icon>
            <div
                class="text-secondary mt-4 text-2xl font-semibold tracking-tight"
            >
                Select a mail to read
            </div>
        </div>
    }

    <!-- Select mail to read template -->
</div>
