@if (!isViewMode()) {
    <div cdkDrag #container class="map-element-container"
         (cdkDragEnded)="onDragEnd($event)"
         (cdkDragMoved)="onDragMove($event)"
         cdkDragBoundary=".map-canvas">
        @if (( item()?.label_possition == 1 || item()?.label_possition == 2 )) {
            <div class="text-center">
                <div [hidden]="!(item()?.show_label && item()?.label_possition == 1)">{{ label }}</div>
                @if (item() && item()?.iconset && currentIcon) {
                    <img [src]="'/map_module/img/items/' + item()?.iconset + '/' + currentIcon"
                         onerror="this.src='/map_module/img/items/missing.png';" draggable="false"/>
                } @else if (item() && ( !item()?.iconset || !currentIcon )) {
                    <img [src]="'/map_module/img/items/missing.png'"
                         draggable="false"/>
                }
                <div [hidden]="!(item()?.show_label && item()?.label_possition == 2)">{{ label }}</div>
            </div>
        }

        @if (( item()?.label_possition == 3 || item()?.label_possition == 4 )) {
            <div class="text-center">
                <span [hidden]="!(item()?.show_label && item()?.label_possition == 4)">{{ label }}</span>
                @if (item() && item()?.iconset && currentIcon) {
                    <img [src]="'/map_module/img/items/' + item()?.iconset + '/' + currentIcon"
                         [style.vertical-align]="'middle'"
                         onerror="this.src='/map_module/img/items/missing.png';"
                         draggable="false"/>
                } @else if (item() && ( !item()?.iconset || !currentIcon )) {
                    <img [src]="'/map_module/img/items/missing.png'"
                         draggable="false"/>
                }
                <span [hidden]="!(item()?.show_label && item()?.label_possition == 3)">{{ label }}</span>
            </div>
        }
    </div>
    @if (!isViewMode()) {
        <p-contextMenu [target]="container" [model]="contextMenuItems"
                       appendTo="body"></p-contextMenu>
    }
} @else {
    <div #container class="map-element-container cursor-normal" [ngClass]="{'cursor-pointer': enablePointerCursor()}">
        @if (( item()?.label_possition == 1 || item()?.label_possition == 2 )) {
            <div class="text-center">
                <div [hidden]="!(item()?.show_label && item()?.label_possition == 1)">{{ label }}</div>
                @if (item() && item()?.iconset && currentIcon) {
                    <img [src]="'/map_module/img/items/' + item()?.iconset + '/' + currentIcon"
                         onerror="this.src='/map_module/img/items/missing.png';" draggable="false"/>
                } @else if (item() && ( !item()?.iconset || !currentIcon )) {
                    <img [src]="'/map_module/img/items/missing.png'"
                         draggable="false"/>
                }
                <div [hidden]="!(item()?.show_label && item()?.label_possition == 2)">{{ label }}</div>
            </div>
        }

        @if (( item()?.label_possition == 3 || item()?.label_possition == 4 )) {
            <div class="text-center">
                <span [hidden]="!(item()?.show_label && item()?.label_possition == 4)">{{ label }}</span>
                @if (item() && item()?.iconset && currentIcon) {
                    <img [src]="'/map_module/img/items/' + item()?.iconset + '/' + currentIcon"
                         onerror="this.src='/map_module/img/items/missing.png';" [style.vertical-align]="'middle'"
                         draggable="false"/>
                } @else if (item() && ( !item()?.iconset || !currentIcon )) {
                    <img [src]="'/map_module/img/items/missing.png'"
                         draggable="false"/>
                }
                <span [hidden]="!(item()?.show_label && item()?.label_possition == 3)">{{ label }}</span>
            </div>
        }
    </div>
}