Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | @if (city) {
<div class="city-outer card p-2" [id]="'cityElement-' + city.id" style="position: relative">
<div class="city-box" [id]="'cityCardElement-' + countryName">
<div class="city-image" style="position: relative" (mouseenter)="setHover(true)" (mouseleave)="setHover(false)">
<div class="box">
@if (index() === 0) {
<img priority width="200" height="250"
ngSrc="{{ replaceUrl(city.getMainImage()) }}" alt="City Image" />
} @else {
<img width="200" height="250" ngSrc="{{ replaceUrl(city.getMainImage()) }}"
alt="City Image" />
}
</div>
@if (hover) {
<div class="preview-btn" style="position: absolute; top: 10px; right: 10px">
<img loading="lazy" src="/assets/images/preview-button.svg" alt="icon" (click)="openModal(city)" width="12px"
height="12px" />
</div>
}
</div>
<div class="title d-flex justify-content-between"
(mouseenter)="setHover(true)" (mouseleave)="setHover(false)">
{{ city.name }}
</div>
@if (!city.added && city.continentName !== 'Asia') {
<div class="add-button">
<button (click)="add()">Add to Trip</button>
</div>
}
@if (city.added && city.continentName !== 'Asia') {
<div class="added-button">
<button (click)="remove()">✔ Added</button>
</div>
}
@if (!city.added && city.continentName === 'Asia') {
<div class="add-button-asian">
<button (click)="add()">Add to Trip</button>
</div>
}
@if (city.added && city.continentName === 'Asia') {
<div class="added-button-asian">
<button (click)="remove()">✔ Added</button>
</div>
}
</div>
</div>
} |