@if (selectedPlace) {
<div class="place-box-dialog bg-white dark:bg-surface-900">
    <div class="place-box-dialog-content">
        <div class="flex justify-between items-center mb-3">
            <div class="flex items-center gap-4 w-full max-w-full">
                <img [src]="selectedPlace.image || selectedPlace.category.image"
                    class="object-cover rounded-full size-16">
                <div class="flex grow min-w-0 md:flex-col">
                    <h1 class="text-gray-800 dark:text-gray-200 font-bold mb-0 truncate">{{ selectedPlace.name }}
                    </h1>

                    <div class="hidden md:flex mt-2 gap-1">
                        <span [style.color]="selectedPlace.category.color"
                            [style.background-color]="selectedPlace.category.color + '1A'"
                            class="text-sm font-medium me-2 px-2.5 py-0.5 rounded flex gap-2 items-center truncate"><i
                                class="pi pi-box text-sm"></i>{{ selectedPlace.category.name }}</span>

                        @if (selectedPlace.allowdog) {
                        <span
                            class="bg-green-100 text-green-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300 ">🐶
                            Yes</span>
                        } @else {
                        <span
                            class="bg-red-100 text-red-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">🐶
                            No</span>
                        }

                        @if (selectedPlace.visited) {
                        <span
                            class="flex items-center gap-1 bg-green-100 text-green-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300"><i
                                class="pi pi-eye text-xs"></i> Done</span>
                        } @else {
                        <span
                            class="flex items-center gap-1 bg-red-100 text-red-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300"><i
                                class="pi pi-eye-slash text-xs"></i> To do</span>
                        }
                    </div>
                </div>

                <div class="flex items-center justify-end gap-2">
                    <div class="hidden md:flex">
                        @if(selectedPlace.gpx) {<p-button (click)="displayGPX()" text icon="pi pi-compass" />}
                        <p-button (click)="visitPlace()" styleClass="text-green-500!" text
                            [icon]="selectedPlace.visited ? 'pi pi-check-circle': 'pi pi-check'" />
                        <p-button (click)="favoritePlace()" styleClass="text-yellow-500!" text
                            [icon]="selectedPlace.favorite ? 'pi pi-star-fill' : 'pi pi-star'" />
                        <p-button (click)="deletePlace()" severity="danger" text icon="pi pi-trash" />
                        <p-button styleClass="text-blue-500!" (click)="editPlace()" text icon="pi pi-pencil" />
                    </div>

                    <div class="flex md:hidden">
                        <p-button (click)="menu.toggle($event)" severity="secondary" text icon="pi pi-ellipsis-h" />
                    </div>

                    <div class="border-l border-solid border-gray-700 h-4"></div>
                    <p-button (click)="close()" severity="secondary" text icon="pi pi-times" />
                </div>
            </div>
        </div>

        <div class="mt-4 grid grid-cols-2 md:grid-cols-5">
            <div class="col-span-2 md:col-span-3 flex flex-col mb-4">
                <span class="text-gray-500 dark:text-gray-400">Place</span>
                <div class="line-clamp-2">{{ selectedPlace.place }}</div>
            </div>

            <div class="grid grid-cols-2 col-span-2">
                <div class="flex flex-col mb-4">
                    <span class="text-gray-500 dark:text-gray-400">Latitude</span>
                    <span class="truncate">{{ selectedPlace.lat }}</span>
                </div>

                <div class="flex flex-col mb-4">
                    <span class="text-gray-500 dark:text-gray-400">Longitude</span>
                    <span class="truncate">{{ selectedPlace.lng }}</span>
                </div>

                <div class="flex flex-col mb-4">
                    <span class="text-gray-500 dark:text-gray-400">Price</span>
                    <span>{{ selectedPlace.price || '-' }} @if (selectedPlace.price) { {{ currency$ | async }} }</span>
                </div>

                <div class="flex flex-col mb-4">
                    <span class="text-gray-500 dark:text-gray-400">Duration</span>
                    <span>{{ selectedPlace.duration || '-' }}</span>
                </div>
            </div>
        </div>

        <div class="flex flex-col mb-4 max-h-40 overflow-y-auto">
            <span class="text-gray-500 dark:text-gray-400">Description</span>
            <span class="break-words whitespace-pre-line"
                [innerHTML]="(selectedPlace.description || '-') | linkify"></span>
        </div>

        <div class="flex md:hidden mt-2 justify-center gap-1">
            <span [style.color]="selectedPlace.category.color"
                [style.background-color]="selectedPlace.category.color + '1A'"
                class="text-sm font-medium me-2 px-2.5 py-0.5 rounded flex gap-2 items-center truncate"><i
                    class="pi pi-box text-sm"></i>{{ selectedPlace.category.name }}</span>

            @if (selectedPlace.allowdog) {
            <span
                class="bg-green-100 text-green-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300 truncate">🐶
                Yes</span>
            } @else {
            <span
                class="bg-red-100 text-red-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300 truncate">🐶
                No</span>
            }

            @if (selectedPlace.visited) {
            <span
                class="bg-green-100 text-green-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300 truncate"><i
                    class="pi pi-eye text-xs"></i> Done</span>
            } @else {
            <span
                class="bg-red-100 text-red-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300 truncate"><i
                    class="pi pi-eye-slash text-xs"></i> To do</span>
            }
        </div>
    </div>
</div>
}

<p-menu #menu [model]="menuItems" [popup]="true" />