<ion-header>
  <ion-toolbar class="new-background-color">
    <ion-buttons slot="start" color="light">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>Wellnewss Route</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div *ngIf="placelist?.better_featured_image != null">
    <img src="{{placelist?.better_featured_image.source_url}}">
  </div>
  <div *ngIf="placelist?.better_featured_image == null" class="asd">
    <img src="assets/images/temp.png" />
  </div>
  <!-- <img src="{{placelist?.better_featured_image.source_url}}"> -->
  <ion-grid>
    <ion-row>
      <ion-col size="12">
        <div class="txt-place-title">{{placelist?.title.rendered}}</div>
      </ion-col>
      <ion-col size="12">
        <div class="txt-lead">เวลาเปิดทำงาน</div>
        <div>{{ placelist?.acf.openclose }}</div>
      </ion-col>
      <ion-col size="12">
        {{ placelist?.acf.gmap.address }}
        {{ placelist?.acf.gmap.lat }}
        {{ placelist?.acf.gmap.lng }}
        <img src="/assets/images/map-temp.jpg" alt="">
      </ion-col>
      <ion-col size="12">
        <ion-row>
          <ion-col size="4" class="ion-text-center">
            <!-- <div [innerHTML]="placelist?.acf.phone"></div>                         -->
            <fa-icon [icon]="['fas', 'phone-square-alt']" size="2x"></fa-icon>
          </ion-col>
          <ion-col size="4" class="ion-text-center">
            <!-- <div [innerHTML]="placelist?.acf.phone"></div>                         -->
            <fa-icon [icon]="['fas', 'map-marked-alt']" size="2x"></fa-icon>
          </ion-col>
          <ion-col size="4" class="ion-text-center">
            <!-- <div [innerHTML]="placelist?.acf.email"></div>             -->
            <fa-icon [icon]="['fas', 'envelope']" size="2x"></fa-icon>
          </ion-col>
        </ion-row>
      </ion-col>
      <ion-col size="12">
        <div class="txt-lead">ที่อยู่</div>
        <div [innerHTML]="placelist?.acf.address"></div>
      </ion-col>
      <ion-col size="12">
        <!-- <div class="txt-lead">รายละเอียด</div>
        <div [innerHTML]="placelist?.content.rendered"></div> -->
        <!-- <div>{{placelist?.content.rendered}}</div> -->
        <!-- <ion-button (click)="loadMap()" shape="round" color="dark">
          <ion-icon slot="start" name="locate"></ion-icon>
          Where I Am
        </ion-button> -->
        <div class="map-wrapper">
          <div id="map_center">
            <img src="assets/icon/location-marker.png" />
          </div>
          <div #map id="map"></div>
        </div>
        
      </ion-col>
    </ion-row>

  </ion-grid>
</ion-content>