html

<ion-header translucent>
  <ion-toolbar>
    <ion-title>Property Detail</ion-title>
    <ion-buttons slot="start">
      <ion-button (click)="location.back()">
        <ion-icon name="arrow-back-outline" style="font-size: 28px"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding" *ngIf="property">
  <div class="details-container" *ngIf="ready">
    <ion-grid>
      <ion-row>
        <ion-col size="12" sizeXl="8">
          <ion-card class="property-identity">
            <ion-card-content>
              <div class="name">
                <ion-text color="dark">{{ property.name }}</ion-text>

                <ion-button
                  class="action-btn"
                  color="light"
                  (click)="actionPopup()"
                >
                  <ion-icon name="ellipsis-vertical-outline"></ion-icon>
                </ion-button>
              </div>
              <div class="type">
                <app-property-badge [type]="property.type"></app-property-badge>
              </div>
              <div class="price"></div>
            </ion-card-content>
          </ion-card>

          <app-properties-gallery
            [images]="property.images"
            [showEdit]="isOwner"
            (edit)="editImages()"
            *ngIf="property.images"
          ></app-properties-gallery>

          <ion-card class="property-description">
            <ion-card-header> Description </ion-card-header>
            <ion-card-content>
              {{ property.description }}
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea
              impedit alias laborum corrupti magnam in repellat! Corrupti
              temporibus ut eos.
            </ion-card-content>
          </ion-card>

          <ion-card
            class="property-features"
            *ngIf="property.features && property.features.length"
          >
            <ion-card-header> Features </ion-card-header>
            <ion-card-content>
              <ion-badge
                color="primary"
                class="item"
                *ngFor="let item of property.features"
              >
                <div>
                  <ion-icon name="bookmark-outline"></ion-icon>
                  {{ item }}
                </div>
              </ion-badge>
            </ion-card-content>
          </ion-card>

          <ion-card class="property-address">
            <ion-card-header> Address </ion-card-header>
            <ion-card-content>
              {{ property.address }}
            </ion-card-content>
          </ion-card>

          <ion-card class="property-price" *ngIf="property.price">
            <ion-card-header> Price </ion-card-header>
            <ion-card-content class="price">
              {{ property.price | currency: property.currency:"symbol" }}
            </ion-card-content>
          </ion-card>

          <ion-card class="enquiry-section" *ngIf="!isOwner">
            <ion-card-header>
              <ion-card-title color="dark">
                Enquire for more Information
              </ion-card-title>
            </ion-card-header>

            <ion-card-content>
              <app-enquiries-new-form
                [property]="property"
                [userTo]="property.user_id"
              ></app-enquiries-new-form>
            </ion-card-content>
          </ion-card>
        </ion-col>

        <ion-col size="12" sizeXl="4">
          <div class="mortgage-container">
            <app-mortgage-core-calc
              [simpleMode]="true"
              [boxShadow]="false"
            ></app-mortgage-core-calc>

            <ion-card class="find-map-card">
              <ion-card-header>
                <ion-card-title color="light">Map View</ion-card-title>
              </ion-card-header>

              <ion-card-content>
                <p>
                  Maps can be a useful tool for viewing properties location &
                  filter them by types. this also help us to know distances so
                  that we know how far away one thing is from another.
                </p>

                <ion-button expand="block" size="large" (click)="findInMap()">
                  <ion-icon name="locate-outline"></ion-icon>
                  Find in Map
                </ion-button>
              </ion-card-content>
            </ion-card>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
</ion-content>