<div class="bg-card flex h-full flex-auto flex-col dark:bg-default">
    <!-- Header -->
    <div
        class="flex h-18 flex-0 items-center border-b bg-gray-50 px-4 dark:bg-transparent"
    >
        <button mat-icon-button (click)="drawer.close()">
            <mat-icon [svgIcon]="'heroicons_outline:x-mark'"></mat-icon>
        </button>
        <div class="ml-2 text-lg font-medium">Contact info</div>
    </div>

    <div class="overflow-y-auto">
        <!-- Contact avatar & info -->
        <div class="mt-8 flex flex-col items-center">
            <div class="h-40 w-40 rounded-full">
                @if (chat.contact.avatar) {
                    <img
                        class="h-full w-full rounded-full object-cover"
                        [src]="chat.contact.avatar"
                        [alt]="'Contact avatar'"
                    />
                }
                @if (!chat.contact.avatar) {
                    <div
                        class="flex h-full w-full items-center justify-center rounded-full bg-gray-200 text-8xl font-semibold uppercase text-gray-600 dark:bg-gray-700 dark:text-gray-200"
                    >
                        {{ chat.contact.name.charAt(0) }}
                    </div>
                }
            </div>
            <div class="mt-4 text-lg font-medium">{{ chat.contact.name }}</div>
            <div class="text-secondary mt-0.5 text-md">
                {{ chat.contact.about }}
            </div>
        </div>

        <div class="px-7 py-10">
            <!-- Media -->
            <div class="text-lg font-medium">Media</div>
            <div class="mt-4 grid grid-cols-4 gap-1">
                @for (media of chat.contact.attachments.media; track media) {
                    <img class="h-20 rounded object-cover" [src]="media" />
                }
            </div>
            <!-- Details -->
            <div class="mt-10 space-y-4">
                <div class="mb-3 text-lg font-medium">Details</div>
                @if (chat.contact.details.emails.length) {
                    <div>
                        <div class="text-secondary font-medium">Email</div>
                        <div class="">
                            {{ chat.contact.details.emails[0].email }}
                        </div>
                    </div>
                }
                @if (chat.contact.details.phoneNumbers.length) {
                    <div>
                        <div class="text-secondary font-medium">
                            Phone number
                        </div>
                        <div class="">
                            {{
                                chat.contact.details.phoneNumbers[0].phoneNumber
                            }}
                        </div>
                    </div>
                }
                @if (chat.contact.details.title) {
                    <div>
                        <div class="text-secondary font-medium">Title</div>
                        <div class="">{{ chat.contact.details.title }}</div>
                    </div>
                }
                @if (chat.contact.details.company) {
                    <div>
                        <div class="text-secondary font-medium">Company</div>
                        <div class="">{{ chat.contact.details.company }}</div>
                    </div>
                }
                @if (chat.contact.details.birthday) {
                    <div>
                        <div class="text-secondary font-medium">Birthday</div>
                        <div class="">{{ chat.contact.details.birthday }}</div>
                    </div>
                }
                @if (chat.contact.details.address) {
                    <div>
                        <div class="text-secondary font-medium">Address</div>
                        <div class="">{{ chat.contact.details.address }}</div>
                    </div>
                }
            </div>
        </div>
    </div>
</div>
